/* ============ Jonathan O'Hara - site styles (shared) ============ */
:root{
  --bg:#ffffff; --ink:#16181d; --muted:#5b6068; --rule:#e7e9ee;
  --accent:#3a4a52; --accent-soft:#eef1f1; --card:#fafbfc;
  --dark:#0f1715; --spark:#9fe3c2;
  --nav-bg:rgba(255,255,255,0.93); --input-bg:#fff; --hero-text:#ffffff; --on-accent:#fff;
  --maxw:1080px; --readw:760px; --gap:48px;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --font-head:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --tracking:-0.01em;
  color-scheme:light dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--font-head);letter-spacing:var(--tracking);line-height:1.16;font-weight:700}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 32%,transparent)}
a:hover{border-bottom-color:var(--accent)}
.muted{color:var(--muted)}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ---- nav: name + role at top-left, section links right ---- */
.nav{position:sticky;top:0;z-index:40;background:var(--nav-bg);backdrop-filter:blur(8px)}
.nav .wrap{display:flex;align-items:baseline;justify-content:space-between;padding:14px 24px;gap:16px;flex-wrap:wrap}
.nav .brand{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink);border:none;letter-spacing:var(--tracking)}
.nav .brand .role{font-weight:400;color:var(--muted);margin-left:10px}
.nav .links{display:flex;gap:34px}
.nav .links a{font-family:var(--font-head);font-size:13px;letter-spacing:.03em;color:var(--muted);border:none;padding-bottom:3px;transition:color .15s}
.nav .links a:hover,.nav .links a.on{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
@media(max-width:640px){.nav .brand .role{display:none}.nav .links{gap:14px}.nav .links a{font-size:12px}}

/* ---- hero: black field, big white headline, nothing else ---- */
header.hero{position:relative;background:transparent}
#dots{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:150px 24px 140px}
.hero-inner h1{color:var(--hero-text);font-size:72px;line-height:1.04;margin:0;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,0.35)}
.hero-inner .subhead{color:var(--hero-text);opacity:.84;font-family:var(--font-head);font-weight:400;font-size:21px;line-height:1.4;margin:20px 0 0;max-width:34ch;letter-spacing:var(--tracking)}
@media(max-width:820px){.hero-inner{padding:96px 22px 92px}.hero-inner h1{font-size:44px}.hero-inner .subhead{font-size:16px;margin-top:14px}}

/* ---- sections ---- */
section{padding:56px 0;border-bottom:1px solid var(--rule)}
.kicker{font-family:var(--font-head);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;display:inline-block}
.kicker::after{content:"";display:block;width:38px;height:3px;background:var(--accent);margin-top:8px;opacity:.95}
.work-head .kicker::after,.ideas-sec .kicker::after{display:none}
.intro p{max-width:var(--readw);font-size:19px;margin:0 0 16px}

/* ---- point cards with icon + number ---- */
.points{display:grid;gap:24px;margin-top:22px}
.point{position:relative;border:1px solid var(--rule);border-radius:14px;padding:24px 26px;background:var(--card);overflow:hidden;transition:transform .16s ease,box-shadow .16s ease}
.point:hover{transform:translateY(-2px);box-shadow:0 10px 28px color-mix(in srgb,var(--ink) 12%,transparent)}
.point::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.phead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.point .ic{width:34px;height:34px;flex:0 0 34px;color:var(--accent)}
.point .ic svg{width:100%;height:100%;display:block}
.point .num{font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--on-accent);background:var(--accent);border-radius:7px;padding:3px 9px;letter-spacing:.02em}
.point h3{font-size:20px;margin:0 0 10px;color:var(--accent)}
.point p{margin:0 0 16px;font-size:16.5px;line-height:1.55;color:var(--ink)}
.cardwin{border:1px solid var(--rule);border-radius:10px;background:color-mix(in srgb,var(--accent) 7%,var(--card));overflow:hidden;margin:0 0 16px;aspect-ratio:16/5.5}
.cardwin svg{width:100%;height:100%;display:block}
.point.invert .cardwin{background:color-mix(in srgb,var(--on-accent) 10%,transparent);border-color:color-mix(in srgb,var(--on-accent) 28%,transparent)}
.more{font-family:var(--font-head);font-size:13.5px;letter-spacing:.02em;border:none}
.more::after{content:" \2192"}

