@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/bricolage.woff2) format("woff2-variations"),url(fonts/bricolage.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-mono-500.woff2) format("woff2")}
/* ==========================================================
   johnibabalola.com — one world: a risk map with a gold thread.
   Contour lines run behind every page. Bricolage Grotesque
   for everything you read, IBM Plex Mono for map labels.
   Two palettes (lilac default, indigo) set in site settings.
   ========================================================== */
/* Indigo palette (the previous look). Switch in the editor: Site settings → Palette. */
:root{
  --ground:#1a1320;
  --ground-2:#221a2a;
  --plate:rgba(42,32,52,.78);
  --plate-solid:#271e31;
  --plate-shade:rgba(18,12,24,.55);
  --ink:#f4eef5;
  --muted:#bdb0c6;
  --faint:#968aa0;
  --line:rgba(244,238,245,.12);
  --line-strong:rgba(244,238,245,.28);
  --saffron:#d8b85c;
  --saffron-text:#d8b85c;
  --saffron-display:#d8b85c;
  --saffron-soft:rgba(216,184,92,.16);
  --gold-ping:rgba(216,184,92,.55);
  --on-gold:#1a1320;
  --sky:#d2c3e0;
  --sky-soft:rgba(210,195,224,.12);
  --contour:rgba(216,184,92,.30);
  --contour-2:rgba(210,195,224,.10);
  --particle:rgba(216,184,92,.75);
  --overlay:rgba(14,9,18,.92);
  color-scheme:dark;
}
/* Lilac palette: off-white ground, lilac plates, the same gold thread. */
:root[data-palette="lilac"]{
  --ground:#f6f3f7;
  --ground-2:#f0eaf4;
  --plate:rgba(238,229,241,.86);
  --plate-solid:#e9dfee;
  --plate-shade:rgba(80,60,110,.18);
  --ink:#271d36;
  --muted:#5d5270;
  --faint:#857a98;
  --line:rgba(39,29,54,.12);
  --line-strong:rgba(39,29,54,.26);
  --saffron:#a8862b;
  --saffron-text:#8a5d05;
  --saffron-display:#a8740e;
  --saffron-soft:rgba(168,134,43,.14);
  --gold-ping:rgba(168,134,43,.5);
  --on-gold:#1f1604;
  --sky:#6d4c8f;
  --sky-soft:rgba(146,108,178,.14);
  --contour:rgba(168,134,43,.42);
  --contour-2:rgba(158,122,186,.22);
  --particle:rgba(176,122,16,.8);
  --overlay:rgba(39,29,54,.82);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;background:var(--ground)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{margin:0;background:var(--ground);color:var(--ink);
  font:17px/1.62 "Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
a{color:var(--saffron-text);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--saffron);outline-offset:3px;border-radius:2px}
img,video{max-width:100%;height:auto;display:block}
p{margin:0 0 16px}

/* the map: one fixed canvas behind every page */
canvas.map{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.veil{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 70% at 20% 30%,color-mix(in srgb,var(--ground) 82%,transparent),color-mix(in srgb,var(--ground) 35%,transparent) 60%,color-mix(in srgb,var(--ground) 15%,transparent))}
body.quiet .veil{background:color-mix(in srgb,var(--ground) 80%,transparent)}
.page{position:relative;z-index:1}

.wrap{max-width:1240px;margin:0 auto;padding-inline:32px}
@media (max-width:600px){ .wrap{padding-inline:18px} }

h1,h2,h3{font-weight:700;letter-spacing:-.025em;line-height:1.04;margin:0;text-wrap:balance}
.label{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron-text);font-weight:500}
.coord{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.08em;color:var(--faint);text-transform:uppercase}
.muted{color:var(--muted)}

/* ---------------- top bar ---------------- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding-block:22px;position:relative;z-index:2}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.brand .dot{color:var(--saffron-text)}
.brand .mark{width:38px;height:38px;flex:none;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.brand .mark rect{fill:var(--plate-solid);stroke:var(--line-strong);stroke-width:1}
.brand .mark path{fill:none;stroke:var(--saffron);stroke-width:1.6;opacity:.8}
.brand .mark text{font:800 14px "Bricolage Grotesque",Arial,sans-serif;letter-spacing:-.5px;fill:var(--ink)}
.brand .mark circle{fill:var(--saffron)}
.brand:hover .mark{transform:rotate(-6deg)}
.brand:hover{color:var(--ink)}
.topbar nav{display:flex;gap:26px;flex-wrap:wrap}
.topbar nav a{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding-block:4px;border-bottom:1px solid transparent}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a.active{color:var(--ink);border-bottom-color:var(--saffron)}
@media (max-width:640px){ .topbar nav{gap:14px} .topbar nav a{font-size:11.5px;letter-spacing:.06em} }

/* ---------------- home hero ---------------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:56px;align-items:end;padding-block:64px 56px}
@media (max-width:880px){ .hero{grid-template-columns:1fr;gap:36px;padding-block:36px 40px} }
.hero h1{font-size:clamp(46px,7.8vw,100px);font-weight:800;letter-spacing:-.045em;line-height:.95;max-width:12.5ch;margin-top:20px}
.hero h1 .w{display:inline-block;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.hero h1 .w.hl{color:var(--saffron-display)}
@keyframes rise{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
.hero .intro{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:44ch;margin:28px 0 0;animation:fade .45s .15s both}
.hero .cta-row{animation:fade .45s .2s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* photo plates: every photo sits in a map "plate" with a coordinate caption */
.plate{margin:0}
.plate .frame{position:relative;aspect-ratio:4/5;width:100%;border-radius:3px;overflow:hidden;background:var(--plate-solid);border:1px solid var(--line-strong)}
.plate.wide .frame{aspect-ratio:3/2}
.plate img,.plate video{width:100%;height:100%;object-fit:cover}
.plate .frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,var(--plate-shade));mix-blend-mode:multiply}
.plate .tick{position:absolute;width:14px;height:14px;border-color:var(--saffron);border-style:solid;z-index:1}
.plate .tick.tl{top:8px;left:8px;border-width:1.5px 0 0 1.5px}
.plate .tick.br{bottom:8px;right:8px;border-width:0 1.5px 1.5px 0}
.plate figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:10px}
.monogram{width:100%;height:100%;display:grid;place-items:center;font-weight:800;font-size:110px;letter-spacing:-.06em;color:var(--saffron-text)}
@media (max-width:880px){ .hero .plate{max-width:260px} }

/* places ticker */
.ticker{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;position:relative;z-index:1;background:color-mix(in srgb,var(--ground) 60%,transparent)}
.ticker .track{display:inline-flex;gap:44px;padding-block:14px;animation:scroll calc(var(--n, 18) * 3.6s) linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker span{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.08em;color:var(--muted)}
.ticker span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--saffron);margin-right:12px;vertical-align:1px}
.ticker .lead-in{color:var(--saffron-text)}
.ticker .lead-in::before{display:none}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------------- inner page head ---------------- */
.page-head{padding-block:44px 56px;max-width:860px}
.page-head .label{display:block;margin-bottom:16px}
.page-head h1{font-size:clamp(40px,6.4vw,74px);font-weight:800;letter-spacing:-.04em;animation:rise .4s cubic-bezier(.2,.7,.2,1) both}
.page-head p{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:52ch;margin:22px 0 0}
.back{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;display:inline-block;margin-bottom:16px}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 20px;border-radius:2px;text-decoration:none;border:1px solid var(--line-strong);color:var(--ink);background:color-mix(in srgb,var(--ground) 45%,transparent);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.btn:hover{border-color:var(--saffron);color:var(--saffron-text)}
.btn.solid{background:var(--saffron);border-color:var(--saffron);color:var(--on-gold)}
.btn.solid:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.btn[aria-disabled="true"]{opacity:.5;cursor:default}

/* ---------------- sections ---------------- */
.sec{padding-block:64px;position:relative}
.sec-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.sec-grid > .label{display:flex;align-items:center;gap:14px}
.sec-grid > .label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-strong),transparent)}
.sec h2{font-size:clamp(30px,3.8vw,44px);margin-bottom:14px}
.lead{font-size:clamp(20px,2.3vw,26px);line-height:1.4;letter-spacing:-.01em;max-width:34ch;margin:0 0 36px}
.intro-line{color:var(--muted);max-width:60ch;margin-bottom:28px}
.prose{max-width:64ch}
.prose p{margin:0 0 18px}

/* the thread: three stations on one line */
.thread{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--saffron);margin-top:8px}
@media (max-width:880px){ .thread{grid-template-columns:1fr} }
.thread a{display:block;padding:26px 26px 26px 0;text-decoration:none;color:inherit;position:relative}
.thread a + a{padding-left:26px;border-left:1px solid var(--line)}
@media (max-width:880px){ .thread a + a{padding-left:0;border-left:0;border-top:1px solid var(--line)} }
.thread a::before{content:"";position:absolute;top:-7px;left:0;width:13px;height:13px;border-radius:50%;background:var(--ground);border:2px solid var(--saffron)}
.thread a + a::before{left:26px}
@media (max-width:880px){ .thread a + a::before{left:0} }
.thread a:hover::before{background:var(--saffron)}
.thread .label{display:block;margin-bottom:10px}
.thread h3{font-size:26px;margin-bottom:10px}
.thread p{color:var(--muted);font-size:16.5px;margin:0 0 14px}
.thread .go{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--saffron-text)}

/* cards (projects, blocks) */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){ .grid.g2{grid-template-columns:1fr} }
.card{display:flex;flex-direction:column;background:var(--plate);border:1px solid var(--line);border-radius:3px;padding:26px;text-decoration:none;color:inherit;
  backdrop-filter:blur(3px);transition:border-color .2s,transform .2s}
a.card:hover{border-color:var(--saffron);transform:translateY(-2px);color:inherit}
.card h3{font-size:28px;margin:10px 0 4px}
.card .sub{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);margin-bottom:14px}
.card p{color:var(--muted);margin:0}
.card .more{margin-top:auto;padding-top:20px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--saffron-text)}

/* progress: stages as a route with stations */
.route{position:relative;display:flex;justify-content:space-between;margin:24px 0 12px;padding-block:6px}
.route::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;background:var(--line-strong);transform:translateY(-50%)}
.route .fill{position:absolute;left:6px;top:50%;height:2px;background:var(--saffron);transform:translateY(-50%);width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.route i{position:relative;width:13px;height:13px;border-radius:50%;background:var(--ground);border:2px solid var(--line-strong);z-index:1}
.route i.done{background:var(--saffron);border-color:var(--saffron)}
.route i.now{background:var(--ground);border-color:var(--saffron);box-shadow:0 0 0 0 var(--gold-ping);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 var(--gold-ping)}80%,100%{box-shadow:0 0 0 12px transparent}}
.stage-label{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted)}
.stage-label b{color:var(--ink);font-weight:500}

.stage-list{list-style:none;padding:0;margin:14px 0 0}
.stage-list li{position:relative;padding:0 0 20px 32px;color:var(--muted);font-size:16.5px}
.stage-list li::before{content:"";position:absolute;left:2px;top:6px;width:12px;height:12px;border-radius:50%;border:2px solid var(--line-strong);background:var(--ground)}
.stage-list li::after{content:"";position:absolute;left:8px;top:22px;bottom:0;width:2px;background:var(--line)}
.stage-list li:last-child::after{display:none}
.stage-list li.done{color:var(--ink)}
.stage-list li.done::before{background:var(--saffron);border-color:var(--saffron)}
.stage-list li.done::after{background:var(--saffron)}
.stage-list li.now{color:var(--ink);font-weight:600}
.stage-list li.now::before{border-color:var(--saffron);animation:ping 2.4s ease-out infinite}
.stage-list small{display:block;font-weight:400;color:var(--muted);font-size:14.5px}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
@media (max-width:880px){ .detail{grid-template-columns:1fr} }
.side{background:var(--plate);border:1px solid var(--line);border-radius:3px;padding:24px}
.meta{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:16px;margin:0 0 24px}
.meta dt{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-top:4px}
.meta dd{margin:0}

/* ledgers & logs */
.ledger,.log,.entries{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.ledger li,.entries li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;padding:22px 0;border-bottom:1px solid var(--line)}
@media (max-width:640px){ .ledger li,.entries li{grid-template-columns:1fr;gap:4px} }
.ledger .yrs,.entries .when,.log .when{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--faint);padding-top:6px;font-variant-numeric:tabular-nums}
.ledger .cur{color:var(--saffron-text)}
.ledger h3{font-size:24px;margin-bottom:2px}
.ledger .role{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);margin-bottom:10px}
.ledger p{margin:0;max-width:62ch;color:var(--muted)}
.log li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}
@media (max-width:600px){ .log li{grid-template-columns:1fr;gap:2px} }
.entries h3{font-size:24px;margin-bottom:6px}
.entries h3 a{color:var(--ink);text-decoration:none}
.entries h3 a:hover{color:var(--saffron-text)}
.entries p{color:var(--muted);margin:0}
.tag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron-text);background:var(--saffron-soft);padding:4px 9px;border-radius:2px;margin-bottom:10px}
.tag.sky{color:var(--sky);background:var(--sky-soft)}
.empty{color:var(--muted);border-left:2px solid var(--saffron);padding:6px 0 6px 16px;max-width:60ch}

/* split: text + photo */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:start}
.split:has(> .plate){grid-template-columns:minmax(0,1fr) 340px}
@media (max-width:880px){ .split,.split:has(> .plate){grid-template-columns:1fr;gap:28px} .split .plate{max-width:340px} }

/* bio */
.bio{background:var(--plate);border:1px solid var(--line);border-radius:3px;padding:24px 26px;max-width:760px;margin-top:32px}
.bio p{margin:12px 0 18px}
.bio .row{display:flex;gap:12px;flex-wrap:wrap}

/* post */
.post-body{max-width:700px;margin:0 auto;padding-block:56px 24px;font-size:19px;line-height:1.72;
  background:color-mix(in srgb,var(--ground) 70%,transparent);border-radius:3px}
.post-body h2{font-size:30px;margin:44px 0 14px}
.post-body h3{font-size:24px;margin:34px 0 10px}
.post-body blockquote{margin:34px 0;padding:0 0 0 22px;border-left:2px solid var(--saffron);font-weight:600;font-size:26px;line-height:1.3;letter-spacing:-.015em}
.post-body img{border-radius:3px;margin:14px 0}
.post-body ul,.post-body ol{padding-left:24px}
.post-body hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.post-meta{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.05em;color:var(--muted);margin-top:24px}
.post-foot{max-width:700px;margin:0 auto 80px;border-top:1px solid var(--line-strong);padding-top:24px;display:flex;flex-wrap:wrap;gap:12px}
.post-foot p{width:100%;margin:0 0 8px;color:var(--muted)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-strong)}
@media (max-width:760px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.stat{padding:22px 18px 22px 0;border-bottom:1px solid var(--line)}
.stat b{display:block;font-weight:800;font-size:44px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;color:var(--muted);display:block;margin-top:10px;text-transform:uppercase}
.meter{height:3px;background:var(--line-strong);margin:18px 0 10px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--saffron);transition:width 1.2s cubic-bezier(.2,.7,.2,1)}

/* connect */
.channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){ .channels{grid-template-columns:1fr} }
.addr{font-family:"IBM Plex Mono",monospace;font-size:16px;word-break:break-all;color:var(--ink)}
.calendly{margin-top:28px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff}
.calendly iframe{display:block;width:100%;height:720px;border:0}

/* footer */
footer.foot{position:relative;z-index:1;border-top:1px solid var(--line);background:color-mix(in srgb,var(--ground) 85%,transparent);padding-block:40px 52px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted)}
footer.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer.foot a{color:var(--ink);text-decoration:none}
footer.foot a:hover{color:var(--saffron-text)}
footer.foot .links{display:flex;gap:22px;flex-wrap:wrap}

.channels .card{gap:12px}.channels .card h3{margin:0}

/* endurance: finished efforts */
.efforts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.efforts > li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;padding:28px 0;border-bottom:1px solid var(--line)}
@media (max-width:640px){ .efforts > li{grid-template-columns:1fr;gap:4px} }
.efforts .yrs{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--faint);padding-top:8px;text-transform:uppercase;letter-spacing:.06em}
.efforts h3{font-size:30px;margin-bottom:6px}
.efforts .result{font-weight:800;font-size:52px;letter-spacing:-.04em;line-height:1;color:var(--saffron-display);font-variant-numeric:tabular-nums;margin:6px 0 14px}
.efforts .cause{color:var(--ink);border-left:2px solid var(--saffron);padding-left:14px}
.efforts p{color:var(--muted);max-width:62ch}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
@media (max-width:640px){ .gallery{grid-template-columns:repeat(2,minmax(0,1fr))} }
.card .tag{align-self:flex-start}