/* ---- conveyor illustration ---- */
.figure{margin:30px 0 0;border:1px solid var(--rule);border-radius:14px;background:#fff;padding:18px 18px 10px}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{font-family:var(--font-head);font-size:12.5px;color:var(--muted);text-align:center;margin-top:6px;letter-spacing:.02em}

/* ---- about: photo static, no travelling ---- */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--gap);align-items:start;max-width:var(--maxw)}
.about-quote{position:sticky;top:90px;font-family:var(--font-head);font-size:19px;line-height:1.5;font-style:italic;color:var(--accent);border-left:3px solid var(--accent);padding:4px 0 4px 20px}
.about-quote p{margin:0}
.credrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:14px 0 0}
@media(max-width:760px){.credrow{grid-template-columns:1fr}}
.credbox{border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:12px;padding:16px 18px;background:var(--card)}
.credbox .k{font-family:var(--font-head);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.credbox p{font-size:15px;line-height:1.5;margin:0 0 10px;color:var(--ink)}
.credbox a{font-family:var(--font-head);font-size:13px}
.hl-list{margin:14px 0 0;padding:0;list-style:none}
.hl-list li{position:relative;padding-left:20px;margin:0 0 12px;line-height:1.55;font-size:16.5px;color:var(--ink)}
.hl-list li:last-child{margin-bottom:0}
.hl-list li::before{content:"\203A";position:absolute;left:0;top:0;color:var(--accent);font-weight:700;font-family:var(--font-head)}
.hl-list li b{color:var(--accent)}
.hl-list a{font-family:var(--font-head);font-size:14px;white-space:nowrap}
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--gap);align-items:center}
@media(max-width:820px){.intro-grid{grid-template-columns:1fr}.intro-grid .photo-box{max-width:300px}}
.about-grid .lead-line{font-size:22px;margin:0 0 22px;font-family:var(--font-head);letter-spacing:var(--tracking);line-height:1.34;font-weight:600;color:var(--ink)}
.about-grid p{font-size:18px;margin:0 0 16px}
.photo-box .frame{aspect-ratio:4/5;border-radius:14px;background:radial-gradient(120% 120% at 30% 20%, var(--accent-soft), #fff 72%);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;text-align:center;font-family:var(--font-head);padding:14px}
.photo-box .portrait-img{width:100%;height:auto;border-radius:14px;border:1px solid var(--rule);display:block}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}.photo-box{max-width:240px}.about-grid .lead-line{font-size:19px}.about-quote{position:static;margin-top:8px;border-left:none;border-top:2px solid var(--accent);padding:14px 0 0 0}}

/* ---- invitation (the opportunity) ---- */
/* STATEMENT BREAK (2026-06-29 v4): colour section (accent + optional texture image), with the text
   on a clean WHITE CARD floating on the right. No hard colour cut-off; the text sits on white. */
.statement{position:relative;overflow:hidden;background:var(--accent);padding-bottom:20px}
/* explicit height (not top+bottom) so Firefox and Safari size the image identically: an abs-positioned <img> with top+bottom+object-fit is over-constrained — Firefox sizes by intrinsic ratio while Safari stretches, which broke the 20px strip below in Firefox (fix 2026-06-30) */
.statement .tex{position:absolute;top:0;left:0;right:0;height:calc(100% - 20px);width:100%;object-fit:cover;opacity:1;pointer-events:none;z-index:0}
.statement .wrap{position:relative;z-index:1;padding:96px 24px 130px;min-height:56vh;display:flex;flex-direction:column;justify-content:center}
.statement-text{max-width:520px;margin-left:auto;text-align:left;background:#ffffff;border-radius:16px;padding:40px 40px;box-shadow:0 20px 48px rgba(0,0,0,.24)}
.statement h2{font-family:var(--font-head);font-weight:800;font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:-.02em;margin:0;color:#111111}
.statement p{margin:20px 0 0;font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:#333333}
.statement-text::after{content:"";display:block;width:88px;height:5px;border-radius:3px;background:var(--accent);margin:26px 0 0}
@media(max-width:760px){.statement .wrap{padding:64px 20px;min-height:0}.statement-text{margin-left:0;max-width:none}}

.invite{background:var(--accent-soft);border-bottom:1px solid var(--rule);padding:84px 0 108px}
.invite h2{font-size:30px;margin:0 0 16px}
.invite p{max-width:var(--readw);font-size:19px;margin:0 0 16px}
/* the direct contact line uses the plain body font, not the monospace --font-head (2026-06-29) */
.invite .big{font-family:var(--font-body);font-size:20px;line-height:1.45;font-weight:600;color:var(--ink)}
form.contact-form{max-width:var(--readw);display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:26px}
form.contact-form .full{grid-column:1 / -1}
@media(max-width:560px){form.contact-form{grid-template-columns:1fr}}
form.contact-form label{font-family:var(--font-head);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
form.contact-form input,form.contact-form textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--input-bg);border:1px solid var(--rule);border-radius:9px;padding:11px 13px}
form.contact-form textarea{min-height:130px;resize:vertical}
form.contact-form input:focus,form.contact-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(58,74,82,.13)}
form.contact-form button{justify-self:start;background:var(--accent);color:var(--on-accent);border:none;border-radius:9px;padding:12px 22px;font:inherit;font-size:15.5px;font-weight:600;cursor:pointer}
form.contact-form button:hover{filter:brightness(1.1)}
.form-note{font-size:13px;color:var(--muted);margin-top:4px}

/* ---- footer: location on the right ---- */
footer.site{padding:26px 0 60px}
footer.site .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
footer.site .nm{font-family:var(--font-head);color:var(--ink);font-weight:700}
footer.site .loc{font-family:var(--font-head)}

/* ---- sub-page article ---- */
.article{padding:48px 0 8px}
.article .backlink{font-family:var(--font-head);font-size:13px;border:none;color:var(--muted)}
.article .backlink::before{content:"\2190  "}
.article h1{font-size:32px;margin:18px 0 6px;max-width:var(--readw)}
.article .standfirst{font-size:19px;color:var(--muted);max-width:var(--readw);margin:0 0 26px}
.article .body{max-width:var(--readw)}
.article .body p{font-size:18px;margin:0 0 18px}
.article .body h2{font-size:20px;margin:30px 0 10px;color:var(--accent)}
.pagenav{display:flex;justify-content:space-between;gap:16px;max-width:var(--readw);margin:36px 0 0;padding-top:20px;border-top:1px solid var(--rule);font-family:var(--font-head);font-size:13.5px}
/* references: always white-on-its-own so they read on any palette (2026-06-29; was var(--card), low-contrast on dark) */
.refs{max-width:var(--readw);margin:32px 0 0;padding:20px 22px;background:#ffffff;border:1px solid rgba(0,0,0,.14);border-radius:12px;color:#1a1f24}
.refs h2{font-family:var(--font-head);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#666;margin:0 0 12px}
.refs ol{margin:0;padding-left:20px}
.refs li{font-size:14.5px;line-height:1.5;margin:0 0 10px;color:#3a4148}
.refs a{color:#1a56b0;text-decoration:underline}
/* references subsumed into a white evidence card: no second box, just a divider into the same surface */
.evidence .refs,.refs-in{background:transparent;border:none;border-radius:0;border-top:1px solid rgba(0,0,0,.14);margin:28px 0 0;padding:22px 0 0;max-width:none}

/* ---- floating photo straddling the hero ---- */
.hero-photo-wrap{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 24px;height:0;z-index:5}
.hero-photo{position:absolute;right:24px;bottom:0;transform:translateY(-64%);width:196px;height:auto;border-radius:16px;border:3px solid #fff;box-shadow:0 20px 50px rgba(0,0,0,0.42);display:block}
@media(max-width:820px){.hero-photo-wrap{height:auto;text-align:center;padding-top:16px}.hero-photo{position:static;transform:none;width:150px;margin:0 auto}}

/* ---- per-card cited takeaway ---- */
.point .takeaway{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:14px;line-height:1.5;color:var(--muted);font-style:italic}
.point .takeaway cite{font-style:normal;color:var(--accent);font-weight:600;white-space:nowrap}

/* ---- inverted "demonstration" card ---- */
.point.invert{background:var(--accent);border-color:var(--accent)}
.point.invert::before{background:var(--spark)}
.point.invert h3{color:var(--on-accent)}
.point.invert p{color:var(--on-accent);opacity:.82}
.point.invert .ic{color:var(--on-accent)}
.point.invert .num{background:var(--on-accent);color:var(--accent)}
.point.invert .more{color:var(--on-accent)}
.point.invert .more:hover{color:var(--spark)}

/* ---- quote to the right of each card ---- */
.point-row{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:center}
.point-quote{font-style:italic;color:var(--muted);font-size:16px;line-height:1.55}
.point-quote cite{display:block;font-style:normal;color:var(--accent);font-weight:600;font-size:13.5px;margin-top:8px}
.cardfoot{border-top:1px solid var(--rule);margin-top:16px;padding-top:14px}
.point.invert .cardfoot{border-top-color:color-mix(in srgb,var(--on-accent) 28%,transparent)}
@media(max-width:760px){.point-row{grid-template-columns:1fr;gap:12px}.point-quote{padding-left:14px;border-left:2px solid var(--rule)}}

/* ---- demo: per-lens vs across-lens grouping band ---- */
#demo .bandlabel{margin:36px 0 4px}
#demo .bandlabel span{display:inline-block;font-family:var(--font-head);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;border-top:2px solid var(--accent);padding-top:8px}
#demo .lensgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:980px;margin:10px auto 4px;padding:0 22px}
#demo .lensgrid button{font:inherit;font-size:13px;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer;color:var(--ink);transition:border-color .15s,background .15s}
#demo .lensgrid button:hover{border-color:var(--accent)}
#demo .lensgrid button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
@media(max-width:640px){#demo .lensgrid{grid-template-columns:1fr 1fr}}

#demo .ctxsynth{font-size:15.5px;color:var(--ink);background:#eef5f1;border-left:3px solid var(--accent);border-radius:8px;padding:10px 14px;margin:10px 0 0;max-width:72ch}
#demo .cohortbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
#demo .cohortbar button{font:inherit;font-size:13px;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;color:var(--ink);transition:border-color .15s,background .15s}
#demo .cohortbar button:hover{border-color:var(--accent)}
#demo .cohortbar button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}



/* ---- mobile pass ---- */
@media(max-width:640px){
  body{font-size:17px}
  section{padding:40px 0}
  .wrap{padding:0 18px}
  .hero-inner{padding:84px 18px 78px}
  .hero-inner h1{font-size:36px}
  .intro p{font-size:17px}
  .point{padding:20px 18px}
  .point h3{font-size:18px}
  .invite h2{font-size:24px}
  .invite .big{font-size:18px}
  .invite p{font-size:17px}
  .article{padding:32px 0 8px}
  .article h1{font-size:26px}
  .article .standfirst{font-size:17px}
  .article .body p{font-size:17px}
  .nav .wrap{padding:11px 18px}
  #demo .wrap{padding:0 16px}
  #demo .hero h1{font-size:27px}
  #demo .hero-inner{padding:44px 16px 38px}
  #demo .hero .subtitle{font-size:17px}
}
@media(max-width:380px){
  .hero-inner h1{font-size:30px}
  .nav .links{gap:9px}
  .nav .links a{font-size:11px}
}

/* contact: two columns with a connect aside */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:var(--gap);align-items:start}
.connect .connect-link{font-family:var(--font-head);font-size:15px;margin:0}
.connect .connect-link a{white-space:nowrap}
.connect .connect-photo{display:block;width:100%;max-width:240px;height:auto;margin:18px 0 0;border-radius:12px;border:1px solid var(--rule)}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* ---- research in progress (opportunities grab-bag, deliberately rougher) ---- */
.opps{background:var(--dark)}
.opps .opps-kicker{color:var(--spark)}
.opps .opps-kicker::after{background:linear-gradient(90deg,var(--spark),transparent);opacity:.9}
.opps .opps-lead{max-width:var(--readw);font-size:18px;line-height:1.6;color:#fff;opacity:.84;margin:0 0 26px}
.opps-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start}
.opp{background:color-mix(in srgb,#fff 6%,transparent);border:2px dashed color-mix(in srgb,var(--spark) 55%,transparent);border-radius:14px;padding:24px 26px}
.opp .opp-flag{display:inline-block;font-family:var(--font-head);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--spark);margin-bottom:12px}
.opp h3{font-size:21px;margin:0 0 12px;color:#fff;line-height:1.25}
.opp p{font-size:16.5px;line-height:1.62;color:#fff;opacity:.86;margin:0 0 14px}
.opp-artefact{margin-top:18px;background:color-mix(in srgb,#fff 8%,transparent);border-radius:11px;padding:16px 18px 8px}
.opp-artefact-h{display:block;font-family:var(--font-head);font-size:13px;letter-spacing:.04em;color:var(--spark);margin-bottom:10px;font-weight:700}
.opp-artefact ol{margin:0;padding-left:20px}
.opp-artefact li{font-size:15.5px;line-height:1.55;color:#fff;opacity:.9;margin:0 0 10px}
.opp-artefact li b{color:#fff;opacity:1}
.opp .opp-n1{font-style:italic;font-size:14px;opacity:.66;margin:6px 0 0}
.opp-more{background:transparent;border:2px dashed color-mix(in srgb,#fff 22%,transparent);display:flex;flex-direction:column}
.opp-more h3{opacity:.9}
.opp-more p{opacity:.78}
.opp-cta{align-self:start;margin-top:auto;font-family:var(--font-head);font-size:14px;color:var(--dark);background:var(--spark);border:none;border-radius:9px;padding:10px 18px;font-weight:700}
.opp-cta::after{content:" \2192"}
.opp-cta:hover{filter:brightness(1.08);border:none}
@media(max-width:760px){.opps-grid{grid-template-columns:1fr}}
@media(max-width:640px){.opp{padding:20px 18px}.opp h3{font-size:19px}}

/* ---- audiences page: fleet of audience cards (general -> specific) ---- */
.aud-spectrum{display:flex;align-items:center;gap:14px;font-family:var(--font-head);font-size:12px;
     letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:8px 0 18px}
.aud-spectrum .aud-line{flex:1;height:2px;background:linear-gradient(90deg,var(--accent),var(--spark));opacity:.55;border-radius:2px}
.point .phead .status{margin-left:auto;font-family:var(--font-head);font-size:11px;letter-spacing:.08em;
     text-transform:uppercase;border:1.5px solid var(--rule);border-radius:6px;padding:2px 9px;color:var(--muted)}
.point .phead .status.live{color:var(--accent);border-color:var(--accent)}
.aud-take{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:14px;
     line-height:1.5;color:var(--muted);font-style:italic}
.aud-artefact{margin:16px 0 0;background:color-mix(in srgb,var(--accent) 7%,var(--card));
     border:1px solid var(--rule);border-radius:11px;padding:16px 18px}
.aud-artefact-h{display:block;font-family:var(--font-head);font-size:13px;letter-spacing:.04em;
     color:var(--accent);margin-bottom:10px;font-weight:700}
.aud-artefact ol{margin:0;padding-left:20px}
.aud-artefact li{font-size:15.5px;line-height:1.55;margin:0 0 10px;color:var(--ink)}
.aud-artefact li:last-child{margin-bottom:0}
.aud-artefact .aud-take{margin-top:12px}

/* ============================================================
   THE FOLD, reverse-coloured signpost after the intro.
   Accent field, light (on-accent) text; the two thinking pieces
   live behind two bold buttons. Added 2026-06-29 (restructure).
   ============================================================ */
.fold-sec{background:var(--accent);border-bottom:none}
.fold{max-width:none;margin:0 auto;text-align:center;padding:8px 0 6px}
.fold-tag{display:inline-block;font-family:var(--font-head);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-accent);opacity:.78;margin:0 0 14px}
.fold-h{font-family:var(--font-head);color:var(--on-accent);font-size:40px;line-height:1.1;
  margin:0 0 14px;letter-spacing:var(--tracking)}
.fold-sub{color:var(--on-accent);opacity:.88;font-size:18px;line-height:1.55;max-width:60ch;margin:0 auto 30px}
.fold-btns{display:grid;grid-template-columns:1fr 1fr;gap:22px;text-align:left}
.fold-btn{display:flex;flex-direction:column;gap:0;background:color-mix(in srgb,var(--on-accent) 7%,transparent);
  border:1.5px solid color-mix(in srgb,var(--on-accent) 34%,transparent);border-radius:16px;overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.fold-btn:hover{transform:translateY(-3px);background:color-mix(in srgb,var(--on-accent) 12%,transparent);
  box-shadow:0 16px 40px rgba(0,0,0,.22)}
.fold-thumb{position:relative;display:block;aspect-ratio:1000/340;overflow:hidden;border-bottom:1.5px solid color-mix(in srgb,var(--on-accent) 26%,transparent);background:#9fb0b8}
.fold-thumb .ill{display:block;width:100%;height:100%}
/* raster image slot: drop a real jpg at the named filename and it covers the placeholder; absent, onerror hides the img and the dashed placeholder shows */
.thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.thumb-ph{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;padding:14px;text-align:center;background:var(--card,#fbfaff);border:2px dashed color-mix(in srgb,var(--ink,#1b1836) 30%,transparent)}
.thumb-ph b{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:600;font-size:13.5px;color:var(--ink,#1b1836);word-break:break-all;line-height:1.35}
.thumb-ph small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#6c6499)}
.fold-btn-text{padding:20px 24px 24px}
.fold-btn-label{display:block;font-family:var(--font-head);font-weight:700;font-size:27px;
  color:var(--on-accent);letter-spacing:var(--tracking);line-height:1.1}
.fold-btn-label::after{content:" \2192";opacity:.6;font-weight:400}
.fold-btn-sub{display:block;color:var(--on-accent);opacity:.8;font-size:15.5px;line-height:1.5;margin-top:10px}
@media(max-width:760px){.fold-btns{grid-template-columns:1fr}.fold-h{font-size:30px}.fold-btn-label{font-size:23px}}

/* ---- illustration base (Heinz-Kurth-spirit flat plates; chrome, colourful by design) ---- */
.ill{display:block}

/* PAGE HERO + wip-note removed 2026-07-01: the how-i-see-it / what-comes-next
   sub-pages now use the light .article header, consistent with the deeper pages. */

/* ============================================================
   EVIDENCE LAYER, the black-and-white rule (2026-06-29).
   Demos, prototypes, tables, plots and the controls that drive
   them render clean black-on-white, INDEPENDENT of the site
   palette, with WHITE selection buttons and WHITE highlights so
   they stay legible no matter what colour the chrome is wearing.
   Marketing/chrome can be colourful; the evidence layer does not.
   Apply by adding class="evidence" (or data-layer="evidence") to
   a demo/prototype/table/plot container. cardwin.bw is the same
   idea for a static thumbnail of an evidence surface.
   ============================================================ */
.cardwin.bw{background:#ffffff;border-color:rgba(0,0,0,.18)}
.evidence{
  --ink:#111111; --bg:#ffffff; --card:#ffffff; --muted:#444444;
  --rule:rgba(0,0,0,.16); --line:rgba(0,0,0,.16);
  --accent:#111111; --on-accent:#ffffff; --spark:#111111; --accent-soft:#f2f2f2; --catcol:#111111;
  color:#111111;background:#ffffff;
  /* clean white-on-its-own card so the evidence layer never depends on the palette (design review 2026-06-29) */
  border:1px solid rgba(0,0,0,.14);border-radius:18px;padding:26px;
}
@media(max-width:600px){.evidence{padding:18px}}
.evidence table{border-collapse:collapse;width:100%}
.evidence th,.evidence td{border:1px solid rgba(0,0,0,.18);padding:7px 10px;color:#111;background:#fff}
.evidence th{font-family:var(--font-head);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
/* selection buttons: white, black outline; the chosen one inverts to solid black */
.evidence .btn,.evidence button.opt,.evidence [role="tab"]{
  background:#fff;color:#111;border:1.5px solid #111;border-radius:8px;padding:8px 12px;cursor:pointer}
.evidence .btn.on,.evidence button.opt.on,.evidence [role="tab"][aria-selected="true"]{
  background:#111;color:#fff}
/* highlight features stay white-on-black so they read on any backdrop */
.evidence .hl{background:#fff;color:#111;outline:2px solid #111}
.evidence svg .bar{fill:#111}
.evidence svg .bar--hl{fill:#fff;stroke:#111;stroke-width:2}
.evidence svg .axis{stroke:#111}

/* ============================================================
   STAGE (2026-06-29): hero + intro share one dark star-field.
   The dots run behind both; the intro prose sits on a frosted
   panel so the star field never fights the text.
   ============================================================ */
/* ABOVE THE FOLD: plain white landing with the big bold statement + a highlight-colour rule.
   Hardcoded white/black so it is palette-independent; the rule picks up the rotating accent. */
.landing{background:#ffffff;color:#111111;min-height:78vh;display:flex;align-items:center;border-bottom:1px solid rgba(0,0,0,.10)}
.landing .wrap{padding:60px 24px}
.landing h1{font-family:var(--font-head);font-weight:800;color:#111111;font-size:clamp(34px,7vw,84px);line-height:1.04;letter-spacing:-.02em;max-width:18ch;margin:0}
.landing-sub{font-family:var(--font-head);font-weight:400;color:#333333;font-size:clamp(17px,2.4vw,26px);line-height:1.35;margin:22px 0 0;max-width:none}
.landing-rule{display:block;width:92px;height:5px;border-radius:3px;background:var(--accent);margin:34px 0 0}
html[data-pal="NOIR"] .landing-rule{background:#111111} /* noir accent is white; the hero stays white, so this underline goes black */
@media(max-width:600px){.landing{min-height:68vh}}

/* below the fold: the star-field stage; the cutout stands while the intro text sits vertically centred beside it */
/* the star-field section is a fixed universal dark (matches the black text above the fold), not the rotating --dark */
.stage{position:relative;background:#111111;overflow:hidden;min-height:70vh;display:flex;flex-direction:column;justify-content:center}
.stage #dots{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.stage .hero{background:transparent}
.stage .hero-inner{position:relative;z-index:1;padding:122px 24px 46px}
.intro-onstage{position:relative;z-index:1;border-bottom:none;padding:6px 0 70px}
/* seamless with the star field, no floating window */
.intro-onstage .intro-panel{background:transparent;padding:0}
.intro-onstage .intro-panel p{color:#f2f3f5;font-size:18px;margin:0 0 16px;max-width:none}
.intro-onstage .intro-panel .lead{font-family:var(--font-head);font-size:clamp(20px,2.4vw,24px);line-height:1.34;font-weight:700;color:#fff;margin-bottom:20px}
.intro-onstage .intro-panel p:last-child{margin-bottom:0}
/* BIG bottom-anchored hero cutout (2026-06-29): the transparent PNG stands on the seam where the
   star-field stage meets the fold (bottom:0), runs top-to-bottom, and sits flush to the right edge.
   The stage clips it so it joins the fold cleanly. The intro text is capped to the left so it never
   runs under the figure. Drop-shadow follows the alpha, so a true cutout casts a body-shaped shadow. */
.intro-onstage .intro-grid{display:block;max-width:500px}
.intro-onstage .intro-panel{position:relative;z-index:2}
/* The figure is anchored just to the RIGHT of the text (left:max(540px,50%)), so it sits against
   the text with a small gap and never overlaps it, and it is brought in from the page edge rather
   than flush right. On smaller viewports the left anchor holds, so the figure carries off the right
   edge (clipped by the stage's overflow) instead of crossing into the text. Bottom:0 keeps it on
   the seam where the star-field stage meets the fold. Stacks centred on phones. */
.hero-figure{position:absolute;left:max(540px,50%);right:auto;bottom:0;z-index:1;height:clamp(440px,86%,840px);pointer-events:none;display:flex;align-items:flex-end}
.hero-figure img{height:100%;width:auto;display:block;filter:drop-shadow(0 22px 40px rgba(0,0,0,.55))}
@media(max-width:760px){
  .stage{justify-content:flex-start;padding-top:48px}
  .hero-figure{position:static;left:auto;height:auto;margin:18px auto 0;max-width:260px;display:block}
  .hero-figure img{height:auto;width:100%}
  .intro-onstage .intro-grid{max-width:none}
}
@media(max-width:820px){
  .stage .hero-inner{padding:92px 22px 34px}
  .intro-onstage{padding:2px 0 50px}
  .intro-onstage .intro-panel{padding:0}
}

/* ---- a touch more air in the fold ---- */
.fold-sec{padding:104px 0 80px}
.fold-btns{gap:26px}
.fold-btn-text{padding:22px 26px 26px}

/* ============================================================
   WORK IN PROGRESS (2026-06-29): highlight cards borrowed from
   the fold styling (accent field, white text, thumbnail on top),
   set on a contrasting pale field so they pop. One solid colour,
   no gradients.
   ============================================================ */
.work-sec{background:var(--accent-soft);border-bottom:1px solid var(--rule);padding:104px 0 108px}
/* mirror the fold: centred kicker + big title-font headline + intro, then the cards */
.work-head{max-width:920px;margin:0 auto 8px;text-align:center}
.work-h{font-family:var(--font-head);font-weight:800;font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:-.01em;color:var(--ink);margin:6px 0 14px}
.work-intro{max-width:680px;margin:0 auto 40px;font-size:18px;color:var(--ink)}
.hcards{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.hcard{display:flex;flex-direction:column;background:var(--accent);border:none;border-radius:18px;
  overflow:hidden;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
.hcard:hover{transform:translateY(-4px);box-shadow:0 22px 48px color-mix(in srgb,var(--ink) 24%,transparent)}
.hcard--soon{cursor:default}
.hcard--soon:hover{transform:none;box-shadow:none}
.hcard-soon{margin-top:auto;padding-top:16px;font-family:var(--font-head);font-size:13.5px;letter-spacing:.02em;color:var(--on-accent);opacity:.62;font-weight:600}
.hcard-thumb{position:relative;display:block;aspect-ratio:1000/340;overflow:hidden;background:#9fb0b8;
  border-bottom:1.5px solid color-mix(in srgb,var(--on-accent) 22%,transparent)}
.hcard-thumb .ill{display:block;width:100%;height:100%}
.hcard-body{display:flex;flex-direction:column;flex:1;padding:24px 28px 28px}
.hcard-label{font-family:var(--font-head);font-weight:700;font-size:22px;line-height:1.14;
  letter-spacing:var(--tracking);color:var(--on-accent)}
.hcard-sub{color:var(--on-accent);opacity:.84;font-size:15.5px;line-height:1.56;margin-top:12px;margin-bottom:16px}
.hcard-cta{margin-top:auto;padding-top:16px;
  border-top:1px solid color-mix(in srgb,var(--on-accent) 26%,transparent);
  font-family:var(--font-head);font-size:13.5px;font-weight:600;color:var(--on-accent);letter-spacing:.02em}
.hcard-cta::after{content:" \2192"}
.hcard-cta{border-bottom:none}
.about-hcard .hcard-cta:hover{border-bottom:none}
@media(max-width:760px){.hcards{grid-template-columns:1fr}}

/* ============================================================
   ABOUT (2026-06-29 r4): styled like the "future of market
   research" fold, but the field is the TEXT colour (--ink) with
   the rest of the palette inverted around it (text + panels use
   --bg, which always contrasts with --ink). Centered header;
   three work-highlight cards as translucent light panels.
   ============================================================ */
.about-sec{background:var(--ink);padding:74px 0 84px}
/* header mirrors the fold's tag + headline, in the inverted (--bg) colour */
.about-head{max-width:920px;margin:0 auto 54px;text-align:center}
.about-sec .kicker{font-family:var(--font-head);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bg);opacity:.78;margin:0 0 14px}
.about-sec .kicker::after{display:none}
/* the externally-edited About head uses the fold's h2/sub; keep their colour inverted (--bg) so it reads on the ink band on every palette */
.about-sec .fold-h,.about-sec .fold-sub{color:var(--bg)}
.about-sec .lead-line{font-family:var(--font-head);font-weight:700;color:var(--bg);
  font-size:40px;line-height:1.1;letter-spacing:var(--tracking);margin:0 auto;max-width:24ch}

.about-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
/* link from the About head to the fuller positioning page (about.html); outlined chip on the dark About section */
.about-more{display:inline-block;margin-top:6px;font-family:var(--font-head);font-size:13.5px;letter-spacing:.02em;color:var(--bg);border:1px solid color-mix(in srgb,var(--bg) 45%,transparent);border-radius:8px;padding:9px 16px;transition:background .15s,color .15s}
.about-more:hover{background:var(--bg);color:var(--ink)}
.about-more::after{content:" \2192"}
.about-hcard{cursor:default;background:color-mix(in srgb,var(--bg) 8%,transparent);
  border:1.5px solid color-mix(in srgb,var(--bg) 22%,transparent)}
.about-hcard:hover{transform:translateY(-4px);
  background:color-mix(in srgb,var(--bg) 13%,transparent);box-shadow:0 20px 46px rgba(0,0,0,.34)}
.about-hcard .hcard-label{color:var(--bg);font-size:19px}
.about-hcard .hcard-sub{color:var(--bg);opacity:.82}
.about-hcard .hcard-cta{color:var(--bg)}
.about-photo{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:color-mix(in srgb,var(--bg) 14%,var(--ink));
  border-bottom:1.5px solid color-mix(in srgb,var(--bg) 20%,transparent)}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}
.about-photo.noimg::after{content:"Photo to come";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-family:var(--font-head);font-size:13px;
  letter-spacing:.06em;color:var(--bg);opacity:.5}
@media(max-width:860px){.about-cards{grid-template-columns:1fr}.about-sec .lead-line{font-size:28px}}

/* ============================================================
   SUB-SECTION POINT CARDS (2026-06-29): flip to the highlight
   treatment so they never sit dark-on-dark. Card = primary
   colour, bold text = the light on-accent colour. Applies on
   how-i-see-it / what-comes-next / audiences.
   ============================================================ */
.point{background:var(--accent);border-color:var(--accent)}
.point::before{background:var(--spark)}
.point h3{color:var(--on-accent)}
.point p{color:var(--on-accent);opacity:.86}
.point .ic{color:var(--on-accent)}
.point .num{background:var(--on-accent);color:var(--accent)}
.point .more{color:var(--on-accent)}
.point .more:hover{color:var(--spark)}
.point .cardfoot{border-top-color:color-mix(in srgb,var(--on-accent) 28%,transparent)}
/* keep the same minimum breathing room above the divider as below it */
.point p{margin-bottom:16px}
.point .cardfoot{margin-top:0;padding-top:16px}
/* how-i-see-it / what-comes-next: drop the contrasting spark stripe on the left of the point cards (2026-07-01, Jonathan: off-palette accent). Cards stay single-colour accent; the audiences page keeps its own .evidence treatment. */
#view .point::before,#next .point::before{display:none}

/* Channel/audiences page: the point cards carry long reading text, so inside the white
   evidence surface they render as LIGHT cards with dark text, not the accent-fill highlight
   (2026-06-29). White-on-its-own, readable on any palette. */
.evidence .point{background:#fff;border-color:rgba(0,0,0,.14)}
.evidence .point::before{background:#111}
.evidence .point h3{color:#15304a}
.evidence .point p{color:#1a1f24;opacity:1}
.evidence .point .num{background:#111;color:#fff}
.evidence .point .phead .status.live{color:#444;border-color:rgba(0,0,0,.28)}
.evidence .aud-take{color:#555;border-top-color:rgba(0,0,0,.14)}
.evidence .aud-artefact{background:#f5f6f8;border-color:rgba(0,0,0,.10)}
.evidence .aud-artefact li{color:#1a1f24}
.evidence .aud-spectrum{color:#555}
.evidence .aud-spectrum .aud-line{background:#cfd3d8;opacity:1}

/* ============ ICN: cyclable Phosphor icon treatments on the card heads (footer toggle) ============ */
.hcard-thumb,.fold-thumb{container-type:size}
.thumb-icn{position:absolute;inset:0;z-index:0;display:block;background:var(--accent-soft);overflow:hidden}
.thumb-icn .icn-scene{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.thumb-icn .icn-scene.s-d{display:flex}
.thumb-icn i{line-height:1}
body.icn-a .thumb-icn{background:var(--accent)}
body.icn-a .thumb-icn .icn-scene{display:none}
body.icn-a .thumb-icn .s-a{display:flex}
.thumb-icn .s-a .ti-tile{width:54cqh;height:54cqh;border-radius:20%;background:var(--card);display:flex;align-items:center;justify-content:center}
.thumb-icn .s-a .ti-tile i{font-size:30cqh;color:var(--accent)}
body.icn-b .thumb-icn{background:var(--accent-soft);background-image:radial-gradient(color-mix(in srgb,var(--accent) 22%,transparent) 1.6px,transparent 1.6px);background-size:18px 18px}
body.icn-b .thumb-icn .icn-scene{display:none}
body.icn-b .thumb-icn .s-b{display:flex}
.thumb-icn .s-b i{font-size:46cqh;color:var(--accent)}
body.icn-c .thumb-icn{background:var(--card)}
body.icn-c .thumb-icn .icn-scene{display:none}
body.icn-c .thumb-icn .s-c{display:flex;justify-content:flex-end;align-items:flex-end}
.thumb-icn .s-c .ti-ghost{font-size:155cqh;color:var(--accent);opacity:.15;transform:translate(12%,16%)}
body.icn-d .thumb-icn{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--ink)}
body.icn-d .thumb-icn .icn-scene{display:none}
body.icn-d .thumb-icn .s-d{display:flex}
.thumb-icn .s-d .ti-pbox{min-width:50cqh;height:50cqh;padding:0 16cqh;gap:13cqh;border:2px solid var(--ink);border-radius:8px;display:flex;align-items:center;justify-content:center}
.thumb-icn .s-d .ti-pbox i{font-size:24cqh;color:var(--ink)}
.thumb-icn .s-d .tk{position:absolute;width:12px;height:12px;border:0 solid var(--ink)}
.thumb-icn .s-d .tk.tl{top:10px;left:10px;border-top-width:2px;border-left-width:2px}
.thumb-icn .s-d .tk.br{bottom:10px;right:10px;border-bottom-width:2px;border-right-width:2px}
#icncode:hover{opacity:1 !important;color:var(--accent)}

/* ---- elevation reverted 2026-06-30: cards sit flat by default, drop shadow lifts them on hover (the original behaviour; hover rules live at .point:hover / .fold-btn:hover / .hcard:hover / .about-hcard:hover) ---- */
/* ---- ICN combined treatment: B dot grid + C corner ghost + D framed box icon (the default) ---- */
body.icn-x .thumb-icn{background:color-mix(in srgb,var(--accent) 18%,var(--card));background-image:radial-gradient(color-mix(in srgb,var(--accent) 34%,transparent) 1.7px,transparent 1.7px);background-size:18px 18px}
body.icn-x .thumb-icn .icn-scene{display:none}
body.icn-x .thumb-icn .s-d{display:flex}
body.icn-x .thumb-icn .s-d .tk{display:none}
body.icn-x .thumb-icn .s-d .ti-pbox{background:var(--card)}
.connect-photo{border-radius:14px;box-shadow:0 16px 38px rgba(0,0,0,.30)}

/* ---- shorter-form ideas strip (below the work cards, lighter than cards) ---- */
.ideas-h{font-size:30px;margin:0 0 8px}
.ideas-intro{max-width:var(--readw);color:var(--muted);font-size:18px;margin:0 0 22px}
.ideas-list{display:flex;flex-direction:column;gap:18px;max-width:var(--readw)}
.idea{border-left:3px solid var(--accent);padding:2px 0 2px 18px}
.idea h3{font-size:19px;margin:0 0 6px;color:var(--accent)}
.idea p{font-size:16.5px;line-height:1.55;margin:0;color:var(--ink)}