/* wide screens: let grids use the width */
.grid.g2{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
@media (max-width:760px){ .grid.g2{grid-template-columns:1fr} }
.lead{max-width:46ch}
.thread{margin-top:0}
.excerpt{margin:28px 0 0;padding:4px 0 4px 22px;border-left:2px solid var(--saffron);font-size:22px;line-height:1.5;font-style:italic;color:var(--ink);max-width:56ch}
.excerpt cite{display:block;margin-top:12px;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.card .card-blurb{margin-top:12px;padding-left:12px;border-left:2px solid var(--line-strong);font-size:15.5px}

/* selected places I've spoken: a slow strip moving left */
.venues-wrap{margin-top:28px}
.venue-strip{margin-top:18px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.venue-strip:focus-visible{outline:2px solid var(--saffron);outline-offset:4px}
.venue-track{list-style:none;margin:0;padding:0;display:flex;gap:20px;width:max-content;
  animation:venues calc(var(--n) * 9s) linear infinite}
.venue-strip:hover .venue-track,.venue-strip:focus-within .venue-track{animation-play-state:paused}
@keyframes venues{to{transform:translateX(calc(-50% - 10px))}}
.venue{width:300px;flex:none;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  background:var(--plate);border:1px solid var(--line);border-radius:3px;padding:14px 14px 18px}
.venue-photo{position:relative;width:100%;aspect-ratio:3/2;border-radius:2px;overflow:hidden;background:var(--plate-solid);margin-bottom:10px;border:1px solid var(--line)}
.venue-photo img{width:100%;height:100%;object-fit:cover}
.venue-photo .tick{position:absolute;width:12px;height:12px;border-color:var(--saffron);border-style:solid;z-index:1}
.venue-photo .tick.tl{top:6px;left:6px;border-width:1.5px 0 0 1.5px}
.venue-photo .tick.br{bottom:6px;right:6px;border-width:0 1.5px 1.5px 0}
.venue-initial{width:100%;height:100%;display:grid;place-items:center;font-weight:800;font-size:64px;color:var(--saffron-text);opacity:.8}
.venue h3{font-size:21px}
.venue h3 a{color:var(--ink);text-decoration:none}
.venue h3 a:hover{color:var(--saffron-text)}
.venue p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.venue .venue-topic{color:var(--ink);font-weight:500}
@media (prefers-reduced-motion: reduce){
  .venue-strip{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .venue-track{animation:none}
  .venue[aria-hidden="true"]{display:none}
}

/* home: compact "now" list */
.now-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.now-list a{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.now-list a:hover h3{color:var(--saffron-text)}
.now-list .kind{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.now-list h3{font-size:22px;transition:color .2s}
.now-list .where{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);text-align:right;display:flex;align-items:center;gap:12px;justify-content:flex-end}
.now-list .pip{width:9px;height:9px;border-radius:50%;background:var(--saffron);flex:none;animation:ping 2.4s ease-out infinite}
@media (max-width:700px){ .now-list a{grid-template-columns:1fr;gap:4px} .now-list .where{justify-content:flex-start;text-align:left} }

/* home: start here */
.start{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px}
@media (max-width:860px){ .start{grid-template-columns:1fr} }
.start-side{display:grid;gap:18px;align-content:start}
.card.feature{padding:34px;min-height:320px;justify-content:flex-start;gap:4px;
  background:linear-gradient(160deg,var(--saffron-soft),transparent 55%),var(--plate)}
.card.feature h3{font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.035em;margin:14px 0 12px;max-width:18ch}
.card.feature p{font-size:18px;max-width:52ch;margin-bottom:14px}
.card h3 .accent{color:var(--saffron-text)}
.book-card h3{font-style:italic;font-weight:600}
.invite{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px;padding:26px 30px;border:1px solid var(--saffron);border-radius:3px;text-decoration:none;color:var(--ink);background:rgba(216,184,92,.06);transition:background .2s}
.invite:hover{background:rgba(216,184,92,.14);color:var(--ink)}
.invite b{display:block;font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.02em;margin-top:8px}
.invite .arrow{font-size:34px;color:var(--saffron-text);transition:transform .2s}
.invite:hover .arrow{transform:translateX(6px)}

/* reading shelf */
.shelf{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.book{position:relative;background:var(--plate);border:1px solid var(--line);border-radius:3px;padding:22px 22px 22px 34px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.book .spine{position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--line-strong);border-radius:3px 0 0 3px}
.book.now .spine{background:var(--saffron)}
.book h3{font-size:21px;font-style:italic;font-weight:600}
.book h3 a{color:var(--ink);text-decoration:none}
.book p{margin:4px 0 0;color:var(--muted);font-size:15px}

/* lightbox */
.lightbox-unused{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:var(--overlay);backdrop-filter:blur(4px)}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(560px,100%);display:flex;flex-direction:column;gap:14px}
.lightbox img{max-height:72vh;width:auto;max-width:100%;border:1px solid var(--line-strong);border-radius:3px;margin:0 auto}
.lightbox .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.lightbox .close{position:absolute;top:18px;right:18px}
.card.question h3{font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.card.question h3::before{content:"?";display:block;font-weight:800;font-size:40px;color:var(--saffron-text);line-height:1;margin-bottom:8px}
.split:has(> .plate) > div{min-width:0}
@media (max-width:1080px) and (min-width:881px){ .thread{grid-template-columns:repeat(2,minmax(0,1fr))} .thread a:nth-child(3){padding-left:0;border-left:0} .thread a:nth-child(3)::before{left:0} }
.teaser-card{border-style:dashed;background:transparent;justify-content:center}

/* thread: live summary under each pillar */
.now-mini{list-style:none;margin:4px 0 18px;padding:14px 0 0;border-top:1px dashed var(--line-strong);display:grid;gap:10px}
.now-mini:empty{display:none}
.now-mini li{position:relative;padding-left:16px;display:flex;flex-direction:column;gap:1px}
.now-mini li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--saffron)}
.now-mini b{font-weight:600;font-size:15.5px;line-height:1.3;color:var(--ink)}
.now-mini span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.04em;color:var(--faint)}
.thread a{display:flex;flex-direction:column}
.thread .go{margin-top:auto}

/* press & links */
.press{margin-top:22px}
.press-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.press-list a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:3px;background:var(--plate);text-decoration:none;color:var(--ink);transition:border-color .2s}
.press-list a:hover{border-color:var(--saffron);color:var(--ink)}
.press-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.press-meta .tag{margin:0}
.press-list b{font-weight:600;font-size:16.5px;line-height:1.35}
.press-sum{color:var(--muted);font-size:15px}
.press-count{margin-top:10px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sky)}
.card .press{margin-top:16px}

/* homepage press strip */
.press-band{position:relative;z-index:1;padding-block:8px 72px}
.press-band .label{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.press-band .label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-strong),transparent)}
.press-strip{overflow:hidden;border-block:1px solid var(--line);background:color-mix(in srgb,var(--ground) 55%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.press-strip:focus-visible{outline:2px solid var(--saffron);outline-offset:4px}
.press-track{list-style:none;margin:0;padding:0;display:flex;width:max-content;animation:venues calc(var(--n) * 8s) linear infinite}
.press-strip:hover .press-track,.press-strip:focus-within .press-track{animation-play-state:paused}
.press-track li{flex:none;width:330px;border-right:1px solid var(--line)}
.press-track a{display:flex;flex-direction:column;gap:6px;padding:20px 24px;text-decoration:none;color:var(--ink);height:100%}
.press-track a:hover b{color:var(--saffron-text)}
.press-track b{font-weight:600;font-size:17px;line-height:1.35}
.press-from{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sky)}
@media (prefers-reduced-motion: reduce){
  .press-strip{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .press-track{animation:none}
  .press-track li[aria-hidden="true"]{display:none}
}

/* balance: fill the width instead of hugging the left */
.wrap{max-width:1320px}
.hero{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:48px;align-items:center}
.hero h1{max-width:13.5ch;font-size:clamp(46px,8.2vw,112px)}
.hero .intro{max-width:50ch}
.hero .plate{width:100%;max-width:420px;justify-self:end}
.lead{max-width:62ch}
.split:has(> .plate){grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:48px}
.split .prose{max-width:none}
@media (max-width:880px){ .hero .plate{justify-self:start;max-width:260px} }

/* even the map out: no heavy fade on the left, so the page reads as one surface */
.veil{background:color-mix(in srgb,var(--ground) 38%,transparent)}
body.quiet .veil{background:color-mix(in srgb,var(--ground) 80%,transparent)}
.hero h1{max-width:none;font-size:clamp(46px,7vw,100px)}
.hero h1 .w{white-space:nowrap}

/* inner page heads: headline left, intro right, using the full width */
@media (min-width:900px){
  body:not(.quiet) .page-head{max-width:none;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:64px;align-items:end}
  body:not(.quiet) .page-head > .back,
  body:not(.quiet) .page-head > .label{grid-column:1 / -1}
  body:not(.quiet) .page-head > h1{grid-column:1}
  body:not(.quiet) .page-head > p{grid-column:2;margin:0 0 10px;max-width:46ch}
}
/* section intros and leads can run wider */
.intro-line{max-width:72ch}
/* card grids stretch to fill the row instead of leaving an empty column */
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
@media (max-width:760px){ .grid.g2{grid-template-columns:1fr} }

/* location pin in the hero */
.pin{display:inline-flex;align-items:center;gap:10px;margin:26px 0 0;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);animation:fade .45s .2s both}
.pin svg{width:20px;height:20px;flex:none}
.pin svg path{fill:var(--saffron)}
.pin svg circle{fill:var(--ground)}
.hero .cta-row{margin-top:22px}

/* moving motto above the capitals */
.motto{position:relative;z-index:1;overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);background:color-mix(in srgb,var(--ground) 60%,transparent)}
.motto-track{display:inline-flex;align-items:center;padding-block:14px;animation:motto 70s linear infinite}
.motto span{font-weight:800;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.03em;color:var(--ink);display:inline-flex;align-items:center}
.motto span:nth-child(even){color:transparent;-webkit-text-stroke:1.2px var(--saffron)}
.motto span::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--saffron);margin-inline:32px;flex:none}
.motto:hover .motto-track{animation-play-state:paused}
@keyframes motto{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion: reduce){ .motto-track{animation:none} }

/* tighter outer margins so content starts closer to the left edge */
.wrap{max-width:1480px;padding-inline:clamp(20px,3.4vw,48px)}
/* narrower date/label columns in lists, so less empty space runs down the left */
.ledger li,.entries li,.efforts > li{grid-template-columns:110px minmax(0,1fr);gap:24px}
.log li{grid-template-columns:100px minmax(0,1fr)}
@media (max-width:640px){ .ledger li,.entries li,.efforts > li,.log li{grid-template-columns:1fr;gap:4px} }
.shelf{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* calmer: only the map and the motto + capitals band move */
.venue-strip,.press-strip{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.venue-track,.press-track{animation:none}
.venue-track [aria-hidden="true"],.press-track li[aria-hidden="true"]{display:none}
.venue,.press-track li{scroll-snap-align:start}
.press-strip{border-inline:0}
.strip-nav{display:flex;gap:8px;margin-top:14px}
.strip-nav .btn{padding:8px 14px;font-size:15px}
.strip-nav .btn:disabled{opacity:.35;cursor:default;border-color:var(--line)}
.press-band .strip-nav{max-width:1480px;margin:14px auto 0;padding-inline:clamp(20px,3.4vw,48px)}
.route i.now,.stage-list li.now::before,.now-list .pip{animation:none}
.route i.now{box-shadow:0 0 0 4px var(--saffron-soft)}
.stage-list li.now::before{box-shadow:0 0 0 4px var(--saffron-soft)}

/* ---------- carousels: round arrows over the edges, dots below ---------- */
.strip-nav{display:none}
.carousel{position:relative}
.carousel .venue-strip,.carousel .press-strip{scrollbar-width:none;cursor:grab}
.carousel .venue-strip::-webkit-scrollbar,.carousel .press-strip::-webkit-scrollbar{display:none}
.carousel .dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:1px solid var(--line-strong);
  background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(6px);
  box-shadow:0 6px 20px rgba(39,29,54,.16);transition:transform .2s,background .2s,opacity .2s,border-color .2s}
.car-btn svg{width:22px;height:22px}
.car-btn svg path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.car-btn.prev{left:10px}
.car-btn.next{right:10px}
.car-btn:hover{background:var(--saffron);border-color:var(--saffron);transform:translateY(-50%) scale(1.06)}
.car-btn:hover svg path{stroke:var(--on-gold)}
.car-btn:disabled{opacity:0;pointer-events:none}
.carousel.fits .car-btn{display:none}
.car-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.car-dots[hidden]{display:none}
.car-dots button{width:8px;height:8px;padding:0;border-radius:999px;border:0;background:var(--line-strong);cursor:pointer;transition:width .25s,background .25s}
.car-dots button[aria-current="true"]{width:26px;background:var(--saffron)}
.press-band .car-dots{margin-top:18px}
@media (max-width:640px){ .car-btn{width:40px;height:40px} .car-btn.prev{left:6px} .car-btn.next{right:6px} }

/* ---------- cards that open something should look clickable ---------- */
a.card{position:relative;cursor:pointer}
a.card::after{content:"";position:absolute;top:22px;right:22px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 16 16 8M9 8h7v7' fill='none' stroke='%23271d36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
  transition:transform .25s,background-color .25s,border-color .25s}
a.card:hover::after,a.card:focus-visible::after{background-color:var(--saffron);border-color:var(--saffron);transform:rotate(45deg)}
a.card:hover{box-shadow:0 14px 34px rgba(39,29,54,.12)}
.card .more{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;margin-top:auto;padding:10px 16px;border-radius:999px;
  background:var(--ink);color:var(--ground);font-size:11.5px;letter-spacing:.1em;transition:background .2s}
a.card:hover .more{background:var(--saffron);color:var(--on-gold)}
.card > .route + .stage-label + .more,.card .stage-label + .more{margin-top:22px}
a.card h3{padding-right:52px}
:root[data-palette="indigo"] a.card::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 16 16 8M9 8h7v7' fill='none' stroke='%23f4eef5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------- clearer back link ---------- */
.back{display:inline-flex;align-items:center;gap:12px;margin-bottom:22px;padding:8px 18px 8px 8px;border-radius:999px;
  border:1px solid var(--line-strong);background:color-mix(in srgb,var(--ground) 85%,transparent);
  font-size:12.5px;letter-spacing:.1em;color:var(--ink);transition:background .2s,border-color .2s}
.back .arr{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--ground);font-size:15px;letter-spacing:0;transition:transform .2s,background .2s}
.back:hover{border-color:var(--saffron);color:var(--ink)}
.back:hover .arr{background:var(--saffron);color:var(--on-gold);transform:translateX(-3px)}
@media (min-width:900px){ body:not(.quiet) .page-head > .back{justify-self:start} }

/* ---------- section icons ---------- */
.ico{width:18px;height:18px;flex:none;overflow:visible}
.ico .s{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico .g{fill:var(--saffron)}
.ico .g-s{fill:none;stroke:var(--saffron);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico .g-f{fill:var(--saffron);stroke:var(--saffron);stroke-width:1.2;stroke-linejoin:round}

/* main navigation: one pill with icon + label per section */
.mainnav{display:flex;gap:4px;padding:5px;border-radius:999px;border:1px solid var(--line-strong);
  background:color-mix(in srgb,var(--plate-solid) 70%,transparent);backdrop-filter:blur(6px)}
.topbar .mainnav a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 13px;border-radius:999px;border:0;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--muted);
  transition:background .2s,color .2s}
.topbar .mainnav a:hover{background:var(--ground);color:var(--ink)}
.topbar .mainnav a:hover .ico{transform:translateY(-1px)}
.topbar .mainnav a.active{background:var(--ink);color:var(--ground);border:0}
.topbar .mainnav a.active .ico .s{stroke:var(--ground)}
.mainnav .ico{transition:transform .2s}
@media (max-width:760px){
  .topbar{row-gap:14px}
  .mainnav{width:100%;justify-content:space-between;border-radius:18px;padding:5px}
  .topbar .mainnav a{flex:1;flex-direction:column;gap:5px;padding:9px 4px;border-radius:13px;font-size:9.5px;letter-spacing:.06em}
  .mainnav .ico{width:20px;height:20px}
}

/* homepage thread: icon badge above each pillar */
.thread-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin:6px 0 14px;
  background:var(--plate-solid);border:1px solid var(--line-strong);color:var(--ink);transition:background .2s,transform .2s}
.thread-ico .ico{width:24px;height:24px}
.thread a:hover .thread-ico{background:var(--saffron-soft);transform:translateY(-2px)}

/* Ivory palette: off-white cards, lilac only as an accent (tags, icon badges, photo frames), gold thread. */
:root[data-palette="ivory"]{
  --ground:#f6f3f7;
  --ground-2:#f1ece4;
  --plate:rgba(253,251,248,.92);
  --plate-solid:#ece3ef;
  --plate-shade:rgba(80,60,110,.16);
  --ink:#271d36;
  --muted:#5d5270;
  --faint:#857a98;
  --line:rgba(39,29,54,.11);
  --line-strong:rgba(39,29,54,.24);
  --saffron:#a8862b;
  --saffron-text:#8a5d05;
  --saffron-display:#a8740e;
  --saffron-soft:rgba(168,134,43,.14);
  --gold-ping:rgba(168,134,43,.5);
  --on-gold:#1f1604;
  --sky:#6d4c8f;
  --sky-soft:rgba(146,108,178,.14);
  --contour:rgba(168,134,43,.40);
  --contour-2:rgba(158,122,186,.18);
  --particle:rgba(176,122,16,.8);
  --overlay:rgba(39,29,54,.82);
  color-scheme:light;
}
:root[data-palette="ivory"] .card,:root[data-palette="ivory"] .side,:root[data-palette="ivory"] .bio,
:root[data-palette="ivory"] .press-list a,:root[data-palette="ivory"] .venue,:root[data-palette="ivory"] .book{box-shadow:0 1px 0 rgba(39,29,54,.04),0 8px 24px rgba(39,29,54,.05)}
:root[data-palette="ivory"] .mainnav{background:color-mix(in srgb,var(--plate-solid) 80%,transparent)}

/* Lilac, mixed with cream: cards halfway between the lilac and the off-white ground. */
:root[data-palette="lilac"]{
  --ground:#f6f3f7;
  --plate:rgba(243,236,241,.9);
  --plate-solid:#eadff0;
  --line:rgba(39,29,54,.11);
}
:root[data-palette="lilac"] .card,:root[data-palette="lilac"] .side,:root[data-palette="lilac"] .bio,
:root[data-palette="lilac"] .press-list a,:root[data-palette="lilac"] .venue,:root[data-palette="lilac"] .book{box-shadow:0 1px 0 rgba(39,29,54,.04),0 8px 24px rgba(60,40,80,.05)}
:root[data-palette="lilac"] .card.feature{background:linear-gradient(160deg,rgba(168,134,43,.10),transparent 55%),var(--plate)}

/* lilac, reduced: closer to cream */
:root[data-palette="lilac"]{--plate:rgba(246,241,242,.92);--plate-solid:#ede4ef}

/* ---------- 75-day progress: ring, facts and a dot per day ---------- */
.streak{margin:22px 0 4px;padding:22px;border-radius:14px;background:var(--ground);border:1px solid var(--line)}
.streak-top{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.ring{position:relative;width:132px;height:132px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}
.ring .track{stroke:var(--plate-solid)}
.ring .arc{stroke:var(--saffron);stroke-linecap:round;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ring-num b{font-size:44px;font-weight:800;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.ring-num span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.streak-facts{flex:1;min-width:200px;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.streak-facts dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.streak-facts dd{margin:2px 0 0;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.streak-facts div:first-child dd{color:var(--saffron-display)}
.streak-grid{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:6px;margin-top:22px}
.streak-grid span{aspect-ratio:1;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;display:grid;place-items:center;
  font:700 9px "IBM Plex Mono",monospace;color:var(--on-gold);opacity:0;transform:scale(.6);transition:opacity .4s,transform .4s;transition-delay:calc(var(--i) * 12ms)}
.streak.in .streak-grid span{opacity:1;transform:none}
.streak-grid span.done{background:var(--saffron);border-color:var(--saffron)}
.streak-grid span.today{background:var(--ink);border-color:var(--ink);color:var(--ground);transform:scale(1.25);box-shadow:0 0 0 4px var(--saffron-soft)}
.streak.in .streak-grid span.today{transform:scale(1.25)}
.streak-legend{display:flex;gap:18px;margin-top:16px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.streak-legend span{display:inline-flex;align-items:center;gap:7px}
.streak-legend i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line-strong)}
.streak-legend i.done{background:var(--saffron);border-color:var(--saffron)}
.streak-legend i.today{background:var(--ink);border-color:var(--ink)}
@media (max-width:520px){ .streak-grid{grid-template-columns:repeat(10,minmax(0,1fr))} .ring{width:112px;height:112px} .ring-num b{font-size:36px} }

/* ==========================================================
   LILAC PALETTE, FINAL: one lilac family, more contrast.
   Every lilac element draws from these four tokens:
     --lilac-wash  cards (lilac folded into cream)
     --lilac       frames, badges, nav, tags, ring track
     --lilac-edge  borders around lilac elements
     --lilac-ink   lilac text (tags, labels)
   ========================================================== */
:root[data-palette="lilac"]{
  --lilac-wash:#f4eef3;
  --lilac:#e9ddef;
  --lilac-edge:#c9b3d8;
  --lilac-ink:#57397e;

  --ground:#f6f3f7;
  --ground-2:#efeaf2;
  --plate:rgba(244,238,243,.95);
  --plate-solid:var(--lilac);
  --plate-shade:rgba(40,24,64,.18);

  --ink:#1c1430;
  --muted:#4a3f5d;
  --faint:#6b6080;
  --line:rgba(28,20,48,.14);
  --line-strong:rgba(28,20,48,.30);

  --saffron:#a8862b;
  --saffron-text:#6e5517;
  --saffron-display:#8f7022;
  --saffron-soft:rgba(168,134,43,.16);
  --gold-ping:rgba(168,134,43,.5);
  --on-gold:#1a1320;

  --sky:var(--lilac-ink);
  --sky-soft:var(--lilac);
  --contour:rgba(168,134,43,.42);
  --contour-2:rgba(140,98,176,.22);
  --overlay:rgba(28,20,48,.84);
}
/* lilac elements share the same fill and edge */
:root[data-palette="lilac"] .tag.sky{background:var(--lilac);color:var(--lilac-ink);box-shadow:inset 0 0 0 1px var(--lilac-edge)}
:root[data-palette="lilac"] .tag{box-shadow:inset 0 0 0 1px rgba(168,134,43,.35)}
:root[data-palette="lilac"] .thread-ico,
:root[data-palette="lilac"] .brand .mark rect,
:root[data-palette="lilac"] .plate .frame,
:root[data-palette="lilac"] .venue-photo{border-color:var(--lilac-edge)}
:root[data-palette="lilac"] .brand .mark rect{stroke:var(--lilac-edge)}
:root[data-palette="lilac"] .mainnav{background:var(--lilac);border-color:var(--lilac-edge)}
:root[data-palette="lilac"] .topbar .mainnav a:hover{background:var(--lilac-wash)}
:root[data-palette="lilac"] .book .spine{background:var(--lilac-edge)}
:root[data-palette="lilac"] .book.now .spine{background:var(--saffron)}
:root[data-palette="lilac"] .ring .track{stroke:var(--lilac)}
:root[data-palette="lilac"] .streak-grid span:not(.done):not(.today){border-color:var(--lilac-edge)}
:root[data-palette="lilac"] .press-count,:root[data-palette="lilac"] .press-from{color:var(--lilac-ink)}
/* cards: a clearer edge and a touch more depth */
:root[data-palette="lilac"] .card,:root[data-palette="lilac"] .side,:root[data-palette="lilac"] .bio,
:root[data-palette="lilac"] .press-list a,:root[data-palette="lilac"] .venue,:root[data-palette="lilac"] .book{
  border-color:rgba(28,20,48,.16);box-shadow:0 1px 0 rgba(28,20,48,.05),0 10px 28px rgba(40,24,64,.07)}
:root[data-palette="lilac"] a.card:hover{box-shadow:0 16px 38px rgba(40,24,64,.14);border-color:var(--saffron)}
:root[data-palette="lilac"] .streak{background:var(--ground);border-color:rgba(28,20,48,.14)}
:root[data-palette="lilac"] .btn{border-color:rgba(28,20,48,.34)}
:root[data-palette="lilac"] .card .more{background:var(--ink)}
:root[data-palette="lilac"] .car-btn{box-shadow:0 6px 20px rgba(40,24,64,.18)}

/* ---------- marathon card: cause + coming soon ---------- */
.cause-box{display:flex;gap:16px;align-items:flex-start;margin-top:22px;padding:18px 20px;border-radius:14px;
  background:linear-gradient(135deg,var(--saffron-soft),transparent 70%),var(--ground);border:1px solid rgba(168,134,43,.35)}
.cause-badge{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--saffron)}
.cause-badge svg{width:22px;height:22px}
.cause-badge path{fill:var(--ground)}
.cause-box p{margin:6px 0 8px;color:var(--ink);font-size:16.5px;line-height:1.5}
.cause-link{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--saffron-text)}
.cause-link:hover{color:var(--ink)}
.soon{margin-top:18px}
.soon ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.soon li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;border:1px dashed var(--lilac-edge, var(--line-strong));background:color-mix(in srgb,var(--plate-solid) 45%,transparent)}
.soon li div{flex:1;display:flex;flex-direction:column}
.soon b{font-weight:600;font-size:15.5px;color:var(--ink)}
.soon li div span{font-size:14px;color:var(--muted)}
.soon em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);padding:4px 9px;border-radius:999px;background:var(--plate-solid)}
.soon-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--saffron);flex:none}

/* ---------- brand: simple JB monogram + name in bold capitals ---------- */
.brand{gap:14px}
.brand .mono{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--ink);color:var(--ground);font-weight:700;font-size:15px;letter-spacing:.02em;line-height:1}
.brand .name{font-weight:800;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.brand:hover .mono{background:var(--saffron);color:var(--on-gold)}
@media (max-width:420px){ .brand .name{font-size:15px;letter-spacing:.06em} .brand .mono{width:36px;height:36px;font-size:14px} }

/* ---------- project pages: journey across the top, now/next, fuller left column ---------- */
.journey-wrap{margin:-16px 0 8px}
.journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));position:relative}
.journey li{position:relative;padding:0 18px 0 0;display:flex;flex-direction:column;gap:4px}
.journey li::before{content:"";position:absolute;top:19px;left:40px;right:0;height:2px;background:var(--line-strong)}
.journey li:last-child::before{display:none}
.journey li.done::before{background:var(--saffron)}
.j-dot{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;
  font:600 14px "IBM Plex Mono",monospace;background:var(--ground);border:2px solid var(--line-strong);color:var(--faint)}
.journey li.done .j-dot{background:var(--saffron);border-color:var(--saffron);color:var(--on-gold)}
.journey li.now .j-dot{background:var(--ink);border-color:var(--ink);color:var(--ground);box-shadow:0 0 0 6px var(--saffron-soft)}
.journey b{font-size:17px;font-weight:700;color:var(--ink)}
.journey li:not(.done):not(.now) b{color:var(--muted)}
.journey b em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--saffron);color:var(--on-gold);padding:3px 7px;border-radius:999px;vertical-align:2px;margin-left:4px}
.journey span:not(.j-dot){font-size:14px;color:var(--muted);line-height:1.45;max-width:26ch}
@media (max-width:760px){
  .journey{grid-template-columns:1fr;gap:18px}
  .journey li{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:0}
  .journey li::before{top:40px;bottom:-18px;left:19px;right:auto;width:2px;height:auto}
  .j-dot{margin:0}
  .journey span:not(.j-dot){flex-basis:100%;padding-left:54px}
}
.nownext{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:40px}
@media (max-width:640px){ .nownext{grid-template-columns:1fr} }
.nn{padding:20px 22px;border-radius:14px;border:1px solid var(--line)}
.nn.now{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.nn.now .label{color:var(--saffron)}
.nn.now p{color:color-mix(in srgb,var(--ground) 78%,transparent)}
.nn.next{background:var(--plate-solid);border-color:var(--lilac-edge, var(--line-strong))}
.nn b{display:block;font-size:22px;font-weight:700;letter-spacing:-.01em;margin:8px 0 4px}
.nn p{margin:0;font-size:15.5px;color:var(--muted)}
.block-gap{height:44px}
.side-stack{display:grid;gap:18px;align-content:start}
.side-stack .side .btn{margin-top:4px}

@media (max-width:760px){
  .journey li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:start}
  .journey li .j-dot{grid-row:1 / span 2}
  .journey li b{align-self:end;padding-top:8px}
  .journey span:not(.j-dot){padding-left:0;grid-column:2}
}

/* leaves motif colours (per palette) */
:root{--leaf-gold:rgba(216,184,92,.30);--leaf-lilac:rgba(142,169,255,.22)}
:root[data-palette="lilac"],:root[data-palette="ivory"]{--leaf-gold:rgba(168,134,43,.40);--leaf-lilac:rgba(140,98,176,.34)}

:root[data-palette="lilac"],:root[data-palette="ivory"]{--leaf-gold:rgba(168,134,43,.55);--leaf-lilac:rgba(128,86,168,.45);--leaf-soil:rgba(122,80,3,.25)}
:root[data-palette="indigo"]{--leaf-gold:rgba(216,184,92,.5);--leaf-lilac:rgba(210,195,224,.35);--leaf-soil:rgba(216,184,92,.25)}

/* garden strips where seedlings spring up */
.garden{position:relative;z-index:1;height:110px;margin-top:24px;pointer-events:none}
.garden canvas{display:block;width:100%;height:100%}
.hero-garden{height:90px;margin-top:-40px}
.garden + .foot{border-top-color:transparent}
.hero-garden{height:96px;margin-top:0}

/* seedlings across the background: faint, like the old map lines */
:root[data-palette="lilac"],:root[data-palette="ivory"]{--leaf-gold:rgba(168,134,43,.42);--leaf-lilac:rgba(128,86,168,.34);--leaf-soil:rgba(122,80,3,.22)}
.garden{display:none}

/* ================= GROWTH: the one motif ================= */
/* growth marks */
.gr{display:block;width:100%;height:100%;overflow:visible}
.gr .gf{fill:var(--saffron)}
.gr .gv{fill:none;stroke:var(--ground);stroke-width:1.4;stroke-linecap:round}
.gr .gb{fill:var(--ink)}
.gr .gs{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.gr .gp{fill:var(--saffron-soft);stroke:var(--saffron);stroke-width:1.3}
.gr .gc{fill:var(--saffron)}
.gr .ge{fill:var(--ground);stroke:var(--line-strong);stroke-width:1.6}

/* card routes: seed, bud, leaf, blossom */
.route i,.route i.done,.route i.now{width:22px;height:22px;border:0;border-radius:0;background:none;box-shadow:none;animation:none}
.route{padding-block:8px}
.route::before,.route .fill{left:11px}
.route i.now .gr{filter:drop-shadow(0 0 5px var(--saffron-soft))}

/* project journey dots */
.j-dot .gr{width:24px;height:24px}
.journey li.done .j-dot{background:var(--ground);border-color:var(--saffron)}
.journey li.now .j-dot{background:var(--ink);border-color:var(--ink)}
.journey li.now .j-dot .gb{fill:var(--saffron)}
.journey li.now .j-dot .gs{stroke:var(--saffron)}

/* homepage thread: the stem */
.thread{position:relative}
.thread.has-stem{border-top-color:transparent}
.thread.has-stem > a::before{display:none}
.thread .stem{position:absolute;left:0;top:-22px;width:100%;height:44px;overflow:visible;pointer-events:none}
.stem-line{fill:none;stroke:var(--saffron);stroke-width:1.6;stroke-linecap:round}
.stem-knot{fill:var(--ground);stroke:var(--saffron);stroke-width:1.6}
.stem-leaves{transform:scale(0);transform-origin:0 0;transform-box:view-box;opacity:0;transition:transform .9s cubic-bezier(.2,1.4,.4,1),opacity .5s}
.stem-node.open .stem-leaves{transform:scale(1);opacity:1}
.stem-leaf{fill:var(--saffron);opacity:.85}
.stem-vein{stroke:var(--ground);stroke-width:1.1;fill:none;stroke-linecap:round}
.stem-node.open .stem-knot{fill:var(--saffron)}

/* the signature leaf: bullets and the footer */
.leafmark{display:inline-block;width:10px;height:10px;background:var(--saffron);border-radius:0 100% 0 100%;margin-right:10px;vertical-align:-1px}
.now-mini li::before{width:8px;height:8px;border-radius:0 100% 0 100%;top:6px}
.sig{display:inline-flex;align-items:center}

/* ---------- a warmer, less bare background: soft light washes + paper grain (still, no motion) ---------- */
:root[data-palette="lilac"] body,:root[data-palette="ivory"] body{
  background:
    radial-gradient(60vw 50vh at 100% 0%, rgba(201,178,222,.30), transparent 70%),
    radial-gradient(55vw 55vh at 0% 100%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(40vw 40vh at 0% 20%, rgba(233,221,239,.35), transparent 70%),
    var(--ground);
  background-attachment:fixed}
:root[data-palette="lilac"] .veil,:root[data-palette="ivory"] .veil{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-color:transparent}
/* alternate bands give the long pages rhythm */
:root[data-palette="lilac"] .band-soft,:root[data-palette="ivory"] .band-soft{position:relative}
:root[data-palette="lilac"] .band-soft::before,:root[data-palette="ivory"] .band-soft::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(233,221,239,.38) 12%,rgba(233,221,239,.38) 88%,transparent)}
:root[data-palette="lilac"] body,:root[data-palette="ivory"] body{
  background:
    radial-gradient(62vw 58vh at 100% 0%, rgba(201,178,222,.30), transparent 70%),
    radial-gradient(70vw 60vh at 40% 45%, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(58vw 60vh at 0% 100%, rgba(255,255,255,.62), transparent 70%),
    radial-gradient(45vw 45vh at 0% 18%, rgba(226,212,236,.32), transparent 70%),
    radial-gradient(40vw 40vh at 100% 85%, rgba(226,212,236,.35), transparent 70%),
    var(--ground);
  background-attachment:fixed}

/* project cards: route, stage and button always sit at the same height across a row */
.card-foot{margin-top:auto;padding-top:8px;display:flex;flex-direction:column}
.card-foot .more{margin-top:22px}
/* footer: keep the spaces in "© 2026 John I. Babalola" */
.sig{display:inline-flex;align-items:center;gap:.45em}
.sig .leafmark{margin-right:.2em}

/* ---- photos that sit in the page: soft edges that dissolve into the background ---- */
.plate.blend{position:relative;isolation:isolate}
.plate.blend .frame{border:0;border-radius:0;background:transparent;overflow:visible}
.plate.blend .frame::after{display:none}
.plate.blend img,.plate.blend video{
  --fx:linear-gradient(to right,transparent 0,#000 var(--fl,16%),#000 calc(100% - var(--fr,10%)),transparent 100%);
  --fy:linear-gradient(to bottom,transparent 0,#000 var(--ft,8%),#000 calc(100% - var(--fb,20%)),transparent 100%);
  -webkit-mask-image:var(--fx),var(--fy);-webkit-mask-composite:source-in;
          mask-image:var(--fx),var(--fy);mask-composite:intersect}
.plate.blend::before{content:"";position:absolute;inset:6% -8% -4% 8%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--lilac) 85%,transparent),transparent);filter:blur(8px)}
.hero .plate.blend .frame{aspect-ratio:886/1002}
.hero .plate.blend{max-width:460px}

/* ---- the thread: photo beside the intro, the four areas below ---- */
.thread-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px 56px;align-items:center}
.thread-layout.no-photo{grid-template-columns:minmax(0,1fr)}
.thread-layout > .thread-body{grid-column:1 / -1;margin-top:18px}
.thread-layout > .lead{margin:0}
.thread-photo .plate{margin:0}
.thread-photo .plate.blend .frame{aspect-ratio:1239/676}
.thread-photo .plate.blend img{--fl:9%;--fr:9%;--ft:10%;--fb:14%}
@media (max-width:880px){ .thread-layout{grid-template-columns:minmax(0,1fr);gap:20px} }

/* speaking photos keep their own shape (e.g. a landscape screen grab); a second one sits below */
.split:has(> .speak-photos){grid-template-columns:minmax(0,1fr) minmax(320px,440px);gap:48px}
.speak-photos{display:flex;flex-direction:column;gap:18px;align-self:start;min-width:0}
.speak-photos .plate .frame{aspect-ratio:auto}
.speak-photos .plate img{height:auto;display:block}
.speak-photos .plate + .plate{width:78%;align-self:flex-end;margin-top:-4px}
.split > div{min-width:0}
@media (max-width:880px){ .split:has(> .speak-photos){grid-template-columns:minmax(0,1fr);gap:28px} .speak-photos{max-width:440px} }

/* event galleries: every photo shown whole, in a gentle masonry */
.gallery{display:block;columns:3 220px;column-gap:14px}
.gallery .plate{break-inside:avoid;margin:0 0 14px}
.gallery .plate .frame{aspect-ratio:auto}
.gallery .plate img{height:auto;display:block}

/* ================= phone & tablet layout (keeps later desktop overrides from leaking onto small screens) ================= */
@media (max-width:880px){
  .hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:28px 36px}
  .hero .plate,.hero .plate.blend{justify-self:start;width:100%;max-width:340px}
  .split,.split:has(> .plate),.split:has(> .speak-photos){grid-template-columns:minmax(0,1fr);gap:28px}
  .split > .plate{max-width:320px;width:100%}
  .cta-row{gap:10px}
  .cta-row .btn,.jump .btn{padding:11px 14px;font-size:11.5px;letter-spacing:.08em}
}
@media (max-width:640px){
  .gallery{columns:2;column-gap:10px}
  .gallery .plate{margin-bottom:10px}
}

/* ---- sticky navigation (all screens) ---- */
html,body{overflow-x:clip}
.navbar{position:sticky;top:0;z-index:40;transition:background-color .25s,box-shadow .25s,border-color .25s;border-bottom:1px solid transparent}
.navbar .topbar{padding-block:14px;transition:padding .25s}
.navbar.scrolled{background:color-mix(in srgb,var(--ground) 92%,transparent);border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(28,20,48,.35)}
.navbar.scrolled .topbar{padding-block:8px}
@media (min-width:881px){
  .navbar.scrolled{-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px)}
}
/* phones and tablets: name stays at the top, the icon menu becomes a tab bar at the bottom of the screen, always in thumb reach */
@media (max-width:880px){
  .navbar{background:color-mix(in srgb,var(--ground) 94%,transparent)}
  .navbar .topbar{padding-block:12px}
  .navbar.scrolled .topbar{padding-block:8px}
  .topbar .mainnav{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;z-index:60;
    box-shadow:0 10px 30px -12px rgba(28,20,48,.45);border-radius:20px}
  .topbar .mainnav a{flex:1;justify-content:center}
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .foot{padding-bottom:8px}
}

/* ---- speed: smooth page-to-page transitions where the browser supports them; the nav stays put ---- */
a,button{touch-action:manipulation}

/* ---- photo viewer ---- */
.gallery-item{display:block;cursor:zoom-in;text-decoration:none}
.gallery-item img{transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .35s}
.gallery-item:hover img{transform:scale(1.03);filter:saturate(1.08)}
.gallery-item .frame{overflow:hidden}
.gallery-item:focus-visible{outline:2px solid var(--saffron);outline-offset:3px}
html.viewer-open{overflow:hidden}
.viewer{position:fixed;inset:0;z-index:200;background:rgba(16,11,27,.985);color:#f7f3ee;display:block;animation:fade .18s both}
.viewer[hidden]{display:none}
.viewer-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:14px;padding:calc(12px + env(safe-area-inset-top)) 16px 12px 20px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(rgba(18,12,30,.7),transparent)}
.viewer-title{color:#e9ddef}
.viewer-count{color:rgba(247,243,238,.65)}
.viewer-close{margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid rgba(247,243,238,.3);background:rgba(247,243,238,.08);color:#f7f3ee;font-size:26px;line-height:1;cursor:pointer}
.viewer-close:hover{background:rgba(247,243,238,.18)}
.viewer-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;outline:none}
.viewer-track::-webkit-scrollbar{display:none}
.viewer-slide{flex:0 0 100%;height:100%;margin:0;display:grid;place-items:center;scroll-snap-align:center;scroll-snap-stop:always;padding:64px 16px calc(24px + env(safe-area-inset-bottom))}
.viewer-slide img{max-width:100%;max-height:calc(100dvh - 110px);width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 20px 60px -20px rgba(0,0,0,.6);user-select:none;-webkit-user-drag:none}
.viewer-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:52px;height:52px;border-radius:50%;border:1px solid rgba(247,243,238,.3);background:rgba(247,243,238,.1);color:#f7f3ee;font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center}
.viewer-nav:hover{background:rgba(247,243,238,.22)}
.viewer-nav:disabled{opacity:.25;cursor:default}
.viewer-nav.prev{left:18px}.viewer-nav.next{right:18px}
.viewer.single .viewer-nav,.viewer.single .viewer-count{display:none}
@media (max-width:640px){ .viewer-nav{display:none} .viewer-slide{padding-inline:6px} }
.viewer-dl{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;background:#a8862b;color:#1c1430;text-decoration:none;font-weight:500}
.viewer-dl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.viewer-dl:hover{background:#d99c1d}
.viewer-dl:not([hidden]) + .viewer-close{margin-left:0}
.frame.zoomable{cursor:zoom-in}
.frame.zoomable img{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.frame.zoomable:hover img{transform:scale(1.02)}
.frame.zoomable:focus-visible{outline:2px solid var(--saffron);outline-offset:3px}
@media (max-width:640px){ .viewer-top{flex-wrap:nowrap} .viewer-title{display:none} .viewer-dl{padding:0 12px} }
.viewer-dl[hidden]{display:none}

.cause-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:10px}
.efforts .cause-box{margin:16px 0 6px;max-width:720px}

.grid.g1{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
/* a single wide card: counter on the left, 75 days in three calm rows on the right */
@media (min-width:900px){
  .grid.g1 .streak{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);column-gap:36px;align-items:center}
  .grid.g1 .streak-grid{margin-top:0;grid-template-columns:repeat(25,minmax(0,1fr));gap:7px}
  .grid.g1 .streak-legend{grid-column:1 / -1}
  .grid.g1 .card > p,.grid.g1 .card > .cause-box,.grid.g1 .card > .coming{max-width:860px}
}

/* ---- speed: pages show their content immediately; only the homepage headline keeps a brief rise ---- */
.page-head h1,.hero .intro,.hero .cta-row,.pin{animation:none}
.hero h1 .w{animation-duration:.35s}
a,button,.btn{-webkit-tap-highlight-color:transparent}
.btn:active,.mainnav a:active{transform:scale(.97)}

/* ---- homepage flow: thread line, start-here grid, longer about ---- */
.thread-line{max-width:40ch;margin:0 0 40px;font-size:clamp(22px,2.6vw,30px);line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.start-title{font-size:clamp(26px,3vw,36px);margin:0 0 22px;letter-spacing:-.03em}
.start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:1080px){ .start-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .start-grid{grid-template-columns:minmax(0,1fr)} }
.start-card{min-height:100%}
.start-card h3{font-size:24px;letter-spacing:-.02em;margin:8px 0 4px}
.start-card p{font-size:15.5px}
.start-card .card-foot .more{margin-top:18px}
.start-card.question h3{font-size:20px}
.start-photo{display:block;margin:-26px -26px 18px;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line)}
.start-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.start-event:hover .start-photo img{transform:scale(1.03)}
.about-long h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.03em;margin:0 0 18px}
.about-long p{font-size:18px;line-height:1.65;max-width:62ch}
.about-long p:first-of-type{font-size:21px;color:var(--ink)}

/* ---- Ideas hub: four doors ---- */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){ .doors{grid-template-columns:minmax(0,1fr)} }
.door{padding:30px;min-height:300px;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.door:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(28,20,48,.45);border-color:var(--lilac-edge,var(--line-strong))}
.door-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;margin-bottom:18px;background:var(--lilac,var(--saffron-soft));border:1px solid var(--lilac-edge,var(--line))}
.door-ico .ico{width:26px;height:26px}
.door h2{font-size:clamp(28px,3vw,38px);letter-spacing:-.03em;margin:6px 0 8px}
.door > p{color:var(--muted);margin:0 0 18px;max-width:44ch}
.door-peek{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--ground);border:1px solid var(--line)}
.door-peek:empty{display:none}
.door-peek b{font-weight:600;color:var(--ink);line-height:1.35}
.door .more{margin-top:auto;padding-top:22px}
.door-peek{margin-bottom:24px}
.door .more{padding:10px 16px}
.thread-layout > .thread-line{margin:0;max-width:26ch}
@media (max-width:880px){ .thread-layout > .thread-line{max-width:none} }
.now-reading{display:block;margin-top:6px;font-size:14px;color:var(--muted)}
.now-reading + h3{margin-top:2px}

/* the thread: photo, one line, and the growing stem with a leaf for each part of the work */
.thread-text{min-width:0}
.thread.thread-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px;padding-top:26px;border-top:1px solid var(--saffron)}
.thread.thread-mini a{display:block;padding:0;border:0;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron-text);text-decoration:none}
.thread.thread-mini a + a{padding-left:0;border-left:0}
.thread.thread-mini a::before{display:none}
.thread.thread-mini a:hover{color:var(--ink)}
.thread.thread-mini .stem{top:-22px}
@media (max-width:880px){ .thread.thread-mini{grid-template-columns:repeat(4,minmax(0,1fr))} .thread.thread-mini a{font-size:10.5px;letter-spacing:.06em} }

/* ---- events ---- */
:root{--ev-speaking:var(--saffron);--ev-acc:#8a3f2a;--ev-running:#3f7a5a;--ev-other:var(--lilac-ink,#57397e)}
.evlist{list-style:none;margin:0;padding:0}
.ev{display:grid;grid-template-columns:88px minmax(0,1fr);gap:22px;padding:22px 0;border-top:1px solid var(--line)}
.ev:first-child{border-top:0;padding-top:4px}
.ev-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:88px;height:88px;border-radius:14px;background:var(--plate);border:1px solid var(--line)}
.ev-date b{font-size:32px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.ev-date span{margin-top:6px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ev-cat{display:inline-flex;align-items:center;gap:9px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ev-cat i,.chip i{width:9px;height:9px;border-radius:50%;background:var(--ev-other);flex:none;display:inline-block}
.ev-speaking .ev-cat i,.chip .dot-speaking{background:var(--ev-speaking)}
.ev-african-cinema-classics .ev-cat i,.chip .dot-african-cinema-classics{background:var(--ev-acc)}
.ev-running .ev-cat i,.chip .dot-running{background:var(--ev-running)}
.ev h3{font-size:22px;margin:8px 0 4px;letter-spacing:-.02em}
.ev h3 a{text-decoration:none;color:inherit}
.ev h3 a:hover{color:var(--saffron-text)}
.ev p{margin:0;color:var(--muted)}
.ev-loc{white-space:nowrap}
.evlist.past .ev-date{background:transparent}
.evlist.past .ev h3{font-size:19px}
.evlist.compact .ev{grid-template-columns:64px minmax(0,1fr);gap:16px;padding:14px 0}
.evlist.compact .ev-date{width:64px;height:64px;border-radius:12px}
.evlist.compact .ev-date b{font-size:24px}
.evlist.compact .ev-date span{font-size:9.5px;margin-top:4px}
.evlist.compact .ev h3{font-size:18px}
.speak-upcoming{margin:0 0 30px;padding:20px 22px;border-radius:14px;background:var(--plate);border:1px solid var(--line)}
.speak-upcoming .cause-link{display:inline-block;margin-top:8px}
.ev-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.chip.active{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.ev[hidden]{display:none}
@media (max-width:640px){ .ev{grid-template-columns:64px minmax(0,1fr);gap:14px} .ev-date{width:64px;height:64px} .ev-date b{font-size:24px} .ev-date span{font-size:9.5px} .ev h3{font-size:19px} }
.events-strip{flex-direction:row;align-items:center;gap:22px;margin-top:18px;padding:24px 28px}
.events-strip .door-ico{margin:0;flex:none}
.events-strip > div{flex:1;min-width:0}
.events-strip h3{margin:4px 0 2px;font-size:24px}
.events-strip .more{margin:0;padding:0;flex:none}
@media (max-width:640px){ .events-strip{flex-direction:column;align-items:flex-start} }

/* ---- phones: portrait sits beside the intro, and the words wrap around it ---- */
.hero-photo-m{display:none}
@media (max-width:880px){
  .hero > .plate{display:none}
  .hero-photo-m{display:block;float:right;width:42%;max-width:220px;aspect-ratio:886/1002;object-fit:cover;margin:4px 0 10px 16px;border-radius:4px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 92%,transparent),linear-gradient(to bottom,transparent 0,#000 6%,#000 85%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 92%,transparent),linear-gradient(to bottom,transparent 0,#000 6%,#000 85%,transparent);mask-composite:intersect}
  .hero .intro{font-size:16.5px;line-height:1.55}
  .hero .pin{clear:both}
}

/* six items in the menu */
@media (max-width:880px){ .topbar .mainnav a{padding:9px 2px;font-size:9px;letter-spacing:.03em} }
@media (min-width:881px) and (max-width:1180px){ .topbar .mainnav a{padding:9px 11px 9px 9px;font-size:11.5px} }

.tagline{margin:18px 0 0;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--saffron-text)}
@media (max-width:880px){ .tagline{font-size:11px;letter-spacing:.08em;margin:0 0 18px;grid-column:1 / -1} }
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1080px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.stats li{padding:22px 22px 24px;border-radius:14px;background:var(--plate);border:1px solid var(--line)}
.stats b{display:block;font-size:clamp(34px,3.6vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--saffron-display)}
.stats span{display:block;margin-top:10px;color:var(--muted);font-size:15px;line-height:1.45}
@media (max-width:880px){ .tagline{margin:12px 0 22px;font-size:10px;letter-spacing:.05em} }

/* "The thread" label: the growing stem replaces the straight rule */
.sec-grid > .label.thread-label::after{display:none}
.thread.label-stem{flex:1;display:block;height:30px;margin:0;padding:0;border:0;min-width:80px}
.thread.label-stem .stem{top:-7px}

/* ---- "Say hello": the main call to action, always in the sticky top bar ---- */
.topbar{flex-wrap:nowrap}
.topbar .mainnav{margin-left:auto}
.hello-btn{display:inline-flex;align-items:center;gap:8px;flex:none;padding:11px 18px 11px 15px;border-radius:999px;background:var(--saffron);color:var(--on-gold,#1c1430);text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;box-shadow:0 6px 18px -10px rgba(154,102,6,.7);transition:transform .2s,background .2s}
.hello-btn:hover{background:#d99c1d;transform:translateY(-1px)}
.hello-btn.active{background:var(--ink);color:var(--ground)}
.hello-btn .ico{width:18px;height:18px}
.hello-btn .ico .s,.hello-btn .ico .g-s{stroke:currentColor}
@media (max-width:1180px) and (min-width:881px){ .brand .name{font-size:15px;letter-spacing:.05em} .hello-btn{padding:10px 14px 10px 12px;font-size:11.5px} .topbar{gap:12px} }
@media (max-width:880px){
  .hello-btn{padding:9px 14px 9px 12px;font-size:11px;letter-spacing:.08em;margin-left:auto}
  .hello-btn .ico{width:16px;height:16px}
  .topbar .mainnav a{font-size:9.5px;letter-spacing:.05em}
}
@media (max-width:360px){ .hello-btn span{display:none} .hello-btn{padding:10px} }
.topbar .mainnav{flex-wrap:nowrap}
.brand .name{white-space:nowrap}
@media (max-width:1100px) and (min-width:881px){ .brand .name{display:none} }
@media (max-width:880px){
  .navbar .topbar{padding-block:10px}
  .brand{gap:10px}
  .brand .name{font-size:14px;letter-spacing:.05em}
  .brand .mono{width:34px;height:34px;font-size:13px}
}
@media (max-width:390px){ .hello-btn{padding:8px 11px 8px 10px;font-size:10.5px;gap:6px} .brand .name{font-size:13px;letter-spacing:.03em} }

.longform-note{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 22px;margin:0 0 36px;padding:18px 22px;border-left:3px solid var(--saffron)}
.longform-note .label{flex-basis:100%}
.longform-note p{flex:1;min-width:240px;margin:0;color:var(--ink)}
.longform-note .more{margin:0;padding:0}
a.card.longform-note::after{display:none}
.longform-note .more{padding:9px 16px}

/* landing hero: name first, then a plain statement of what I do */
.hero > div:first-child > .label,.hero-hi > .label{font-family:inherit;font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.hero h1{font-size:clamp(40px,5.6vw,78px);line-height:1;max-width:15ch}
.hero h1 .w{white-space:normal}
@media (max-width:880px){ .hero > div:first-child > .label,.hero-hi > .label{font-size:19px} .hero h1{font-size:clamp(36px,10vw,52px);max-width:none} }

/* headline-only hero: on phones the portrait sits beside the headline */
@media (max-width:880px){ .hero-photo-m{margin-top:0} }
@media (max-width:880px){ .hero-photo-m{width:38%;margin:6px 0 8px 14px} .hero .tagline{clear:both;padding-top:4px} }
@media (max-width:880px){ .hero .pin{margin-top:4px} .hero .tagline{margin-bottom:14px} }

/* ---- one band: the motto, the capitals threaded on a gold line, and the thread statement ---- */
.thread-band{position:relative;z-index:1;padding:0 0 72px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lilac,#e9ddef) 55%,transparent),color-mix(in srgb,var(--lilac,#e9ddef) 22%,transparent) 70%,transparent)}
.thread-band .motto{border-top:0;background:transparent}
.thread-band .motto-track{padding-block:26px 6px}
.ticker.on-thread{border:0;background:transparent;position:relative}
.ticker.on-thread::before{content:"";position:absolute;left:0;right:0;top:50%;height:16px;margin-top:-8px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'%3E%3Cpath d='M0 8 C40 1 80 1 120 8 S200 15 240 8' fill='none' stroke='%23a8862b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center/240px 16px;opacity:.9}
.ticker.on-thread .track{position:relative;padding-block:18px}
.ticker.on-thread span{position:relative;padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--ground) 92%,var(--lilac,#e9ddef));border:1px solid color-mix(in srgb,var(--saffron) 35%,transparent);color:var(--ink)}
.ticker.on-thread span::before{background:var(--saffron);box-shadow:0 0 0 3px color-mix(in srgb,var(--saffron) 22%,transparent)}
.thread-band .wrap{margin-top:40px}
.thread-band .thread-text .label{display:block;margin-bottom:14px}
@media (max-width:880px){ .thread-band{padding-bottom:48px} .thread-band .wrap{margin-top:24px} }

/* thread band: its own heading at the top */
.thread-band{padding-top:44px;border-top:1px solid color-mix(in srgb,var(--lilac-edge,#c9b3d8) 60%,transparent)}
.thread-band .thread-head{margin-bottom:4px}
.thread-band .motto-track{padding-top:10px}
/* start here: a warm, distinct band */
.start-band{position:relative;border-top:0}
.start-band::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;
  background:linear-gradient(180deg,#eee8f1,#f1ecf4 60%,var(--ground));border-top:1px solid color-mix(in srgb,var(--saffron) 22%,transparent)}
.start-band .start-card{background:#fdfbfe}
@media (max-width:880px){ .thread-band{padding-top:30px} }

/* the line beside "The thread" is a thread too: two twisted strands */
.thread-head > .label::after{height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M0 7 C15 1 45 1 60 7 S105 13 120 7' fill='none' stroke='%23a8862b' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M0 7 C15 13 45 13 60 7 S105 1 120 7' fill='none' stroke='%23a8862b' stroke-opacity='.45' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center/120px 14px;
  -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
.ticker.on-thread::before{height:14px;margin-top:-7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14'%3E%3Cpath d='M0 7 C30 1 90 1 120 7 S210 13 240 7' fill='none' stroke='%23a8862b' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M0 7 C30 13 90 13 120 7 S210 1 240 7' fill='none' stroke='%23a8862b' stroke-opacity='.45' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center/240px 14px}
.hero h1{font-size:clamp(38px,4.6vw,66px);max-width:21ch;line-height:1.02}
@media (max-width:880px){ .hero h1{font-size:clamp(32px,8.6vw,46px);max-width:none} }
.hero h1{font-size:clamp(36px,3.9vw,58px);max-width:none}
@media (max-width:880px){ .hero h1{font-size:clamp(32px,8.6vw,46px)} }
.about-long p{max-width:68ch}
@media (min-width:1000px){
  #about .about-long{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:56px;align-items:start}
  #about .about-long p{max-width:none;margin-top:0}
  #about .about-long p:first-of-type{grid-row:1 / span 3}
  #about .about-long .cta-row{grid-column:1 / -1}
}
#about .about-long{max-width:none;width:100%}
/* thread band: a clear start and end so About reads as its own section */
.thread-band{background:color-mix(in srgb,var(--lilac,#e9ddef) 42%,var(--ground));border-bottom:1px solid color-mix(in srgb,var(--lilac-edge,#c9b3d8) 60%,transparent);padding-bottom:64px}
#about{position:relative;border-top:0;padding-top:72px}
#about::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:var(--ground)}
.about-long p,.about-long p:first-of-type{font-size:18px;line-height:1.7;color:var(--ink);max-width:66ch}
body.page-about .page-head{padding-bottom:18px}

/* footer: app icons */
footer.foot .links{display:inline-flex;align-items:center;gap:22px}
.socials{display:inline-flex;align-items:center;gap:10px}
.socials .soc{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);color:var(--ink);transition:background .2s,color .2s,border-color .2s,transform .2s}
.socials .soc svg{width:18px;height:18px}
.socials .soc:hover{background:var(--saffron);border-color:var(--saffron);color:#1c1430;transform:translateY(-1px)}

/* page heads: the intro lines up with the top of the headline on every page */
@media (min-width:900px){
  body:not(.quiet) .page-head{align-items:start}
  body:not(.quiet) .page-head > p{margin:.55em 0 0;align-self:start}
  body:not(.quiet) .page-head > h1{align-self:start}
}
.ledger .press{max-width:680px}
.ledger .press-list{grid-template-columns:minmax(0,1fr)}
.ledger .press-list li{min-width:0}
.ledger .press-list a{flex-direction:column;width:100%}
.ledger .press-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ledger .press-list li{display:block;padding:0;border:0}

/* card with its own outside link: whole card opens the project, the product button opens the product site */
.card.has-cta{position:relative}
.card.has-cta .card-main{color:inherit;text-decoration:none}
.card.has-cta .card-main::after{content:"";position:absolute;inset:0;z-index:1}
.card.has-cta:hover{border-color:var(--saffron)}
.card-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:22px}
.card-actions .more{margin:0;padding:0}
.card-actions .product-link{position:relative;z-index:2}
.card.has-cta .card-actions .more{padding:10px 16px;margin:0}
.card-actions .product-link{border-radius:999px;padding:9px 16px;font-size:12px}
.role-link{display:inline-flex;margin-top:4px}
.role-link{border-radius:999px;padding:9px 16px;font-size:12px;margin-top:8px}
.ledger-note{margin:22px 0 0 182px;max-width:680px;font-size:15.5px;color:var(--muted);font-style:italic}
.ledger-note a{font-style:normal;white-space:nowrap}
@media (max-width:760px){ .ledger-note{margin-left:0} }
.ledger-note{margin-left:134px}
@media (max-width:760px){ .ledger-note{margin-left:0} }

/* thread band: bolder statement, tighter photo */
.thread-band .thread-line{font-size:clamp(26px,3vw,40px);font-weight:600;line-height:1.2;letter-spacing:-.02em;max-width:22ch;color:var(--ink)}
.thread-band .thread-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px 64px}
.thread-photo .plate.blend .frame{aspect-ratio:16/8}
.thread-photo .plate.blend img{object-fit:cover;object-position:50% 40%}
/* experience entries: short paragraphs */
.ledger p + p{margin-top:10px}
@media (max-width:880px){ .thread-band .thread-layout{grid-template-columns:minmax(0,1fr);gap:20px} .thread-band .thread-line{font-size:24px;max-width:none} .thread-photo .plate.blend .frame{aspect-ratio:16/9} }

.nownext.single{grid-template-columns:minmax(0,1fr)}
.nn.ongoing{padding:26px 28px;position:relative;overflow:hidden}
.nn.ongoing b{font-size:clamp(22px,2.2vw,28px);max-width:30ch}
.nn.ongoing p{max-width:62ch;font-size:16.5px;line-height:1.6}
.nn.ongoing .loop{display:inline-block;margin-right:4px;animation:spin 6s linear infinite}
.nn.ongoing::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--saffron) 45%,transparent);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .nn.ongoing .loop,.nn.ongoing::after{animation:none} }
.nn.ongoing b{line-height:1.2;margin:12px 0 10px}
.nn.ongoing .loop{font-size:15px;vertical-align:-1px}

/* experience: proof sits to the right of each role on wide screens */
@media (min-width:1100px){
  .ledger li{grid-template-columns:110px minmax(0,1fr) minmax(280px,380px);column-gap:40px}
  .ledger-side{padding-top:4px}
}
.ledger-side{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.ledger-side .press{margin:0;width:100%;max-width:none}
.ledger-side .press-list{margin:0}
@media (max-width:1099px) and (min-width:641px){ .ledger-side{grid-column:2;margin-top:4px} }
@media (max-width:640px){ .ledger-side{margin-top:10px} }
@media (min-width:1100px){ .ledger-note{margin-left:150px} }

.h1-sub{display:block;margin-top:.35em;font-size:.36em;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--muted)}
.h3-sub{display:block;margin-top:4px;font-size:.6em;font-weight:500;letter-spacing:0;line-height:1.3;color:var(--muted)}

.cover-note{margin:-6px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);font-style:italic}

.card-head.has-thumb{display:grid;grid-template-columns:84px 1fr;gap:18px;align-items:start}
.card-thumb{width:84px;aspect-ratio:4/5;height:auto;object-fit:cover;border-radius:3px;border:1px solid var(--line-strong);box-shadow:0 6px 16px -8px rgba(20,16,50,.45);display:block}
.card-head.has-thumb h3{font-size:26px}
@media (max-width:480px){.card-head.has-thumb{grid-template-columns:68px 1fr;gap:14px}.card-thumb{width:68px}}

/* phones: small round portrait beside the greeting, headline gets the full width */
@media (max-width:880px){
  .hero-hi{display:flex;align-items:center;gap:14px;margin-bottom:6px}
  .hero-hi .label{margin:0}
  .hero-photo-m,.hero-photo-m{float:none;width:64px;max-width:none;height:64px;aspect-ratio:1;margin:0;border-radius:50%;object-position:50% 50%;
    -webkit-mask-image:none;mask-image:none;border:2px solid var(--saffron);box-shadow:0 6px 16px -8px rgba(20,16,50,.5);flex:none}
}

.email-strip{flex-direction:row;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.email-strip h3{margin:6px 0 6px}
.email-strip .cta-row{margin:0}
.book-head{margin-top:44px}
.book-head h3{font-size:28px;margin:6px 0 6px}
.book-head .muted{margin:0}
.book-head + .calendly{margin-top:18px}
.cal-fallback{display:inline-block;margin-top:12px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--saffron-text);text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.email-strip{flex-direction:column;align-items:flex-start}.calendly iframe{height:900px}}

/* ---- first-visit loading screen (home only, once per session) ---- */
#splash{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:var(--ground);
  background:radial-gradient(120% 70% at 85% 0%,color-mix(in srgb,var(--lilac,#e9ddef) 95%,transparent),transparent 60%),radial-gradient(110% 60% at 0% 100%,color-mix(in srgb,var(--saffron) 22%,transparent),transparent 65%),color-mix(in srgb,var(--lilac,#e9ddef) 45%,var(--ground));transition:opacity .4s ease,visibility .4s;}
#splash.out{opacity:0;visibility:hidden}
@keyframes splash-auto{to{opacity:0;visibility:hidden}}
.splash-in{display:flex;flex-direction:column;align-items:center;gap:18px;animation:fade .35s both}
.splash-ring{position:relative;width:104px;height:104px;border-radius:50%;padding:4px;display:block;
  background:conic-gradient(from 0deg,var(--saffron),color-mix(in srgb,var(--saffron) 25%,transparent) 70%,var(--saffron));animation:spin 1.6s linear infinite}
.splash-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:3px solid var(--ground);animation:spin 1.6s linear infinite reverse}
.splash-jb{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:22px;letter-spacing:.06em;color:var(--ink)}

/* ---- performance: no per-card background blur; lighter fixed menu on phones; pause off-screen motion ---- */
.card{backdrop-filter:none}
@media (max-width:880px){ .mainnav,.navbar.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none} .mainnav{background:color-mix(in srgb,var(--plate-solid) 96%,transparent)} }
.ticker .track,.motto-track{will-change:transform}
.offscreen .track,.offscreen .motto-track,.offscreen.ticker .track{animation-play-state:paused}
/* (no content-visibility on .start-band: it clipped the full-width background) */

/* ---- page loads: no upward slide, just a quick fade so the top of the page is there straight away ---- */
.hero h1 .w,.page-head h1{animation:none}
.hero .intro,.hero .cta-row,.pin{animation:fade .15s both}

/* ---- light / dark toggle ---- */
.theme-btn{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0;
  border:1px solid var(--line-strong);background:color-mix(in srgb,var(--plate-solid) 70%,transparent);color:var(--ink);transition:border-color .2s,background .2s}
.theme-btn:hover{border-color:var(--saffron)}
.theme-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
.topbar .theme-btn{margin-left:auto;margin-right:-6px}
@media (min-width:881px){ .topbar .theme-btn{margin-left:0;margin-right:0} }
@media (max-width:880px){ .theme-btn{width:36px;height:36px} .theme-btn svg{width:17px;height:17px} .topbar .hello-btn{margin-left:0} .topbar{gap:10px} }

/* ---- dark theme fixes for light-only sections ---- */
:root[data-palette="indigo"] .thread-band{background:var(--ground-2);border-color:var(--line)}
:root[data-palette="indigo"] .thread-band{border-top-color:var(--line)}
:root[data-palette="indigo"] .start-band::before{background:color-mix(in srgb,var(--saffron) 5%,var(--ground));border-top-color:color-mix(in srgb,var(--saffron) 30%,transparent)}
:root[data-palette="indigo"] .start-band .start-card{background:var(--plate-solid)}
:root[data-palette="indigo"] #splash{background:radial-gradient(110% 60% at 0% 100%,color-mix(in srgb,var(--saffron) 18%,transparent),transparent 65%),var(--ground)}
:root[data-palette="indigo"] .theme-btn{background:color-mix(in srgb,var(--plate-solid) 80%,transparent)}
/* phones: more breathing room between the theme toggle and Say hello, to avoid mis-taps */
@media (max-width:880px){ .topbar .theme-btn{margin-right:8px} .topbar{gap:8px} }
@media (max-width:390px){ .topbar .theme-btn{margin-right:6px;width:34px;height:34px} }

/* ---- photo zoom ---- */
.viewer-slide img{transition:transform .25s ease;touch-action:manipulation;cursor:zoom-in}
.viewer.zoomed .viewer-slide img{cursor:grab}
.viewer-slide img.panning{transition:none;cursor:grabbing}
.viewer.zoomed .viewer-track{overflow:hidden;touch-action:none}
.viewer.zoomed .viewer-nav{opacity:.25;pointer-events:none}
.viewer-slide{overflow:hidden}
.plate img,.start-photo img,.hero-photo-m{touch-action:manipulation}

/* phones: keep the footer clear of the floating menu bar, even when the browser toolbar resizes */
@media (max-width:880px){
  body{padding-bottom:calc(118px + env(safe-area-inset-bottom))}
  footer.foot{padding-bottom:28px}
}
/* taps register immediately (no double-tap-zoom delay) on all controls */
button,.btn,a,.theme-btn,.chip,.car-btn{touch-action:manipulation}
.theme-btn{position:relative;z-index:3;-webkit-tap-highlight-color:transparent}
.theme-btn svg{pointer-events:none}

/* viewer: vertical drags go to the drag-to-close gesture; sideways still swipes between photos */
.viewer:not(.zoomed) .viewer-track{touch-action:pan-x pan-y}
.viewer-slide img{user-select:none;-webkit-user-drag:none}

/* phones: menu bar labels always full strength; page content (not the menu bar) slides during a swipe */
@media (max-width:880px){
  .topbar .mainnav a{color:var(--ink);opacity:1}
  .topbar .mainnav a .ico{opacity:1}
  .page > :not(.navbar){transform:var(--swipe-t,none)}
  .page.swipe-anim > :not(.navbar){transition:transform .18s ease}
}

/* ---- phones: the section bar lives on its own layer at the bottom (outside the page), so nothing scrolling past can dim it ---- */
.tabbar{display:none}
@media (max-width:880px){
  .topbar .mainnav{display:none}
  .tabbar{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:90;
    gap:4px;padding:5px;border-radius:20px;border:1px solid var(--line-strong);background:var(--plate-solid);
    box-shadow:0 10px 30px -12px rgba(28,20,48,.45);transform:translateZ(0);isolation:isolate;touch-action:none;-webkit-user-select:none;user-select:none}
  :root[data-palette="lilac"] .tabbar{background:var(--lilac);border-color:var(--lilac-edge)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:9px 2px;border-radius:13px;
    font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:var(--ink);
    -webkit-tap-highlight-color:transparent;transition:background .15s,color .15s}
  .tabbar .ico{width:20px;height:20px;pointer-events:none}
  .tabbar span{pointer-events:none}
  .tabbar a.active,.tabbar.scrubbing a.scrub{background:var(--ink);color:var(--ground)}
  .tabbar a.active .ico .s,.tabbar.scrubbing a.scrub .ico .s{stroke:var(--ground)}
  .tabbar.scrubbing a.active:not(.scrub){background:transparent;color:var(--ink)}
  .tabbar.scrubbing a.active:not(.scrub) .ico .s{stroke:currentColor}
  .tabbar.scrubbing a.scrub{transform:translateY(-2px) scale(1.04)}
}
@media (max-width:390px){ .tabbar a{font-size:8.5px} }

/* =====================================================================
   EDITORIAL LAYER (light pass): serif headlines, no monospace caps,
   fewer pills and arrow-circles, quieter decoration.
   To undo: delete everything from here to the end marker.
   ===================================================================== */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-italic.woff2) format("woff2")}
:root{--serif:"Newsreader",Georgia,"Times New Roman",serif;--sans:"Bricolage Grotesque",system-ui,sans-serif}

/* headlines: a literary serif, normal tracking */
h1,h2,h3,.page-head h1,.hero h1,.thread-band .thread-line,.motto-track span,.book h3,.start-card h3{font-family:var(--serif);font-weight:500;letter-spacing:-.012em}
.page-head h1{font-size:clamp(44px,6.6vw,80px);line-height:1.02;letter-spacing:-.02em}
.hero h1{font-weight:500;letter-spacing:-.02em;line-height:1.04}
.hero h1 .w.hl{font-style:italic;font-weight:500}
.h1-sub,.h3-sub{font-family:var(--serif);font-style:italic;font-weight:400}
.card h3,.start-card h3{font-weight:600;letter-spacing:-.005em}
.thread-band .thread-line{font-weight:400;font-style:normal}
.motto-track span{font-weight:500;font-style:italic}

/* no monospace capitals anywhere: plain sentence case */
.addr,.back,.cal-fallback,.card .more,.card .sub,.cause-link,.chip,.coord,.efforts .yrs,.entries .when,.ev-cat,.ev-date span,.excerpt cite,.hello-btn,.j-dot,.journey b em,.label,.ledger .role,.ledger .yrs,.log .when,.meta dt,.now-list .kind,.now-list .where,.now-mini span,.post-meta,.press-count,.press-from,.ring-num span,.soon em,.stage-label,.stat span,.streak-facts dt,.streak-grid span,.streak-legend,.tabbar a,.tag,.tagline,.thread .go,.thread.thread-mini a,.ticker span,.topbar .mainnav a,.topbar nav a,.viewer-top,.btn,footer.foot,.pin,.splash-jb,.more{font-family:var(--sans);text-transform:none;letter-spacing:0}
.label{font-family:var(--serif);font-style:italic;font-size:16px;font-weight:500;letter-spacing:0;color:var(--saffron-text)}
.coord,.when,.stage-label,.meta dt,.ev-cat,.press-from,.press-count{font-size:13.5px}
.tagline{font-family:var(--serif);font-style:italic;font-size:18px;letter-spacing:0}
.brand .name{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.005em}
.btn{font-size:14px;font-weight:600;border-radius:4px}
.hello-btn{font-size:14px;font-weight:600;border-radius:6px}
.ticker span{font-size:13.5px}
.splash-jb{font-family:var(--serif);letter-spacing:.02em}

/* tags: plain coloured text, not pills */
.tag,.tag.sky,:root[data-palette="lilac"] .tag,:root[data-palette="lilac"] .tag.sky{background:none;box-shadow:none;border:0;padding:0;font-size:13px;font-weight:600;color:var(--saffron-text)}
.tag.sky,:root[data-palette="lilac"] .tag.sky{color:var(--lilac-ink,var(--muted))}

/* cards: no arrow-in-a-circle; "See progress" becomes an underlined text link */
a.card::after{display:none !important}
a.card h3{padding-right:0}
.card .more,:root[data-palette="lilac"] .card .more,.card.has-cta .card-actions .more{background:none !important;color:var(--ink) !important;padding:0 !important;border-radius:0;
  font-size:14.5px;font-weight:600;text-decoration:underline;text-decoration-color:var(--saffron);text-decoration-thickness:2px;text-underline-offset:5px}
a.card:hover .more{background:none !important;color:var(--saffron-text) !important}
.door .more{padding:0 !important}
.product-link{border-radius:4px}
.chip{border-radius:4px}

/* desktop menu: plain words, no pill, no icons; a gold underline marks where you are */
@media (min-width:881px){
  .topbar .mainnav,:root[data-palette="lilac"] .topbar .mainnav{background:none;border:0;padding:0;gap:6px;backdrop-filter:none;box-shadow:none}
  .topbar .mainnav .ico{display:none}
  .topbar .mainnav a,.topbar .mainnav a:hover{background:none !important;padding:8px 12px;font-size:15px;color:var(--muted);border-radius:0}
  .topbar .mainnav a:hover{color:var(--ink)}
  .topbar .mainnav a.active{background:none !important;color:var(--ink);box-shadow:inset 0 -2px 0 var(--saffron)}
}
/* phone section bar keeps its icons, labels in plain case */
.tabbar a{font-size:10.5px;letter-spacing:0}
.card .sub,.ledger .role,.post-meta,.log .when,.entries .when{font-size:13.5px}
footer.foot{font-size:13.5px}
.hero > div:first-child > .label,.hero-hi > .label{font-family:var(--sans);font-style:normal;font-weight:600;color:var(--ink)}
.topbar .mainnav a{text-transform:none;letter-spacing:0}
.brand .name{text-transform:none !important;letter-spacing:-.005em !important}
.product-link,.btn.product-link,.role-link{border-radius:4px !important}
/* ===================== END EDITORIAL LAYER ===================== */

/* ongoing projects: the route keeps going past the last stage, so it never reads as finished */
.route.ongoing{margin-right:34px}
.route.ongoing::after{content:"";position:absolute;top:50%;right:-34px;width:30px;height:0;border-top:2px dashed var(--saffron);transform:translateY(-50%);opacity:.8}
.route.ongoing i:last-child::after{content:"";position:absolute;right:-40px;top:50%;width:7px;height:7px;border-top:2px solid var(--saffron);border-right:2px solid var(--saffron);transform:translateY(-50%) rotate(45deg)}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3f9a5e;margin-right:7px;vertical-align:1px;box-shadow:0 0 0 0 rgba(63,154,94,.5);animation:live 2.2s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(63,154,94,.45)}80%,100%{box-shadow:0 0 0 7px rgba(63,154,94,0)}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* "Start here": three doors, one per audience */
.start-grid.doors-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.door-card{min-height:0;padding:30px 28px}
.door-card h3{font-size:27px;margin:12px 0 10px;line-height:1.12}
.door-card p{font-size:16px;line-height:1.6;margin:0 0 22px}
.door-card .more{margin-top:auto}
@media (max-width:880px){ .start-grid.doors-3{grid-template-columns:1fr} }

.places-caption{margin:12px 0 0;font-family:var(--serif,Georgia,serif);font-style:italic;font-size:15.5px;color:var(--muted)}
.start-band .sec-grid > .label:empty{display:none}
.start-band .sec-grid{grid-template-columns:1fr}
.hero .intro{max-width:46ch}

.start-grid.doors-4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:880px){ .start-grid.doors-4{grid-template-columns:1fr} }

/* =====================================================================
   PLUM-LED BRAND: plum carries the main actions, gold is the accent
   (thread, underlines, rings, highlights). To undo: delete this block.
   ===================================================================== */
:root{--lead:#2c1a3e;--on-lead:#f6f3f7;--lead-hover:#41285a}
:root[data-palette="indigo"]{--lead:#e6d8f0;--on-lead:#1a1320;--lead-hover:#f2e9f8}
.btn.solid,.hello-btn{background:var(--lead) !important;border-color:var(--lead) !important;color:var(--on-lead) !important}
.btn.solid:hover,.hello-btn:hover{background:var(--lead-hover) !important;border-color:var(--lead-hover) !important}
.hello-btn .ico .s,.hello-btn .ico .g-s{stroke:currentColor !important}
.hello-btn .ico .g,.hello-btn .ico .g-f{fill:var(--saffron) !important}
.brand:hover .mono{background:var(--lead-hover);color:var(--on-lead)}
.cause-badge{background:var(--lead)}
.cause-badge svg,.cause-badge *{color:var(--on-lead)}
.socials .soc:hover{background:var(--lead);border-color:var(--lead);color:var(--on-lead)}
.car-btn:hover{background:var(--lead);border-color:var(--lead);color:var(--on-lead)}
.back:hover .arr{background:var(--lead);color:var(--on-lead)}
/* ===================== END PLUM-LED BRAND ===================== */



/* =====================================================================
   START PANELS: flat, borderless panels in alternating tints, big serif
   titles and a plain arrow. One continuous thread runs across the top.
   ===================================================================== */
.door-panels{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:34px;border-radius:2px;overflow:visible}
.door-panel{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;min-height:250px;padding:44px 96px 40px 40px;
  text-decoration:none;color:var(--ink);background:var(--bgp);transition:background .25s ease}
.dp-1{--bgp:color-mix(in srgb,var(--lilac,#e9ddef) 70%,var(--ground))}
.dp-2{--bgp:color-mix(in srgb,#ffffff 70%,var(--ground))}
.dp-3{--bgp:color-mix(in srgb,#ffffff 40%,var(--ground))}
.dp-4{--bgp:var(--lead,#2c1a3e);color:var(--on-lead,#f6f3f7)}
.door-panel:hover{background:color-mix(in srgb,var(--bgp) 88%,var(--ink))}
.dp-4:hover{background:color-mix(in srgb,var(--bgp) 88%,#000)}
.dp-label{font-family:var(--serif,Georgia,serif);font-style:italic;font-size:16px;color:var(--saffron-text)}
.dp-4 .dp-label{color:var(--saffron)}
.dp-title{font-family:var(--serif,Georgia,serif);font-weight:500;font-size:clamp(30px,3vw,42px);line-height:1.06;letter-spacing:-.018em;max-width:15ch}
.dp-line{font-size:15.5px;line-height:1.55;color:var(--muted);max-width:40ch}
.dp-4 .dp-line{color:color-mix(in srgb,var(--on-lead,#f6f3f7) 78%,transparent)}
.dp-arrow{position:absolute;right:36px;top:44px;font-size:30px;line-height:1;transition:transform .25s ease;color:currentColor}
.door-panel:hover .dp-arrow,.door-panel:focus-visible .dp-arrow{transform:translateX(8px)}
:root[data-palette="indigo"] .dp-1{--bgp:color-mix(in srgb,#3a2a4e 60%,var(--ground))}
:root[data-palette="indigo"] .dp-2{--bgp:var(--plate-solid)}
:root[data-palette="indigo"] .dp-3{--bgp:color-mix(in srgb,var(--plate-solid) 60%,var(--ground))}
:root[data-palette="indigo"] .door-panel:hover{background:color-mix(in srgb,var(--bgp) 85%,#fff)}
@media (max-width:760px){
  .door-panels{grid-template-columns:1fr}
  .door-panel{min-height:0;padding:30px 70px 28px 22px}
  .dp-arrow{right:22px;top:30px;font-size:26px}
  .dp-title{font-size:28px}
}
@media (prefers-reduced-motion:reduce){ .dp-arrow,.door-panel{transition:none} }
:root[data-palette="indigo"] .dp-4 .dp-label{color:#6e5517}
/* ===================== END START PANELS ===================== */

.start-intro{margin:10px 0 0;font-size:18px;line-height:1.5;color:var(--muted);max-width:52ch}
.start-intro + .door-panels{margin-top:30px}
/* "Start here" band: its own colour, distinct from the lilac thread band */
.start-band::before{background:color-mix(in srgb,#f1eee6 50%,var(--ground)) !important;border-top:1px solid color-mix(in srgb,var(--saffron) 28%,transparent) !important}
:root[data-palette="indigo"] .start-band::before{background:color-mix(in srgb,#130e18 55%,var(--ground)) !important}
.dp-2{--bgp:#e7e3ea}
@media (max-width:760px){ .motto-track span{font-size:23px} .motto span::after{margin-inline:20px;width:9px;height:9px} }

/* =====================================================================
   SECTION BAR (phones): frosted glass bar with one gliding pill.
   ===================================================================== */
@media (max-width:880px){
  .tabbar{background:color-mix(in srgb,var(--plate-solid) 84%,transparent) !important;
    -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
    border:1px solid color-mix(in srgb,var(--ink) 10%,transparent) !important;border-radius:24px;padding:5px;
    box-shadow:0 12px 32px -14px rgba(28,20,48,.5),inset 0 1px 0 rgba(255,255,255,.45)}
  :root[data-palette="indigo"] .tabbar{box-shadow:0 12px 32px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08)}
  .tab-pill{position:absolute;left:0;top:5px;bottom:5px;width:60px;border-radius:19px;z-index:0;pointer-events:none;
    background:var(--lead,#2c1a3e);box-shadow:0 4px 14px -6px rgba(28,20,48,.55),inset 0 1px 0 rgba(255,255,255,.14);
    will-change:transform,width;opacity:0;transition:opacity .2s}
  .tab-pill.glide{transition:transform .42s cubic-bezier(.25,1.35,.45,1),width .42s cubic-bezier(.25,1.35,.45,1),opacity .2s}
  .tabbar.held .tab-pill{transform-origin:center}
  .tabbar a{position:relative;z-index:1;background:transparent !important;border-radius:19px;transition:color .25s ease}
  .tabbar a .ico{transition:transform .3s cubic-bezier(.25,1.35,.45,1)}
  .tabbar a.lit{color:var(--on-lead,#f6f3f7) !important}
  .tabbar a.lit .ico .s{stroke:var(--on-lead,#f6f3f7) !important}
  .tabbar a.lit .ico{transform:translateY(-1px) scale(1.06)}
  .tabbar a.active:not(.lit){color:var(--ink) !important}
  .tabbar a.active:not(.lit) .ico .s{stroke:currentColor !important}
  .tabbar.scrubbing a.scrub{transform:none}
}
/* ===================== END SECTION BAR ===================== */

/* section bar: real glass (more see-through, stronger blur, light sheen) */
@media (max-width:880px){
  .tabbar{background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.14)),color-mix(in srgb,var(--plate-solid) 46%,transparent) !important;
    -webkit-backdrop-filter:blur(26px) saturate(1.9) brightness(1.04);backdrop-filter:blur(26px) saturate(1.9) brightness(1.04);
    border:1px solid rgba(255,255,255,.55) !important;
    box-shadow:0 14px 34px -14px rgba(28,20,48,.45),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(28,20,48,.06)}
  :root[data-palette="indigo"] .tabbar{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02)),color-mix(in srgb,var(--plate-solid) 52%,transparent) !important;
    border-color:rgba(255,255,255,.14) !important;box-shadow:0 14px 34px -14px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.16)}
  .tab-pill{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),color-mix(in srgb,var(--lead,#2c1a3e) 90%,transparent);
    box-shadow:0 6px 16px -6px rgba(28,20,48,.6),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.18)}
  .tab-pill.nudge{transition:transform .55s cubic-bezier(.3,1.5,.5,1),width .55s cubic-bezier(.3,1.5,.5,1)}
}

/* "Choose a thread" band: warm base, faint gold glows and threads */
.start-band::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23a8862b' stroke-linecap='round'%3E%3Cpath d='M-20 160 C 260 60, 520 260, 820 150 S 1360 40, 1640 170' stroke-width='1.6' stroke-opacity='.3'/%3E%3Cpath d='M-20 190 C 280 110, 540 280, 830 185 S 1380 90, 1640 210' stroke-width='1' stroke-opacity='.18'/%3E%3Cpath d='M-20 600 C 300 520, 600 690, 900 590 S 1400 500, 1640 610' stroke-width='1.4' stroke-opacity='.24'/%3E%3Cpath d='M-20 630 C 320 560, 620 700, 910 625 S 1420 545, 1640 650' stroke-width='.9' stroke-opacity='.14'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat,radial-gradient(38% 55% at 8% 18%,rgba(216,184,92,.10),transparent 70%),radial-gradient(30% 45% at 92% 30%,rgba(216,184,92,.07),transparent 70%),radial-gradient(40% 50% at 70% 96%,rgba(216,184,92,.08),transparent 72%),#f6f3f2 !important}
:root[data-palette="indigo"] .start-band::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23a8862b' stroke-linecap='round'%3E%3Cpath d='M-20 160 C 260 60, 520 260, 820 150 S 1360 40, 1640 170' stroke-width='1.6' stroke-opacity='.3'/%3E%3Cpath d='M-20 190 C 280 110, 540 280, 830 185 S 1380 90, 1640 210' stroke-width='1' stroke-opacity='.18'/%3E%3Cpath d='M-20 600 C 300 520, 600 690, 900 590 S 1400 500, 1640 610' stroke-width='1.4' stroke-opacity='.24'/%3E%3Cpath d='M-20 630 C 320 560, 620 700, 910 625 S 1420 545, 1640 650' stroke-width='.9' stroke-opacity='.14'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat,radial-gradient(38% 55% at 8% 18%,rgba(216,184,92,.09),transparent 70%),radial-gradient(30% 45% at 92% 30%,rgba(216,184,92,.07),transparent 70%),radial-gradient(40% 50% at 70% 96%,rgba(216,184,92,.08),transparent 72%),#1d1520 !important}

/* desktop menu: an oval frame marks the current page (and appears on hover) */
@media (min-width:881px){
  .topbar .mainnav a,.topbar .mainnav a:hover{border-radius:999px !important;padding:8px 16px !important;box-shadow:none;border:1px solid transparent !important;transition:border-color .2s,background .2s,color .2s}
  .topbar .mainnav a:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent) !important}
  .topbar .mainnav a.active,.topbar .mainnav a.active:hover{box-shadow:none !important;border-color:var(--saffron) !important;color:var(--ink);background:color-mix(in srgb,var(--saffron) 7%,transparent) !important}
}

/* phones: threads only run through the gaps (above the heading, before the panels, below the panels), never over text */
@media (max-width:760px){
  .start-band::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23a8862b' stroke-linecap='round'%3E%3Cpath d='M-10 20 C 60 6, 130 34, 200 20 S 340 6, 410 22' stroke-width='1.3' stroke-opacity='.3'/%3E%3Cpath d='M-10 24 C 70 12, 140 36, 210 24 S 350 12, 410 27' stroke-width='.8' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") 0 14px/100% 36px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23a8862b' stroke-linecap='round'%3E%3Cpath d='M-10 20 C 60 6, 130 34, 200 20 S 340 6, 410 22' stroke-width='1.3' stroke-opacity='.3'/%3E%3Cpath d='M-10 24 C 70 12, 140 36, 210 24 S 350 12, 410 27' stroke-width='.8' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") 0 calc(100% - 14px)/100% 36px no-repeat,
    radial-gradient(60% 40% at 0% 10%,rgba(216,184,92,.10),transparent 70%),radial-gradient(60% 40% at 100% 95%,rgba(216,184,92,.08),transparent 72%),#f6f3f2 !important}
  :root[data-palette="indigo"] .start-band::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23a8862b' stroke-linecap='round'%3E%3Cpath d='M-10 20 C 60 6, 130 34, 200 20 S 340 6, 410 22' stroke-width='1.3' stroke-opacity='.3'/%3E%3Cpath d='M-10 24 C 70 12, 140 36, 210 24 S 350 12, 410 27' stroke-width='.8' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") 0 14px/100% 36px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23a8862b' stroke-linecap='round'%3E%3Cpath d='M-10 20 C 60 6, 130 34, 200 20 S 340 6, 410 22' stroke-width='1.3' stroke-opacity='.3'/%3E%3Cpath d='M-10 24 C 70 12, 140 36, 210 24 S 350 12, 410 27' stroke-width='.8' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") 0 calc(100% - 14px)/100% 36px no-repeat,
    radial-gradient(60% 40% at 0% 10%,rgba(216,184,92,.08),transparent 70%),radial-gradient(60% 40% at 100% 95%,rgba(216,184,92,.07),transparent 72%),#1d1520 !important}
}

/* thread section: a bigger, bolder thread beside "The thread" */
.thread-head > .label::after{height:24px !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='24' viewBox='0 0 170 24'%3E%3Cpath d='M0 12 C21 2 64 2 85 12 S149 22 170 12' fill='none' stroke='%23a8862b' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0 12 C21 22 64 22 85 12 S149 2 170 12' fill='none' stroke='%23a8862b' stroke-opacity='.5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center/170px 24px !important}
:root[data-palette="indigo"] .thread-head > .label::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='24' viewBox='0 0 170 24'%3E%3Cpath d='M0 12 C21 2 64 2 85 12 S149 22 170 12' fill='none' stroke='%23d8b85c' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0 12 C21 22 64 22 85 12 S149 2 170 12' fill='none' stroke='%23d8b85c' stroke-opacity='.5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center/170px 24px !important}
/* panels keep their own text colour on hover (a global link hover style was overriding it) */
.door-panel,.door-panel:hover,.door-panel:focus-visible{color:var(--ink)}
.dp-4,.dp-4:hover,.dp-4:focus-visible{color:var(--on-lead,#f6f3f7) !important}
/* "Ideas in motion": on hover a wash of colour glides across the panel; the words stay crisp on top */
.dp-4{overflow:hidden;isolation:isolate}
.dp-4 > *{position:relative;z-index:1}
.dp-4 .dp-arrow{position:absolute}
.dp-4::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 0%,rgba(140,96,200,.35) 30%,rgba(216,184,92,.22) 50%,rgba(140,96,200,.30) 70%,transparent 100%);
  background-size:250% 100%;background-position:120% 0;opacity:0;transition:background-position 1.1s cubic-bezier(.25,.8,.3,1),opacity .4s ease}
.dp-4:hover::before,.dp-4:focus-visible::before{background-position:-20% 0;opacity:1}
.dp-4:hover{background:var(--bgp) !important}
:root[data-palette="indigo"] .dp-4::before{background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.55) 30%,rgba(216,184,92,.30) 50%,rgba(190,160,230,.45) 70%,transparent 100%);background-size:250% 100%;background-position:120% 0}
:root[data-palette="indigo"] .dp-4:hover::before{background-position:-20% 0}
@media (prefers-reduced-motion:reduce){ .dp-4::before{transition:opacity .3s} }

/* =====================================================================
   ASK ABOUT JOHN: a quiet, editorial question box in the hero
   ===================================================================== */
.ask{margin-top:34px;max-width:560px}
.ask-label{display:block;font-family:var(--serif,Georgia,serif);font-style:italic;font-size:16px;color:var(--saffron-text);margin-bottom:8px}
.ask-field{display:flex;align-items:center;gap:8px;border-bottom:1.5px solid color-mix(in srgb,var(--ink) 28%,transparent);transition:border-color .2s}
.ask-field:focus-within{border-color:var(--saffron)}
.ask-field input{flex:1;min-width:0;border:0;background:transparent;outline:none;padding:12px 0;font:inherit;font-size:17px;color:var(--ink)}
.ask-field input::placeholder{font-family:var(--serif,Georgia,serif);font-style:italic;color:var(--muted);opacity:.85}
.ask-go{flex:none;width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--lead,#2c1a3e);color:var(--on-lead,#f6f3f7);transition:transform .2s,opacity .2s}
.ask-go:hover{transform:translateX(2px)}
.ask-go:disabled{opacity:.45;cursor:default;transform:none}
.ask-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ask-sugg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px}
.ask-sugg button{border:0;background:none;padding:2px 0;cursor:pointer;font:inherit;font-size:14px;color:var(--muted);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--saffron) 55%,transparent);text-underline-offset:4px}
.ask-sugg button:hover{color:var(--ink);text-decoration-color:var(--saffron)}
.ask-thread{margin-top:22px;border-left:2px solid var(--saffron);background:color-mix(in srgb,var(--plate-solid) 55%,transparent);border-radius:0 6px 6px 0}
.ask-log{max-height:min(460px,62vh);overflow-y:auto;overscroll-behavior:contain;padding:18px 22px 6px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth}
.ask-msg{margin:0}
.ask-you{margin:0;font-size:14.5px;color:var(--muted)}
.ask-you::before{content:"You: ";font-family:var(--serif,Georgia,serif);font-style:italic;color:var(--saffron-text)}
.ask-a{margin:0;font-family:var(--serif,Georgia,serif);font-size:18.5px;line-height:1.5;color:var(--ink);white-space:pre-line}
.ask-src{margin:10px 0 0;font-size:14px;display:flex;flex-wrap:wrap;gap:6px 14px}
.ask-src a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--saffron);text-underline-offset:4px}
.ask-offer{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.ask-offer button{font:inherit;font-size:14px;font-weight:600;padding:9px 16px;border-radius:4px;cursor:pointer;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);background:transparent;color:var(--ink)}
.ask-offer .ask-yes{background:var(--lead,#2c1a3e);border-color:var(--lead,#2c1a3e);color:var(--on-lead,#f6f3f7)}
.ask-cal{border-radius:6px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.ask-cal iframe{display:block;width:100%;height:560px;border:0}
.ask-cal-alt{display:block;padding:8px 12px;font-size:13px;color:#2c1a3e;background:#fff;text-decoration:underline;text-underline-offset:3px}
.ask-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:10px 22px 16px;border-top:1px solid var(--line)}
.ask-note{margin:0;font-size:12.5px;color:var(--muted)}
.ask-note a{color:inherit}
.ask-reset{flex:none;border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.ask-reset:hover{color:var(--ink)}
.ask-thinking{height:14px;margin:2px 0}
.ask-thinking span{display:block;height:14px;width:140px;background:var(--saffron);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 7 C12 1.5 12 1.5 24 7 S36 12.5 48 7' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") 0 0/48px 14px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 7 C12 1.5 12 1.5 24 7 S36 12.5 48 7' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") 0 0/48px 14px repeat-x;
  animation:askthread 1.1s linear infinite}
@keyframes askthread{to{-webkit-mask-position:48px 0;mask-position:48px 0}}
@media (prefers-reduced-motion:reduce){ .ask-thinking span{animation:none} }
@media (max-width:880px){ .ask{margin-top:28px} .ask-a{font-size:17.5px} .ask-field input{font-size:16px} .ask-log{padding:16px 16px 6px} .ask-foot{padding:10px 16px 14px;flex-direction:column;gap:8px} .ask-cal iframe{height:620px} }
.ask-msg,.ask-cal,.ask-thinking{flex:none}
.ask-thread.has-cal .ask-log{max-height:none;overflow:visible}

/* ---- Ask: the gold thread as the underline; it ripples when you start typing ---- */
.ask-field{position:relative;border-bottom:0}
.ask-field::after{content:"";position:absolute;left:0;right:46px;bottom:-4px;height:10px;pointer-events:none;
  background:color-mix(in srgb,var(--saffron) 55%,var(--ink) 12%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5 C12 1.6 12 1.6 24 5 S36 8.4 48 5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/48px 10px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5 C12 1.6 12 1.6 24 5 S36 8.4 48 5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/48px 10px repeat-x;transition:background-color .25s}
.ask-field:focus-within::after{background:var(--saffron);animation:askripple 1.6s cubic-bezier(.25,.7,.3,1) 1}
@keyframes askripple{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:96px 0;mask-position:96px 0}}
@media (prefers-reduced-motion:reduce){ .ask-field:focus-within::after{animation:none} }

/* hero: a quiet way down to the threads */

/* ---- the librarian panel (Say hello) ---- */
.ask-panel{position:fixed;inset:0;z-index:210}
.ask-panel[hidden]{display:none}
.ask-scrim{position:absolute;inset:0;background:rgba(20,12,28,.34);opacity:0;transition:opacity .3s}
.ask-panel.open .ask-scrim{opacity:1}
.ask-sheet{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);display:flex;flex-direction:column;outline:none;
  background:var(--ground);border-left:1px solid var(--line);box-shadow:-18px 0 50px rgba(20,12,28,.16);
  transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.ask-panel.open .ask-sheet{transform:none}
.ask-sheet-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 22px 10px 26px;position:relative}
.ask-sheet-head h2{margin:0;font-family:var(--serif,Georgia,serif);font-weight:500;font-size:24px;letter-spacing:-.01em;color:var(--ink)}
.ask-grip{display:none}
.ask-close{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center}
.ask-close:hover{border-color:var(--saffron)}
.ask-sheet-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:4px 26px calc(20px + env(safe-area-inset-bottom))}
.ask.in-panel{flex:1;min-height:0;max-width:none;margin:0;display:flex;flex-direction:column}
.ask.in-panel .ask-field{order:2;flex:none}
.ask.in-panel .ask-thread{order:1;flex:1;min-height:0;display:flex;flex-direction:column;margin:0 0 18px}
.ask.in-panel .ask-thread[hidden]{display:none}
.ask.in-panel .ask-log,.ask.in-panel .ask-thread.has-cal .ask-log{flex:1;min-height:0;max-height:none;overflow-y:auto}
html.ask-lock,html.ask-lock body{overflow:hidden}
@media (max-width:880px){
  .ask-sheet{top:auto;left:0;width:100%;height:min(85vh,85dvh);border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;
    box-shadow:0 -14px 40px rgba(20,12,28,.18);transform:translateY(100%)}
  .ask-grip{display:block;position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:color-mix(in srgb,var(--ink) 22%,transparent)}
  .ask-sheet-head{padding:22px 16px 8px 20px;touch-action:none}
  .ask-sheet-head h2{font-size:21px}
  .ask-sheet-body{padding:2px 20px calc(16px + env(safe-area-inset-bottom))}
}

/* ---- two ways in: ask, or follow a thread ---- */
.ask:not(.in-panel) .ask-label{font-size:19px;color:var(--ink);margin-bottom:4px}
.hero-fork{margin:20px 0 0;font-family:var(--serif,Georgia,serif);font-style:italic;font-size:19px;color:var(--ink)}
.hero-fork a{color:var(--saffron-text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--saffron) 60%,transparent);text-underline-offset:5px}
.hero-fork a:hover{text-decoration-color:var(--saffron)}
.hero-about{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 0;font-size:15px}
.hero-about a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--saffron) 60%,transparent);text-underline-offset:5px}
.hero-about a:hover{text-decoration-color:var(--saffron)}
.start-ask{margin:26px 0 0;font-family:var(--serif,Georgia,serif);font-style:italic;font-size:18px;color:var(--ink)}
.start-ask a{color:var(--saffron-text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--saffron) 60%,transparent);text-underline-offset:5px}
/* Say hello panel: the person first, then the question box */
.ask-direct{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 20px}
.ask-direct-label{grid-column:1/-1;font-family:var(--serif,Georgia,serif);font-style:italic;font-size:15px;color:var(--muted);margin-bottom:2px}
.ask.in-panel{flex:1 1 auto;margin-bottom:0}
.ask-direct-item{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink);transition:border-color .2s,background-color .2s}
.ask-direct-item:hover{border-color:var(--saffron);background:color-mix(in srgb,var(--saffron) 6%,transparent)}
.ask-direct-item span{font-weight:600;font-size:15px}
.ask-direct-item em{font-style:normal;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ask-direct-item{min-width:0}
.ask.in-panel .ask-label{order:0;display:block;font-size:16px;color:var(--muted);margin:0 0 6px}
@media (max-width:880px){ .hero-fork,.ask:not(.in-panel) .ask-label{font-size:18px} .ask-direct-item{padding:10px 12px} .ask-direct-item em{font-size:12px} }

/* ---- chat, redesigned: your words in a plum bubble, answers beside a small gold mark ---- */
.ask-field{align-items:flex-end}
.ask-field textarea{flex:1;min-width:0;border:0;background:transparent;outline:none;resize:none;overflow:hidden;display:block;
  padding:12px 0;font:inherit;font-size:17px;line-height:1.4;color:var(--ink);max-height:160px}
.ask-field textarea::placeholder{font-family:var(--serif,Georgia,serif);font-style:italic;color:var(--muted);opacity:.85}
.ask-go{margin-bottom:6px}
.ask-thread{border-left:0;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--plate-solid) 45%,transparent);overflow:hidden}
.ask-log{gap:14px;padding:18px 18px 8px}
.ask-msg.you{align-self:flex-end;max-width:85%}
.ask-you{background:var(--lead,#2c1a3e);color:var(--on-lead,#f6f3f7);padding:9px 14px;border-radius:18px 18px 4px 18px;font-size:15px;line-height:1.45}
.ask-you::before{content:none}
.ask-msg.bot{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;max-width:100%}
.ask-mark{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--saffron);display:grid;place-items:center;flex:none;margin-top:2px;
  background:radial-gradient(circle,var(--saffron) 0 3px,transparent 3.5px)}
.ask-a{font-size:17.5px;line-height:1.5}
.ask-src{gap:6px;margin-top:10px}
.ask-src a{display:inline-block;padding:4px 11px;border:1px solid var(--line);border-radius:999px;font-size:13px;text-decoration:none;color:var(--ink);transition:border-color .2s}
.ask-src a:hover{border-color:var(--saffron)}
.ask-offer button{border-radius:999px;padding:8px 16px}
.ask-cal{border-radius:12px;margin-left:36px}
.ask-thinking{display:flex;align-items:center;gap:10px;height:auto}
.ask-thinking .ask-wave{display:block;height:14px;width:110px;background:var(--saffron);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 7 C12 1.5 12 1.5 24 7 S36 12.5 48 7' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") 0 0/48px 14px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 7 C12 1.5 12 1.5 24 7 S36 12.5 48 7' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") 0 0/48px 14px repeat-x;
  animation:askthread 1.1s linear infinite}
.ask-thinking > span:not([class]){display:none}
.ask-foot{border-top:1px solid var(--line);padding:10px 18px 12px;align-items:center}
.ask-note{font-size:12px}
/* inside the panel the conversation sits on the page, no box */
.ask.in-panel .ask-thread{border:0;border-radius:0;background:none;overflow:visible}
.ask.in-panel .ask-log{padding:4px 2px 8px}
.ask.in-panel .ask-foot{padding:10px 0 0;border-top:0}
.hero-cta{margin-top:20px}
@media (max-width:880px){ .ask-field textarea{font-size:16px} .ask-a{font-size:17px} .ask-log{padding:16px 14px 8px} .ask-foot{padding:10px 14px 12px} .ask-cal{margin-left:0} .ask-msg.you{max-width:90%} }
@media (prefers-reduced-motion:reduce){ .ask-thinking .ask-wave{animation:none} }
.ask-elsewhere{margin:4px 0 0;font-family:var(--serif,Georgia,serif);font-style:italic;font-size:16px;color:var(--muted)}
.ask-elsewhere a{color:var(--saffron-text);text-decoration:underline;text-underline-offset:4px}
.hero-cta .btn{text-transform:none;letter-spacing:0;font-size:15px;padding:11px 20px}
@media (max-width:880px){
  .ask-panel[data-contact-only] .ask-sheet{height:auto}
  .ask-direct-item{padding:11px 13px} .ask-direct-item em{display:none}
  .ask-direct{margin-bottom:14px}
  .hero-cta .btn{font-size:15px;letter-spacing:0;padding:11px 18px}
}
@media (min-width:881px){ .ask-panel[data-contact-only] .ask-sheet{top:16px;right:16px;bottom:auto;width:min(470px,calc(100% - 32px));border:1px solid var(--line);border-radius:14px;padding-bottom:4px;transform:translateX(calc(100% + 24px))} .ask-panel[data-contact-only].open .ask-sheet{transform:none} .ask-panel[data-contact-only] .ask-sheet-body{padding-bottom:22px} }
/* Say hello: email shown in full, with a copy button; the address opens the visitor's email app */
.ask-direct{grid-template-columns:1fr}
.ask-mail{flex-direction:row;align-items:center;gap:12px;padding:0}
.ask-mail-link{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:13px 0 13px 16px;color:var(--ink);text-decoration:none}
.ask-mail-link em{font-style:normal;font-size:15px;color:var(--ink);white-space:normal;overflow:visible;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--saffron) 60%,transparent);text-underline-offset:4px}
.ask-mail-link span{font-size:13px;font-weight:500;color:var(--muted)}
.ask-copy{flex:none;margin-right:12px;font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.ask-copy:hover{border-color:var(--saffron)}
@media (max-width:880px){ .ask-mail-link{padding:11px 0 11px 13px} .ask-direct-item em{display:block} .ask-direct-item:not(.ask-mail) em{display:none} }
.ask-field textarea.measure{font-family:var(--serif,Georgia,serif);font-style:italic}
/* calmer: a plain hairline under the box (gold when you type), no thread */
.ask-field::after{content:none}
.ask-field{border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent);transition:border-color .25s}
.ask-field:focus-within{border-bottom-color:var(--saffron)}
.ask-label.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.hero .ask{margin-top:30px}
/* homepage Ask: John's photo beside a speech bubble */
.ask-row{display:flex;align-items:flex-start;gap:12px}
.ask-avatar{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--saffron);margin-top:2px;box-shadow:0 4px 14px rgba(44,26,62,.12)}
.ask-field.ask-bubble{flex:1;min-width:0;position:relative;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:4px 20px 20px 20px;
  background:color-mix(in srgb,#fff 88%,var(--ground));padding:4px 6px 4px 18px;box-shadow:0 6px 22px rgba(44,26,62,.07);transition:border-color .25s,box-shadow .25s;align-items:center}
.ask-field.ask-bubble:focus-within{border-color:var(--saffron);box-shadow:0 6px 26px rgba(168,134,43,.16)}
.ask-bubble textarea{padding:11px 0}
.ask-bubble .ask-go{margin:0}
:root[data-palette="indigo"] .ask-field.ask-bubble{background:color-mix(in srgb,var(--ink) 7%,var(--ground));box-shadow:none}
.hero .ask .ask-thread{margin-left:60px}
@media (max-width:880px){ .ask-avatar{width:40px;height:40px} .ask-field.ask-bubble{padding-left:14px} .hero .ask .ask-thread{margin-left:0} }
/* Say hello: the box is a postcard — gold top edge, faint writing lines, serif hand */
.ask-field.ask-postcard{flex-direction:column;align-items:stretch;gap:6px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-top:3px solid var(--saffron);
  border-radius:8px;background:color-mix(in srgb,#fff 82%,var(--saffron) 4%);padding:12px 16px 12px;box-shadow:0 8px 24px rgba(44,26,62,.07)}
.ask-field.ask-postcard:focus-within{border-color:color-mix(in srgb,var(--saffron) 60%,transparent);border-top-color:var(--saffron)}
.ask-postcard textarea{font-family:var(--serif,Georgia,serif);font-size:18px;line-height:30px;padding:0 0 2px;min-height:90px;max-height:180px;overflow-y:auto;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,color-mix(in srgb,var(--ink) 12%,transparent) 29px,color-mix(in srgb,var(--ink) 12%,transparent) 30px);background-attachment:local}
.ask-postcard textarea::placeholder{color:color-mix(in srgb,var(--ink) 55%,transparent)}
.ask-go.ask-send{align-self:flex-end;width:auto;height:auto;border-radius:999px;padding:8px 16px;gap:6px;display:inline-flex;align-items:center;font:inherit;font-size:14px;font-weight:600;margin:0}
.ask-go.ask-send svg{width:16px;height:16px}
:root[data-palette="indigo"] .ask-field.ask-postcard{background:color-mix(in srgb,var(--ink) 6%,var(--ground));box-shadow:none}
@media (max-width:880px){ .ask-postcard textarea{min-height:60px} }
/* desktop: portrait sits a little higher in the hero */
@media (min-width:881px){ .hero > .plate{align-self:start;margin-top:-28px} }
/* phones: keep "Follow the thread" within the first screen */
@media (max-width:880px){
  .hero{padding-top:14px}
  .hero h1{margin-top:12px}
  .hero .tagline{margin-top:8px}
  .hero .hero-cta{margin-top:14px}
  .hero .ask{margin-top:16px}
  .hero-fork{margin-top:12px}
  .hero-hi .hero-photo-m{width:56px;height:56px}
}
@media (max-width:880px) and (max-height:620px){
  .hero h1{font-size:28px;line-height:1.05;margin-top:8px}
  .hero-hi .hero-photo-m{width:44px;height:44px}
  .hero .hero-cta .btn{padding:9px 16px}
  .hero .hero-cta{margin-top:10px}
  .hero .ask{margin-top:30px}
  .hero-fork{margin-top:8px;font-size:17px}
  .hero .tagline{font-size:15.5px}
  .hero h1{font-size:27px}
}
/* Say hello: the conversation as exchanged notes — visitor's notes match the postcard, replies on soft lilac cards */
.ask.in-panel .ask-log{gap:12px}
.ask.in-panel .ask-msg.you{max-width:82%}
.ask.in-panel .ask-you{background:color-mix(in srgb,#fff 82%,var(--saffron) 4%);color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  border-top:3px solid var(--saffron);border-radius:8px;padding:10px 14px;font-family:var(--serif,Georgia,serif);font-size:16.5px;line-height:1.45;box-shadow:0 4px 14px rgba(44,26,62,.06)}
.ask.in-panel .ask-msg.bot{display:block;align-self:flex-start;max-width:94%;background:color-mix(in srgb,#c9b2de 26%,#fff);border:1px solid color-mix(in srgb,#9a7fb3 22%,transparent);
  border-radius:8px;padding:13px 16px;box-shadow:0 4px 14px rgba(44,26,62,.05)}
.ask.in-panel .ask-msg.bot .ask-mark{display:none}
.ask.in-panel .ask-a{font-size:16.5px}
.ask.in-panel .ask-src a{background:color-mix(in srgb,#fff 70%,transparent)}
.ask.in-panel .ask-thinking{align-self:flex-start;background:color-mix(in srgb,#c9b2de 26%,#fff);border-radius:8px;padding:12px 16px}
.ask.in-panel .ask-thinking .ask-mark{display:none}
.ask.in-panel .ask-cal{margin-left:0}
:root[data-palette="indigo"] .ask.in-panel .ask-you{background:color-mix(in srgb,var(--ink) 6%,var(--ground));box-shadow:none}
:root[data-palette="indigo"] .ask.in-panel .ask-msg.bot,:root[data-palette="indigo"] .ask.in-panel .ask-thinking{background:color-mix(in srgb,#c9b2de 13%,var(--ground));border-color:color-mix(in srgb,#c9b2de 18%,transparent);box-shadow:none}
:root[data-palette="indigo"] .ask.in-panel .ask-src a{background:transparent}
@media (max-width:880px){
  .ask-panel.has-chat .ask-direct{gap:6px;padding-top:10px}
  .ask-panel.has-chat .ask-direct-label{display:none}
  .ask-panel.has-chat .ask-mail-link span{display:none}
  .ask-panel.has-chat .ask-mail-link{padding:9px 0 9px 12px}
  .ask-panel.has-chat .ask-mail-link em{font-size:13px}
  .ask-panel.has-chat .ask-copy{margin-right:8px;padding:5px 10px;font-size:12px}
  .ask-panel.has-chat .ask-direct-item:not(.ask-mail){padding:9px 12px;justify-content:center}
  .ask-panel.has-chat .ask-direct-item span{font-size:14px}
  .ask-panel.has-chat .ask.in-panel .ask-label{display:none}
  .ask-panel.has-chat .ask-postcard textarea{min-height:32px}
  .ask-panel.has-chat .ask-field.ask-postcard{padding:8px 12px;flex-direction:row;align-items:flex-end}
  .ask-panel.has-chat .ask-postcard textarea{background-image:none}
  .ask-panel.has-chat .ask-note{font-size:11.5px}
}
/* chat first, then the direct ways to reach John at the foot of the panel */
.ask-sheet-body .ask-direct{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.ask-sheet-body .ask-direct-label{grid-column:1/-1;font-family:var(--serif,Georgia,serif);font-style:italic;font-size:15px;color:var(--muted);margin-bottom:2px}
/* the guide's one-line introduction before its first answer */
.ask-msg.ask-intro .ask-a{font-style:italic;font-size:15.5px;color:var(--muted)}
.ask.in-panel .ask-msg.ask-intro{background:none;border:0;box-shadow:none;padding:0 2px}
/* phones: the photo is already at the top of the page, so the bubble stands alone */
/* calmer hero: the chat leads; one quiet line of links underneath */
.hero-fork{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.hero-fork .fork-about{font-style:normal;font-family:inherit;color:var(--ink);font-size:15px;font-weight:500;text-decoration-color:color-mix(in srgb,var(--ink) 25%,transparent)}
.hero-fork .fork-dot{color:var(--muted);font-style:normal}
.hero .ask{margin-top:28px}
/* a face to the chat: John's photo on each reply, with a small AI badge */
.ask-mark.has-face{position:relative;width:28px;height:28px;border:1.5px solid var(--saffron);background-size:cover;background-position:center;background-color:var(--plate-solid)}
.ask-mark.has-face::after{content:"AI";position:absolute;right:-7px;bottom:-5px;font:700 8px/1 var(--sans,system-ui,sans-serif);letter-spacing:.04em;
  padding:2px 3px;border-radius:4px;background:var(--saffron);color:#1c1430;box-shadow:0 0 0 1.5px var(--ground)}
.ask-msg.bot{grid-template-columns:28px minmax(0,1fr)}
.ask.in-panel .ask-msg.bot{display:grid;gap:10px}
.ask.in-panel .ask-msg.bot .ask-mark,.ask.in-panel .ask-thinking .ask-mark{display:grid}
.ask.in-panel .ask-msg.ask-intro{padding:0 2px}
/* phones: a small face sits inside the bubble's left edge */
@media (max-width:880px){
  .ask-row{position:relative;gap:0}
  .ask-row .ask-avatar{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;z-index:1;margin:0;border-width:1.5px;box-shadow:none}
  .ask-row .ask-field.ask-bubble{padding-left:54px;border-radius:20px}
  .hero .ask{margin-top:52px}
}
/* "About me": a small pill so it reads as a button; arrow nudges on hover */
.hero-fork .fork-about{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 14px;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:999px;
  text-decoration:none;font-size:14.5px;transition:border-color .2s,background-color .2s}
.hero-fork .fork-about span{transition:transform .2s}
.hero-fork .fork-about:hover{border-color:var(--saffron);background:color-mix(in srgb,var(--saffron) 8%,transparent)}
.hero-fork .fork-about:hover span{transform:translateX(3px)}
.hero-fork{align-items:center}
/* desktop: a little more air above the Ask box */
@media (min-width:881px){ .hero .ask{margin-top:62px} }
/* dark mode: dates and places on Work a touch lighter for contrast */
:root[data-palette="indigo"] .nn.now .label,:root[data-palette="indigo"] .nn.now .loop{color:#7a5208}
@media (max-width:880px){
  .hero-fork .fork-about{order:3;margin-top:4px;font-size:14px;padding:4px 12px}
  .hero-fork .fork-dot{display:none}
  .hero-fork .fork-lead{order:1} .hero-fork > a[data-glide]{order:2}
  .hero-fork{row-gap:8px}
}
@media (max-width:880px){
  .hero-fork{display:grid;grid-template-columns:auto 1fr;justify-items:start;align-items:baseline;column-gap:10px;row-gap:16px;margin-top:20px}
  .hero-fork .fork-about{order:0;grid-column:1/-1;margin-top:0}
  .hero-fork .fork-lead{order:1} .hero-fork > a[data-glide]{order:2}
}
@media (max-width:880px){ .hero .ask{margin-top:40px} .hero-fork{margin-top:18px;row-gap:14px} }
@media (max-width:880px) and (max-height:620px){ .hero .ask{margin-top:16px} .hero-fork{margin-top:10px;row-gap:8px} }
/* ===================== END ASK ===================== */
#the-thread,#threads{scroll-margin-top:72px}
@media (max-width:880px) and (max-height:620px){ .hero .ask{margin-top:30px} }

/* ===== home: the scroll-drawn gold thread ===== */
.scroll-thread{position:absolute;top:0;left:0;pointer-events:none;z-index:2;overflow:visible}
.scroll-thread .st-ghost{fill:none;stroke:var(--saffron);stroke-opacity:.13;stroke-width:1.2}
.scroll-thread .st-line{fill:none;stroke:var(--saffron);stroke-width:1.8;stroke-linecap:round;transition:stroke-dashoffset .12s linear}
.scroll-thread .st-head{fill:var(--saffron);filter:drop-shadow(0 0 5px var(--saffron));transition:opacity .3s}
@media (max-width:880px){ .scroll-thread .st-line{stroke-width:1.4} .scroll-thread .st-head{r:3} }

/* ===== gentle page transitions: pages soften into each other (browsers that support it) ===== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){animation:none} }

/* the scroll thread now arrives at the four strands, so the faint background arcs there are retired (warm ground and gold glow stay) */
.start-band::before{background:radial-gradient(38% 55% at 8% 18%,rgba(216,184,92,.10),transparent 70%),radial-gradient(30% 45% at 92% 30%,rgba(216,184,92,.07),transparent 70%),radial-gradient(40% 50% at 70% 96%,rgba(216,184,92,.08),transparent 72%),#f6f3f2 !important}
:root[data-palette="indigo"] .start-band::before{background:radial-gradient(38% 55% at 8% 18%,rgba(216,184,92,.09),transparent 70%),radial-gradient(30% 45% at 92% 30%,rgba(216,184,92,.07),transparent 70%),radial-gradient(40% 50% at 70% 96%,rgba(216,184,92,.08),transparent 72%),#1d1520 !important}
@media (max-width:760px){
  .start-band::before{background:radial-gradient(60% 40% at 0% 10%,rgba(216,184,92,.10),transparent 70%),radial-gradient(60% 40% at 100% 95%,rgba(216,184,92,.08),transparent 72%),#f6f3f2 !important}
  :root[data-palette="indigo"] .start-band::before{background:radial-gradient(60% 40% at 0% 10%,rgba(216,184,92,.08),transparent 70%),radial-gradient(60% 40% at 100% 95%,rgba(216,184,92,.07),transparent 72%),#1d1520 !important}
}

/* "ask John directly" brings the email and call cards forward with a soft gold glow */
.ask-direct.flash .ask-direct-item{animation:askflash 1.4s ease-out 1}
@keyframes askflash{0%{border-color:var(--saffron);box-shadow:0 0 0 4px color-mix(in srgb,var(--saffron) 28%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){ .ask-direct.flash .ask-direct-item{animation:none;border-color:var(--saffron)} }

/* Work: the section label already says "Current focus", so the card doesn't repeat it */
.focus-grid .tag{display:none}

/* Reading: book covers (uploaded, or fetched from Open Library by ISBN); a typeset cover shows if no image loads */
.book{padding-top:18px}
.book-cover{position:relative;width:112px;aspect-ratio:2/3;margin:0 0 12px;border-radius:2px 4px 4px 2px;overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.05),0 10px 22px rgba(44,26,62,.16);background:linear-gradient(160deg,#3a2550,#24152f)}
.book-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bc-fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:12px 10px;color:#f6efe2;
  border-left:5px solid rgba(216,184,92,.75)}
.bc-fallback b{font-family:var(--serif,Georgia,serif);font-weight:600;font-size:14px;line-height:1.15}
.bc-fallback i{font-style:normal;font-size:10.5px;letter-spacing:.04em;color:#d8b85c}

/* Reading: "On my desk" (current, larger covers) and "On the shelf" (finished, small covers standing on a gold shelf) */
.read-block{margin-top:8px}
.read-block + .read-block{margin-top:56px}
.read-block > .label{display:block;margin-bottom:22px}
.desk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px}
.desk-book{display:flex;gap:18px;align-items:flex-start;padding:20px;background:var(--plate);border:1px solid var(--line);border-top:3px solid var(--saffron);border-radius:4px;
  box-shadow:0 1px 0 rgba(39,29,54,.04),0 8px 24px rgba(60,40,80,.06)}
.desk-book .book-cover{width:104px;flex:none;margin:0}
.desk-text h3{margin:2px 0 6px;font-size:20px;font-style:italic;font-weight:600;line-height:1.2}
.desk-text h3 a{color:var(--ink);text-decoration:none}
.desk-text p{margin:8px 0 0;color:var(--muted);font-size:14.5px}
.bookshelf{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-wrap:wrap;gap:34px 28px}
.shelf-book{width:150px;display:flex;flex-direction:column;position:relative}
.shelf-book .book-cover{width:84px;margin:0 0 20px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 6px 12px rgba(44,26,62,.14)}
.shelf-book::before{content:"";position:absolute;left:-14px;right:-14px;top:126px;height:5px;border-radius:2px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--saffron) 85%,#fff),var(--saffron));box-shadow:0 4px 8px rgba(44,26,62,.12)}
.shelf-book h3{margin:0 0 4px;font-size:16px;font-style:italic;font-weight:600;line-height:1.25}
.shelf-book h3 a{color:var(--ink);text-decoration:none}
.shelf-book p{margin:6px 0 0;color:var(--muted);font-size:13.5px}
@media (max-width:880px){ .desk{grid-template-columns:1fr} .desk-book .book-cover{width:92px} .bookshelf{gap:30px 22px} .shelf-book{width:calc(50% - 11px)} }
.desk-text .coord,.shelf-book .coord{line-height:1.45;display:block}
.shelf-book::before{left:0;right:-28px;border-radius:0}
.shelf-book:first-child::before{left:-14px;border-radius:2px 0 0 2px}
.shelf-book:last-child::before{right:-14px;border-radius:0 2px 2px 0}
@media (max-width:880px){ .shelf-book::before{right:-22px} .shelf-book:nth-child(2n)::before{right:-14px} .shelf-book:nth-child(2n+1)::before{left:-14px} }
.split.speak-solo{grid-template-columns:1fr}

/* homepage chat: hide it to carry on exploring, show it again */
.ask-bar{display:flex;justify-content:flex-end;padding:8px 10px 0}
.ask-hide,.ask-show{border:0;background:none;padding:4px 6px;cursor:pointer;font:inherit;font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.ask-hide span{font-size:17px;line-height:1}
.ask-hide:hover,.ask-show:hover{color:var(--ink)}
.ask-show{margin-top:10px;text-decoration:underline;text-underline-offset:3px}
.ask-show[hidden]{display:none}
.hero .ask .ask-show{margin-left:60px}
@media (max-width:880px){ .hero .ask .ask-show{margin-left:0} }