/* ============================================================
   Live Beyond — Portal shell (shared)
   Brand system sampled from LB_Colors.pdf. Never approximate.
   ============================================================ */
@font-face{font-family:'Mona Sans';src:url('assets/fonts/MonaSans.ttf') format('truetype');font-weight:300 800;font-display:swap}
@font-face{font-family:'Mona Sans Cond';src:url('assets/fonts/MonaSansCondensed-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Work Sans';src:url('assets/fonts/WorkSans-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Work Sans';src:url('assets/fonts/WorkSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  /* exact brand palette */
  --orange:#FF5F1F; --cream:#FCF4E8; --brown:#441C1C; --gold:#FFC931; --blue:#70CFFF; --pink:#FFAFB7;
  /* longevity-map level colours */
  --l1:#FF5F1F; --l2:#FFC931; --l3:#70CFFF; --lp:#441C1C; --lm:#9AA0A6;
  --ink:#441C1C; --muted:#8a756c; --line:rgba(68,28,28,.14); --line-strong:rgba(68,28,28,.26);
  --nav-h:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--cream);color:var(--ink);font-family:'Work Sans',system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.55}
/* HEIGHT:AUTO, OR THE HTML height ATTRIBUTE SQUASHES THE PICTURE.
   24 August 2026. Without this, any <img width="1600" height="903"> that CSS
   sizes to width:100% renders 724x903 — the people come out three metres tall
   with black bars above and below. Marek found it on the manifesto page.
   The width/height attributes must stay: they are what stops the page jumping
   while the picture loads. This is the line that makes them safe. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,92vw);margin:0 auto}
.mono{font-family:'Mona Sans',sans-serif}
h1,h2,h3{font-family:'Mona Sans Cond','Mona Sans',sans-serif;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;margin:0}
em{font-style:normal;color:var(--orange)}
.kick{font-family:'Mona Sans',sans-serif;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:var(--orange);margin:0 0 14px}

/* ============================================================
   GLOBAL HEADER  (injected by site.js)
   ============================================================ */
.gh{position:sticky;top:0;z-index:100;background:var(--orange);color:#fff}
.gh .row{display:flex;align-items:center;gap:22px;height:var(--nav-h)}
.gh .logo img{height:22px;width:auto}
.gh nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.gh nav a,.gh nav .navitem>button{
  font-family:'Mona Sans',sans-serif;font-weight:600;font-size:.86rem;letter-spacing:.01em;
  color:#fff;background:none;border:0;cursor:pointer;padding:9px 13px;border-radius:30px;
  display:inline-flex;align-items:center;gap:6px;transition:.15s;white-space:nowrap}
.gh nav a:hover,.gh nav .navitem>button:hover{background:rgba(68,28,28,.22)}
.gh nav a.on{background:var(--brown);color:var(--cream)}
.gh nav .navitem{position:relative}
.gh nav .navitem>button svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4;opacity:.7;transition:transform .18s}
.gh nav .navitem.open>button svg{transform:rotate(180deg)}
.gh .cta{background:var(--brown);color:var(--cream);padding:10px 18px;border-radius:30px;font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.86rem}
.gh .cta:hover{background:#5c2a2a}
.gh .burger{color:#fff}
/* mega dropdown */
.gh .mega{position:absolute;top:calc(100% + 8px);right:0;min-width:300px;background:var(--cream);color:var(--ink);
  border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 54px -22px rgba(68,28,28,.55);
  padding:12px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;display:grid;gap:2px}
.gh .navitem.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.gh .mega a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:11px;color:var(--ink)}
.gh .mega a:hover{background:#fff}
.gh .mega .md{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none}
.gh .mega b{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.9rem;display:block;line-height:1.15}
.gh .mega span{font-size:.78rem;color:var(--muted);display:block;margin-top:1px}
.gh .burger{display:none;margin-left:auto;background:none;border:0;color:var(--cream);cursor:pointer;padding:8px}
.gh .burger svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:200;background:var(--brown);color:var(--cream);
  transform:translateX(100%);transition:transform .26s ease;overflow-y:auto;padding:22px 26px 60px}
.drawer.open{transform:translateX(0)}
.drawer .top{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.drawer .top img{height:22px}
.drawer .close{background:none;border:0;color:var(--cream);font-size:2rem;line-height:1;cursor:pointer}
.drawer .grp{margin-top:22px;border-top:1px solid rgba(252,244,232,.16);padding-top:16px}
.drawer .grp>p{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.drawer a{display:flex;align-items:center;gap:11px;font-family:'Mona Sans',sans-serif;font-weight:600;font-size:1.05rem;padding:10px 0;color:var(--cream)}
/* A mark must stay visible whatever colour it carries.
   Marek, 24 August 2026: in the burger menu the marks beside "Marek Piotrowski" and
   "Where to get measured" were not there at all. They carry --lp, and --lp IS the
   drawer's own background (#441C1C). The ring below is put on the GROUND, not on the
   mark: no level colour is changed, and any level added to the nav later is safe here
   too — including one that happens to match whatever background it lands on. */
.drawer a .md{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(252,244,232,.5)}
.drawer .cta{display:inline-block;margin-top:24px;background:var(--orange);color:#fff;padding:13px 22px;border-radius:30px;font-family:'Mona Sans',sans-serif;font-weight:700}
@media(max-width:900px){
  .gh nav{display:none}
  .gh .burger{display:block}
}

/* ============================================================
   GENERIC SECTION / HERO / CARD PRIMITIVES
   ============================================================ */
.page-hero{padding:70px 0 44px;position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(2.6rem,6.6vw,5rem);line-height:.96}
.page-hero .sub{font-size:clamp(1.06rem,2vw,1.34rem);max-width:660px;margin:22px 0 0;color:#5f4a42}
.ribbon-div{height:26px;background-repeat:no-repeat;background-size:cover;background-position:center;margin:6px 0}

.section{padding:64px 0}
.section.tint{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* colourful section tints (brand colours, soft) */
.section.tint-blue{background:linear-gradient(180deg,rgba(112,207,255,.18),rgba(112,207,255,.08));border-top:1px solid rgba(112,207,255,.35);border-bottom:1px solid rgba(112,207,255,.35)}
.section.tint-gold{background:linear-gradient(180deg,rgba(255,201,49,.20),rgba(255,201,49,.08));border-top:1px solid rgba(255,201,49,.4);border-bottom:1px solid rgba(255,201,49,.4)}
.section.tint-pink{background:linear-gradient(180deg,rgba(255,175,183,.22),rgba(255,175,183,.09));border-top:1px solid rgba(255,175,183,.4);border-bottom:1px solid rgba(255,175,183,.4)}
.section.tint-orange{background:linear-gradient(180deg,rgba(255,95,31,.14),rgba(255,95,31,.05));border-top:1px solid rgba(255,95,31,.3);border-bottom:1px solid rgba(255,95,31,.3)}
.section-head{max-width:720px;margin:0 0 34px}
.section-head h2{font-size:clamp(1.8rem,4vw,2.8rem);line-height:1}
.section-head p{font-size:1.06rem;color:#5f4a42;margin:16px 0 0}

.stats{display:flex;gap:34px;flex-wrap:wrap;margin:30px 0 0}
.stats b{font-family:'Mona Sans',sans-serif;font-weight:800;font-size:1.7rem;display:block;line-height:1}
.stats span{font-size:.82rem;color:var(--muted);letter-spacing:.02em}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}

.tile{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}
a.tile:hover{transform:translateY(-4px);box-shadow:0 20px 40px -22px rgba(68,28,28,.5)}
.tile .spine{position:absolute;left:0;top:0;bottom:0;width:7px}
.tile h3{font-size:1.35rem;margin:0 0 8px}
.tile p{font-size:.95rem;color:#5f4a42;margin:0}
.tile .go{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.86rem;color:var(--orange);margin-top:16px;display:inline-flex;gap:6px;align-items:center}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.95rem;
  background:var(--orange);color:#fff;padding:14px 26px;border-radius:34px;transition:.15s;border:0;cursor:pointer}
.btn:hover{background:#ff7a44;transform:translateY(-2px)}
.btn.ghost{background:none;color:var(--ink);border:1.6px solid var(--line-strong)}
.btn.ghost:hover{border-color:var(--ink);background:none}
.btn.cream{background:var(--cream);color:var(--brown)}

/* longevity-map level spine helpers */
.lvl-l1{background:var(--l1)} .lvl-l2{background:var(--l2)} .lvl-l3{background:var(--l3)}
.lvl-lp{background:var(--lp)} .lvl-lm{background:var(--lm)}

/* ---- emotional layer ---- */
/* video player block */
.vid{position:relative;border-radius:22px;overflow:hidden;background:#1c0e0e;box-shadow:0 30px 70px -28px rgba(68,28,28,.65)}
.vid video{width:100%;display:block}
.vid .playcap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(180deg,rgba(35,14,14,.15),rgba(35,14,14,.55));cursor:pointer;transition:.2s}
.vid .playcap:hover{background:linear-gradient(180deg,rgba(35,14,14,.05),rgba(35,14,14,.45))}
.vid .playbtn{width:84px;height:84px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.7rem;box-shadow:0 14px 44px -8px rgba(255,95,31,.75);transition:transform .18s}
.vid .playcap:hover .playbtn{transform:scale(1.08)}
.vid .playcap span{font-family:'Mona Sans',sans-serif;font-weight:700;color:var(--cream);letter-spacing:.04em;font-size:.9rem;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.vid iframe{width:100%;aspect-ratio:16/9;display:block;border:0}

/* photo marquee (film strip) */
.marquee{overflow:hidden;position:relative;padding:6px 0}
.marquee .track{display:flex;gap:14px;width:max-content;animation:mq 55s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-card{position:relative;flex:none;width:300px;aspect-ratio:4/3;border-radius:16px;overflow:hidden;box-shadow:0 14px 34px -18px rgba(68,28,28,.55)}
.mq-card img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.mq-card:hover img{transform:scale(1.05)}
.mq-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:var(--cream);font-family:'Mona Sans',sans-serif;
  font-weight:600;font-size:.8rem;background:linear-gradient(180deg,transparent,rgba(35,14,14,.85))}

/* ===== SITE RULE: below-image photo captions — always LEFT-aligned, article style.
   Applies to article figures (.af figcaption), interview mosaics (.ivcolcap) and any
   figure marked class="cap". Does NOT touch overlay captions that sit ON the image
   (.mq-card / .chapter .ph). Keep new captions using one of these hooks so they inherit this. ===== */
.af figcaption,.ivcolcap,figure.cap figcaption,.lb-cap{
  font-family:'Mona Sans',sans-serif;font-weight:600;font-size:.82rem;
  color:#8a756c;margin:0;padding:9px 2px 0;text-align:left}

/* quest story chapters */
.chapter{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;margin-top:54px}
.chapter:nth-child(even){direction:rtl}
.chapter>*{direction:ltr}
@media(max-width:820px){.chapter{grid-template-columns:1fr}.chapter:nth-child(even){direction:ltr}}
.chapter .imgs{display:grid;gap:14px}
.chapter .imgs.two{grid-template-columns:1fr 1fr}
.chapter .ph{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 20px 46px -22px rgba(68,28,28,.55)}
.chapter .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.chapter .ph:hover img{transform:scale(1.04)}
.chapter .ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:var(--cream);
  font-family:'Mona Sans',sans-serif;font-weight:600;font-size:.78rem;background:linear-gradient(180deg,transparent,rgba(35,14,14,.82))}
.chapter .txt .loc{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.chapter .txt h3{font-size:clamp(1.5rem,3.2vw,2.2rem);margin:8px 0 12px}
.chapter .txt p{color:#5f4a42;font-size:1.02rem;margin:0}
.chapter .txt .qq{font-family:'Mona Sans',sans-serif;font-weight:600;color:var(--ink);border-left:4px solid var(--orange);padding:6px 0 6px 16px;margin:16px 0 0;font-size:1rem}

/* world route map */
.worldmap{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 20px 8px;overflow:hidden}
.worldmap svg{width:100%;height:auto;display:block}
.worldmap .stop{cursor:pointer}
.worldmap .stop circle{transition:r .15s}
.worldmap .stop:hover circle{r:11}
.worldmap .stop text{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:11px;fill:var(--brown);opacity:0;transition:.15s}
.worldmap .stop:hover text{opacity:1}

/* logo band */
.logo-band{display:flex;flex-wrap:wrap;gap:10px}
.logo-card{background:#fff;border:1px solid var(--line);border-radius:999px;min-height:0;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:9px;padding:8px 15px;transition:transform .15s}
.logo-card:hover{transform:translateY(-2px)}
.logo-card img{max-height:20px;max-width:70px;object-fit:contain;filter:grayscale(1) contrast(.9);opacity:.85;transition:.2s}
.logo-card:hover img{filter:none;opacity:1}
.logo-card .fb{font-family:'Mona Sans Cond','Mona Sans',sans-serif;font-weight:800;font-size:.9rem;color:var(--brown)}
.logo-card span{font-size:.75rem;color:var(--muted);text-align:center;font-family:'Mona Sans',sans-serif;font-weight:600;white-space:nowrap}
.partners-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.partners-head .section-head{margin:0}
.partners-head .btn{flex:none;white-space:nowrap;align-self:flex-end}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
/* A reveal must never be able to leave content invisible. 24 August 2026.
   Printing a page, and anybody browsing with reduced motion on, used to get blank
   bands where every .rv block should be - the observer never fires for them. */
@media print{.rv{opacity:1!important;transform:none!important;transition:none!important}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* coming-soon tag */
.soon-tag{display:inline-block;font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brown);background:var(--gold);padding:2px 6px;border-radius:20px;vertical-align:middle;margin-left:5px}
.coming-banner{background:var(--gold);color:var(--brown);text-align:center;font-family:'Mona Sans',sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.03em;padding:9px 14px}
.coming-banner b{text-transform:uppercase;letter-spacing:.1em;font-size:.7rem}

/* manifesto (what Live Beyond means) */
.manifesto{background:var(--brown);color:var(--cream);padding:70px 0}
.manifesto .big{font-family:'Mona Sans Cond','Mona Sans',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.02;max-width:22ch}
.manifesto .big em{color:var(--gold)}
.manifesto .cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:34px}
.manifesto .cols p{color:rgba(252,244,232,.82);font-size:1.06rem;margin:0}
.manifesto .cols b{color:var(--cream);font-family:'Mona Sans',sans-serif}
@media(max-width:640px){.manifesto .cols{grid-template-columns:1fr}}

/* world map of the quest */
.qmap{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;overflow:hidden}
.qmap svg{width:100%;height:auto;display:block}
.qmap .legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;font-size:.82rem;color:var(--muted)}
.qmap .legend span{display:inline-flex;align-items:center;gap:6px}
.qmap .legend i{width:9px;height:9px;border-radius:50%;background:var(--orange);display:inline-block}

/* photo tiles / two-shots */
.photo{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--cream)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.tall{aspect-ratio:3/4}.photo.wide{aspect-ratio:16/10}

/* value ladder */
.ladder{display:flex;flex-direction:column;gap:10px;counter-reset:step}
.rung{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;position:relative}
.rung .n{counter-increment:step;flex:none;width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;
  font-family:'Mona Sans',sans-serif;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.rung .n::before{content:counter(step)}
.rung b{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:1.02rem;display:block}
.rung p{margin:4px 0 0;font-size:.92rem;color:#5f4a42}
.rung.free .n{background:var(--l3);color:var(--brown)}

/* retreat poll */
.poll{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.poll .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:16px}
.poll button{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.95rem;border:1.6px solid var(--line);background:var(--cream);
  color:var(--ink);padding:16px;border-radius:14px;cursor:pointer;transition:.15s}
.poll button:hover{border-color:var(--orange)}
.poll button.pick{background:var(--orange);color:#fff;border-color:var(--orange)}
.poll .thanks{display:none;margin-top:14px;font-family:'Mona Sans',sans-serif;font-weight:600;color:var(--brown)}

/* article cards */
.artc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .18s,box-shadow .18s}
a.artc:hover{transform:translateY(-4px);box-shadow:0 18px 38px -20px rgba(68,28,28,.5)}
.artc .top{height:8px}
.artc .in{padding:22px 22px 24px}
.artc .dt{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.artc h3{font-size:1.16rem;line-height:1.12;margin:8px 0 0}
.artc .go{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.84rem;color:var(--orange);margin-top:14px;display:inline-block}

/* partners band */
.orgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.org{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;
  font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.9rem;color:var(--ink);min-height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.org span{font-family:'Work Sans',sans-serif;font-weight:300;font-size:.72rem;color:var(--muted)}

/* expert-page integration: their own sticky bars sit below the global header */
.topbar{top:var(--nav-h) !important}
.subnav{top:calc(var(--nav-h) + 60px) !important}
/* expert identity bar — just the name, CENTERED, in Mona Sans Condensed (brandbook narrow).
   Advisory-board pill sits beside the name; the Explore/back controls live in the grey sub-nav. */
.topbar .row{justify-content:center !important}
.topbar .brand.who2{display:flex;align-items:center;gap:14px;min-width:0;justify-content:center}
.topbar .brand.who2 .who-name{font-family:'Mona Sans Cond','Mona Sans',sans-serif;font-weight:800;color:var(--cream);
  font-size:1.9rem;letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}
.topbar .brand.who2 .adv-pill{flex:none;font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.56rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);border:1px solid rgba(112,207,255,.5);
  border-radius:30px;padding:6px 12px;line-height:1;white-space:nowrap}
@media(max-width:640px){.topbar .brand.who2 .who-name{font-size:1.35rem}.topbar .brand.who2 .adv-pill{font-size:.5rem;letter-spacing:.1em}}
/* Explore + back controls, moved into the grey sub-nav, pushed to the right */
.subnav .row{align-items:center}
.subnav .actions{margin-left:auto;display:flex;align-items:center;gap:14px;flex-shrink:0}
.subnav .back{color:var(--brown);opacity:.75;font-family:'Mona Sans',sans-serif;font-weight:600;font-size:.78rem}
.subnav .back:hover{color:var(--orange);opacity:1}
.subnav .explore-btn{color:var(--brown);border-color:var(--line)}
@media(max-width:640px){.subnav .actions .back{display:none}}
/* article scientist links + clickable byline (SEO + engagement) */
a.sci{color:var(--orange);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(255,95,31,.4);white-space:nowrap}
a.sci::after{content:"\2197";font-size:.78em;margin-left:2px;opacity:.7}
a.sci:hover{border-bottom-color:var(--orange);color:#e0500f}
a.byline{text-decoration:none;transition:.15s}
a.byline:hover{opacity:.85}
a.byline .go{display:inline !important;color:inherit;font-weight:700;font-size:.9em;margin-left:3px;vertical-align:baseline}
.qbox cite a{color:var(--orange)}

/* credibility strip — shrink the big gold label so phrases fit one line (not just short numbers) */
.cred .num{font-size:clamp(.95rem,1.9vw,1.35rem) !important;line-height:1.15 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cred .lab{font-size:.68rem !important;margin-top:6px !important}
.cred .grid{padding:30px 0 !important}
@media(max-width:640px){.cred .num{white-space:normal;font-size:1.05rem !important}}

/* ============================================================
   GLOBAL JOIN BAND (injected by site.js on every page)
   ============================================================ */
.gjoin{background:linear-gradient(120deg,rgba(255,95,31,.16),rgba(112,207,255,.12)),var(--brown);padding:64px 0}
.gjoin-card{display:grid;grid-template-columns:.85fr 1.15fr;background:var(--brown);border-radius:22px;
  overflow:hidden;box-shadow:0 34px 78px -34px rgba(0,0,0,.72)}
@media(max-width:820px){.gjoin-card{grid-template-columns:1fr}}
.gjoin-photo{position:relative;min-height:300px;background:#2b1c14}
.gjoin-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.gjoin-photo .cap{position:absolute;left:0;right:0;bottom:0;padding:36px 20px 16px;color:var(--cream);
  background:linear-gradient(transparent,rgba(24,10,10,.82));
  font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.8rem}
.gjoin-bd{padding:clamp(24px,3vw,38px);color:var(--cream);position:relative}
.gjoin-signet{width:34px;height:auto;margin:0 0 14px;opacity:1}
.gjoin-bd .kick{color:var(--gold);margin:0 0 10px}
.gjoin-bd h2{color:var(--cream);font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:.98}
.gjoin-bd h2 em{color:var(--gold)}
.gjoin-num{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.88rem;color:var(--orange);margin:11px 0 0}

.gjoin-gets{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:7px 18px}
@media(max-width:560px){.gjoin-gets{grid-template-columns:1fr}}
.gjoin-gets li{font-size:.86rem;line-height:1.35;color:rgba(252,244,232,.9);display:flex;gap:9px;align-items:flex-start}
.gjoin-gets li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none;margin-top:7px}

/* the unfold — shared by the join card and the number banner */
.lbfold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s ease}
.lbfold>div{overflow:hidden}
.lbfold.open{grid-template-rows:1fr}
.gjoin-more,.lbnum-peek{background:none;border:0;padding:10px 0 0;cursor:pointer;
  font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.79rem;display:inline-flex;align-items:center;gap:8px}
.gjoin-more{color:var(--gold)}
.gjoin-more:hover{color:var(--cream)}
.gjoin-more .cv,.lbnum-peek .cv{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .26s}
.gjoin-more[aria-expanded="true"] .cv,.lbnum-peek[aria-expanded="true"] .cv{transform:rotate(180deg)}
.gjoin .lbfold .in{margin-top:12px;padding-top:13px;border-top:1px dashed rgba(252,244,232,.26)}
.gjoin .lbfold .lbl{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 9px}
.gjoin .lbfold .gjoin-gets{margin-top:0}

.gjoin-form{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.gjoin-form input{flex:1 1 190px;font-family:'Work Sans',sans-serif;font-size:.95rem;padding:13px 16px;
  border:0;border-radius:12px;outline:none;color:var(--ink);min-width:0}
.gjoin-form input.full,.gjoin-form .full{flex-basis:100%}
.gjoin-form .btn{border-radius:30px;margin-top:2px;justify-content:center}
.gjoin-form .btn.full{width:100%}
.gjoin-form .done{display:none;flex-basis:100%;margin:8px 0 0;color:var(--gold);font-family:'Mona Sans',sans-serif;font-weight:600}
.gjoin-bd small{display:block;margin-top:12px;color:rgba(252,244,232,.55);font-size:.76rem;line-height:1.5}

/* ---------- the member-number banner: <div data-lb-number></div> ---------- */
.lbnum{background:radial-gradient(760px 320px at 84% -30%,rgba(255,201,49,.4),transparent 62%),var(--cream);
  border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,34px) clamp(22px,4vw,44px);margin:34px 0}
.lbnum-strip{display:grid;grid-template-columns:auto minmax(210px,1.05fr) minmax(320px,1.2fr);
  gap:clamp(18px,3vw,42px);align-items:center}
@media(max-width:900px){.lbnum-strip{grid-template-columns:1fr;text-align:center;justify-items:center}}
.lbnum .no{font-family:'Mona Sans Cond','Mona Sans',sans-serif;font-weight:800;
  font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:.82;color:var(--orange);white-space:nowrap;margin:0}
.lbnum .no small{display:block;font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.58rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.lbnum-signet{width:26px;height:auto;margin:0 0 10px}
.lbnum h3{font-size:clamp(1.2rem,2.5vw,1.75rem);line-height:1}
.lbnum .sub{margin:9px 0 0;font-size:.9rem;color:#5f4a42;max-width:44ch}
.lbnum-peek{color:var(--orange)}
/* the way to read the manifesto before joining - Marek, 24 August 2026.
   Quieter than the peek button beside it: this is a second door, not the main one. */
.lbnum-manifesto{display:inline-flex;align-items:center;min-height:44px;margin-left:22px;
  font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.86rem;color:var(--gold);
  text-decoration:none;border-bottom:1.5px solid rgba(255,201,49,.4)}
.lbnum-manifesto:hover{border-bottom-color:var(--gold)}
.gjoin-manifesto{margin:14px 0 0}
.gjoin-manifesto a{display:inline-flex;align-items:center;min-height:44px;
  font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.86rem;color:var(--gold);
  text-decoration:none;border-bottom:1.5px solid rgba(255,201,49,.4)}
.gjoin-manifesto a:hover{border-bottom-color:var(--gold)}
@media(max-width:560px){.lbnum-manifesto{margin-left:0;display:flex}}
.lbnum-peek:hover{color:var(--brown)}
.lbnum form{display:flex;gap:9px;flex-wrap:wrap;width:100%}
.lbnum form input{flex:1 1 150px;font-family:'Work Sans',sans-serif;font-size:.94rem;padding:13px 15px;
  border:1px solid rgba(68,28,28,.16);border-radius:12px;outline:none;color:var(--ink);background:#fff;min-width:0}
.lbnum form input.full,.lbnum form .full{flex-basis:100%}
.lbnum form .btn{border-radius:30px;justify-content:center}
.lbnum form .btn.full{width:100%}
.lbnum .lbfold .in{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.lbnum .lbfold .lbl{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 11px}
.lbnum-gets{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:8px 22px;text-align:left}
.lbnum-gets li{font-size:.86rem;line-height:1.35;color:#4f3a33;display:flex;gap:9px;align-items:flex-start}
.lbnum-gets li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none;margin-top:7px}

/* ============================================================
   GLOBAL FOOTER  (injected by site.js)
   ============================================================ */
.gf{background:var(--brown);color:var(--cream);padding:56px 0 34px;margin-top:20px}
.gf .top{display:grid;grid-template-columns:1.35fr repeat(5,1fr);gap:26px}
.gf .brandcol img{height:24px;margin-bottom:16px}
.gf .brandcol p{font-size:.95rem;color:rgba(252,244,232,.72);max-width:320px;margin:0}
.gf .def{font-family:'Mona Sans',sans-serif;font-weight:600;font-size:1rem;color:var(--cream);margin:18px 0 0;line-height:1.4}
.gf .def em{color:var(--gold)}
.gf h4{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.gf a{display:block;font-size:.92rem;color:rgba(252,244,232,.82);padding:5px 0}
.gf a:hover{color:var(--cream)}
.gf .base{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-top:40px;padding-top:22px;border-top:1px solid rgba(252,244,232,.16);font-size:.82rem;color:rgba(252,244,232,.6)}
@media(max-width:1180px){.gf .top{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.gf .top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gf .top{grid-template-columns:1fr}}
/* social icon links (shared — monochrome, inherit colour) */
.iconrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.iconlink{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.6px solid currentColor;color:inherit;transition:.16s}
.iconlink:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.iconlink svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.iconlink svg .fillmark{fill:currentColor;stroke:none}
.gf .iconrow{margin-top:20px;color:var(--cream)}
.gf .iconrow a.iconlink{display:inline-flex;padding:0;color:rgba(252,244,232,.85)}
.gf .iconrow a.iconlink:hover{color:#fff}

/* ---------- Video / interview placeholder (band top) ---------- */
.iv-video{margin:24px 0 8px;max-width:900px}
.iv-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background-size:cover;background-position:center 28%;cursor:default}
.iv-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,10,.05) 32%,rgba(20,12,10,.84))}
.iv-play{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:2;width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -10px rgba(0,0,0,.55)}
.iv-play svg{width:60px;height:60px;fill:var(--accent,#FF5F1F);stroke:var(--accent,#FF5F1F);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.iv-tag{position:absolute;left:16px;top:14px;z-index:2;font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 12px;backdrop-filter:blur(3px)}
.iv-note-in{position:absolute;left:18px;bottom:16px;z-index:2;margin:0;max-width:calc(100% - 36px);color:#fff;font-size:.96rem;line-height:1.42;background:rgba(0,0,0,.46);border:1px solid rgba(255,255,255,.42);border-radius:14px;padding:11px 16px;backdrop-filter:blur(4px)}
.iv-note-in b{color:#fff;font-weight:700}
@media(max-width:560px){.iv-note-in{font-size:.82rem;left:14px;bottom:12px;padding:9px 13px;max-width:calc(100% - 28px)}.iv-play{width:64px;height:64px}.iv-play svg{width:44px;height:44px}}

/* ---------- Connected face line (one row of faces, edge to edge) ---------- */
.faceline{display:flex;border-radius:999px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 40px -24px rgba(68,28,28,.5);background:var(--cream)}
.faceline a{flex:1 1 0;min-width:0;aspect-ratio:1/1;position:relative;display:block;overflow:hidden;transition:flex-grow .25s}
.faceline a img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;transition:transform .3s,filter .25s}
.faceline a:hover img{transform:scale(1.08)}
.faceline a::after{content:"";position:absolute;inset:auto 0 0 0;height:0;background:var(--orange);transition:height .18s}
.faceline a:hover::after{height:4px}
.faceline a.more{background:var(--brown);display:flex;align-items:center;justify-content:center}
.faceline a.more span{font-family:'Mona Sans Cond','Mona Sans',sans-serif;font-weight:800;font-size:clamp(.7rem,1.6vw,1.15rem);color:var(--gold);letter-spacing:-.01em}
.faceline a.more:hover{background:var(--orange)}
.faceline a.more:hover span{color:#fff}
@media(max-width:900px){.faceline a.h1{display:none}}
@media(max-width:700px){.faceline a.h2{display:none}}
@media(max-width:480px){.faceline a.h3{display:none};.faceline{border-radius:22px}}

/* ---------- FAQ / cross-link box (shared across Quest pages) ---------- */
.faqbox{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 30px;border-radius:18px;
  background:var(--cream);border:1px solid var(--line-strong);transition:box-shadow .18s,transform .18s}
.faqbox:hover{box-shadow:0 22px 46px -26px rgba(68,28,28,.55);transform:translateY(-2px)}
.faqbox .tx{display:block;min-width:0}
.faqbox .k{display:block;font-family:'Mona Sans',sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.7rem;color:var(--orange);margin-bottom:6px}
.faqbox .t{display:block;font-family:'Mona Sans Cond','Mona Sans',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(1.25rem,3vw,1.9rem);line-height:1;color:var(--brown)}
.faqbox .d{display:block;margin-top:9px;font-size:.94rem;color:#5f4a42;max-width:70ch}
.faqbox .ar{font-family:'Mona Sans Cond','Mona Sans',sans-serif;font-weight:800;font-size:2rem;color:var(--orange);flex:none}
.faqbox.dark{background:var(--brown);border-color:var(--brown)}
.faqbox.dark .k{color:var(--gold)}
.faqbox.dark .t{color:var(--cream)}
.faqbox.dark .d{color:rgba(252,244,232,.82)}
@media(max-width:560px){.faqbox{flex-direction:column;align-items:flex-start;gap:4px;padding:22px 22px 20px}.faqbox .ar{align-self:flex-end;margin-top:-6px}}

/* ---------- Longevity-Map hero dots: ONE ROW, bottom right ----------
   Marek preferred this to dots scattered over the photo, so it now applies to
   every expert page. These rules override the per-page absolute positions
   (inline left/top on each .hmdot) — !important beats the inline style. */
/* 26 August: the "Levels of Longevity Map … explores" label used to sit ABOVE
   the dots at bottom:112px — exactly where a level tooltip opens — so the two
   collided the moment somebody pressed a dot. The label now sits BELOW the
   dots, and the dots move up to make room. Shared, so all 107 expert pages and
   Marek's page behave the same. */
.hero-map{position:absolute!important;top:auto!important;left:auto!important;bottom:56px!important;
  right:max(calc((100vw - var(--maxw,1180px))/2 + 28px), 22px)!important;
  display:flex!important;align-items:center;justify-content:flex-end;gap:20px;
  padding-right:0!important;z-index:4!important;pointer-events:none}
.hero-map .hmdot{position:relative!important;left:auto!important;top:auto!important;
  transform:none!important;flex:none;margin:0!important}
@media(max-width:900px){.hero-map .hmdot.h-hide{display:none}}
@media(max-width:820px){.hero-map{gap:14px;bottom:22px!important}}
@media(max-width:560px){.hero-map{gap:11px}.hero-map .hmdot{width:17px!important;height:17px!important}}

/* the hero hint belongs beside the dots, not up in the text column */
.hero .hero-hint{position:absolute!important;left:auto;bottom:22px;z-index:4;
  right:28px!important;margin:0!important;padding:0!important;text-align:right;
  pointer-events:none;max-width:none}
.hero .hero-hint .hh-dot{display:none!important}
@media(max-width:820px){.hero .hero-hint{display:none!important}}
/* the hint is short now, so it hugs the right and sits directly over the dots */
.hero .hero-hint{width:auto;white-space:nowrap}

/* ---------- prev / next expert, on the grey sub-nav ----------
   Two bare chevrons sitting just left of the search field. No labels, no names,
   no circles. The brown bar above stays the expert's own name, nothing else. */
.topbar .row{position:relative}
/* the sub-nav's own `a` rules are more specific than these, hence the !important */
.pnavset{display:flex;align-items:center;gap:0;margin-right:6px;flex:none}
.pnav{display:flex !important;align-items:center;justify-content:center;
  width:22px !important;height:26px !important;padding:0 !important;margin:0 !important;
  border:0 !important;background:none !important;border-radius:0 !important;
  color:rgba(68,28,28,.42) !important;text-decoration:none;
  transition:color .18s,transform .18s;-webkit-tap-highlight-color:transparent}
.pnav svg{width:16px !important;height:16px !important;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pnav:hover,.pnav:focus-visible{color:var(--orange) !important}
.pnav.pnav-prev:hover{transform:translateX(-2px)}
.pnav.pnav-next:hover{transform:translateX(2px)}
/* if a page has no sub-nav the set falls back to the right end of the brown bar */
.topbar .pnavset{position:absolute;top:0;bottom:0;right:0;z-index:2;margin-right:0}
.topbar .pnav{color:rgba(252,244,232,.5) !important}
.topbar .pnav:hover,.topbar .pnav:focus-visible{color:var(--cream) !important}
@media(max-width:640px){.pnav{width:22px !important;height:22px !important}
  .pnav svg{width:14px !important;height:14px !important}}

/* ---------- mirrored hero shots (see the FLIP list in site.js) ----------
   The headline lives on the left, so these portraits are flipped to put the
   person on the right. Nothing else on the page is mirrored. */
body.hero-flip .hero .bg{transform:scale(-1.03,1.03) !important}


/* ---------- the people search: drop <div data-lb-search></div> into any page ----------
   Rendered and wired by site.js from window.LB_EXPERTS (load _site/experts.js on the page). */
/* the live search, same idea as the Explore-experts field on the expert pages */
.esearch{position:relative;flex:none;width:min(330px,100%)}
.esearch .fieldwrap{position:relative;display:flex;align-items:center}
.esearch svg{position:absolute;left:15px;width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;pointer-events:none}
.esearch input{width:100%;font-family:'Work Sans',sans-serif;font-size:.95rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:100px;padding:12px 16px 12px 40px;outline:none;transition:.16s}
.esearch input::placeholder{color:#a89a92}
.esearch input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,95,31,.13)}
.esearch .res{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;background:var(--cream);
  border:1px solid var(--line);border-radius:16px;box-shadow:0 26px 60px -22px rgba(68,28,28,.6);
  max-height:340px;overflow:auto;padding:7px;display:none}
.esearch.open .res{display:block}
.esearch .row{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:11px;color:var(--ink);text-decoration:none}
.esearch .row:hover,.esearch .row.cur{background:rgba(68,28,28,.07)}
.esearch .row img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:center 20%;flex:none}
.esearch .row b{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.88rem;display:block;line-height:1.15}
.esearch .row span{font-size:.72rem;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esearch .row .d{margin-left:auto;width:9px;height:9px;border-radius:50%;flex:none}
.esearch .all{display:block;text-align:center;padding:10px;margin-top:4px;border-top:1px solid var(--line);
  font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.82rem;color:var(--orange)}
.esearch .none{padding:20px;text-align:center;color:var(--muted);font-size:.88rem}
@media(max-width:760px){.esearch{width:100%}}

/* a section heading on the left, the people search on the right */
.ppl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-bottom:8px}
.ppl-head .section-head{margin:0}

/* ---------- the member-number banner as the closer, on brown ---------- */
.gjoin .lbnum.on-brown{
  background:radial-gradient(760px 320px at 86% -30%,rgba(255,201,49,.20),transparent 62%),
             rgba(0,0,0,.16);
  border:1px solid rgba(252,244,232,.16);color:var(--cream);margin:0}
.lbnum.on-brown .no{color:var(--gold)}
.lbnum.on-brown .no small{color:rgba(252,244,232,.6)}
.lbnum.on-brown h3{color:var(--cream)}
.lbnum.on-brown .sub{color:rgba(252,244,232,.8)}
.lbnum.on-brown .lbnum-peek{color:var(--gold)}
.lbnum.on-brown .lbnum-peek:hover{color:var(--cream)}
.lbnum.on-brown form input{border-color:transparent}
.lbnum.on-brown .lbfold .in{border-top-color:rgba(252,244,232,.22)}
.lbnum.on-brown .lbfold .lbl{color:var(--gold)}
.lbnum.on-brown .lbnum-gets li{color:rgba(252,244,232,.9)}

/* ---------- parked: built, named, not open yet ----------
   A door that does not open must not look like one. Set here, in the stylesheet,
   never on the element — a state written onto an element cannot be taken off. */
.mega .megaitem.parked,.drawer .grp .parked,.gf .parked,.gfoot .parked{opacity:.5;cursor:default;pointer-events:none}
.mega .megaitem.parked{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:12px}
.drawer .grp .parked,.gf .parked,.gfoot .parked{display:block;font-size:.92rem;color:rgba(252,244,232,.82);padding:5px 0}


/* ============================================================
   PHONE PASS 2026-08-21 — measured on all 159 pages at 390px.
   Every rule here is structural and lives in the stylesheet, never on
   the element. Each one says what it was measured at and what it fixes.
   ============================================================ */

/* 1. Nothing may be wider than the screen.
      Measured: book.html scrolled to 614px and marek/speaking to 473px.
      The off-canvas drawer is fixed and translated aside, but its children
      still pushed the document wide. This stops the whole page sliding. */
html,body{max-width:100%;overflow-x:hidden}

/* 2. The sub-navigation was 787px of links in a 390px screen, so the last
      third of it — including the previous/next arrows and Explore — simply
      could not be reached. It now scrolls sideways under the thumb instead
      of being cut off. The scrollbar is hidden; the content is not. */
@media(max-width:760px){
  .subnav .row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:2px}
  .subnav .row::-webkit-scrollbar{display:none}
  .subnav .row>*{flex:none}
  .subnav .actions{margin-left:auto}
}

/* 3. Tap targets. A thumb needs 44px; these were measured smaller on
      between 38 and 216 pages each. The mark keeps its size — only the
      area that answers a thumb grows. */
.pnav{min-width:44px !important;min-height:44px !important}
@media(max-width:640px){
  .pnav{width:44px !important;height:44px !important}
  .pnav svg{width:15px !important;height:15px !important}
}
.drawer .close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.subnav .explore-btn,.explore-btn{min-height:44px;display:inline-flex;align-items:center}
.burger{min-width:44px;min-height:44px}

/* 4. The dots on the hero map are 17px by design and must stay 17px.
      Instead of growing the dot, the invisible area around it grows —
      this is the only way to keep a dense map both pretty and pressable. */
.hero-map .hmdot{position:relative}
.hero-map .hmdot::after{content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%}

/* 5. Text under 11px. Only the two worst were touched — 10.6px is not
      readable at arm's length on a phone. The 10.9px and 11.5px labels
      are left alone: that is type, and type is Marek's to decide. */
@media(max-width:640px){
  .ch-badge{font-size:.75rem !important}
}

/* ---------- PHONE PASS — SECOND ROUND ----------
   The rest of the controls a thumb has to find. Measured at 390px across all
   159 pages: the header logo was 22px tall, the sub-navigation links 30px,
   the book and film badges 35px, the region poll buttons 30px and the social
   icons 20 to 42px. Everything below only grows the area that answers a
   press — no mark changes size.

   Deliberately NOT changed: a.sci, the expert names inside sentences. A link
   inside a line of text is exempt from the 44px rule, and padding it would
   push the lines apart for no gain. */
@media(max-width:760px){
  .gh .logo{min-height:44px;display:inline-flex;align-items:center}
  .subnav .row a,.subnav .row button{min-height:44px;display:inline-flex;align-items:center}
  .badge{min-height:44px;display:inline-flex;align-items:center}
  .poll button,.poll .opts button{min-height:44px}
  .iconlink,a:has(> svg){min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  input[type=text],input[type=email],input[type=tel],select,textarea,button[type=submit]{min-height:44px}
}

/* ---------- PHONE PASS — THIRD ROUND ----------
   The last group, and the largest: 1,251 standalone navigation links measured
   at 33px tall — the whole footer menu and every row of the drawer. These are
   not links inside a sentence; they are the menu, stacked, and a thumb has to
   land on them in the dark. Also the three fold toggles (24px and 39px) and
   the last form fields that came in one pixel short. */
@media(max-width:760px){
  .gf a,.gf .parked{min-height:44px;display:flex;align-items:center}
  .gf .iconlink{display:inline-flex}
  .drawer a{padding:13px 0;min-height:44px}
  .lbnum-peek,.gjoin-more,.tr-toggle,.explore-btn{min-height:44px;display:inline-flex;align-items:center}
  /* P-HUB-45 : NOT checkboxes and radios. A 20px square inside a 44px box is
     drawn halfway down it, a dozen pixels under the words it belongs to.
     The label below carries the tap target instead. */
  input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:44px}
}

/* The Longevity Advocate line in the footer — added 23 August 2026. It is on every
   page of the Hub, because this is where the whole thing started. */
.gf .brandcol .la{margin-top:12px;font-size:.9rem;line-height:1.55}
.gf .brandcol .la a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(255,201,49,.45)}
.gf .brandcol .la a:hover{color:#fff;border-bottom-color:#fff}


/* ------------------------------------------------------------------------
   44 PIXELS, ON A PHONE.  24 August 2026.
   Marek's law is a 44px tap target. Measured across 29 pages at 390px wide,
   these controls came up short: the stop chips on the Quest Map and its
   arrows, the Retreats chips and the List/Map switch, the Experts filters,
   the Calendar answers, the city buttons on Clinics and Communities, and the
   "Discover Live Beyond" link at the foot of every expert page.

   Only on a touch screen, so a desktop is untouched. A name inside a caption
   or a citation is deliberately NOT in here - it is an attribution inside
   running text, not a control, and 44px would wreck the line.

   The extra "body" in each selector is there because every one of these rules
   is written inside its own page's <style> block, which loads after this
   file; without it the page would win.
   ------------------------------------------------------------------------ */
@media (pointer:coarse){
  body .qm-strip button,
  body .qm-met a,
  body .cm-strip button,
  body .cm-hide,
  body .chip,
  body .seg button,
  body .vtoggle button,
  body .views button,
  body .kv-opts button,
  body .kv-opt,
  body .ex-filters button,
  body .lvchip,
  body .coming-banner a,
  body .dj-links a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  body .qm-ar{width:44px;height:44px}
  body .lb-belt a{display:inline-flex;align-items:center;min-height:44px}
  body .disc a,
  body a.disc-link{display:inline-flex;align-items:center;min-height:44px}
}


/* ---- "Start here" in the second-level menus.  24 August 2026, Marek's ask.
   The first entries in a menu are the ones we want somebody to open first. The dots
   are NOT used to say so - a level colour means a level of the Map and nothing else -
   so the group gets a warm ground, a small label, and a hairline under it. */
.mega-start{background:rgba(255,201,49,.13);border-radius:14px;padding:8px 8px 6px;
  margin:-4px -4px 6px;border:1px solid rgba(255,201,49,.30)}
.mega-lbl{margin:2px 0 6px 12px;font-family:'Mona Sans',sans-serif;font-weight:800;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#b07d12}
.dr-start{background:rgba(255,201,49,.12);border-radius:14px;padding:6px 8px 4px;
  margin:0 -8px 8px;border:1px solid rgba(255,201,49,.26)}
.dr-start .mega-lbl{margin:4px 0 2px 4px;color:var(--gold)}


/* THE HIDDEN ATTRIBUTE MUST WIN.  24 August 2026.
   The browser's own rule is [hidden]{display:none} - one of the weakest rules there is.
   Anything we give an explicit display to (.btn is inline-flex, .wish is flex) beats it,
   and then hidden silently stops working: the element is announced as hidden, treated as
   hidden by every script, and still drawn on the screen. It cost us the "read more
   wishes" button, which appeared to do nothing because all twelve cards were already
   showing. Put it back once, here, for everything. */
[hidden]{display:none!important}


/* ---- THE FORM STYLES ARE SHARED NOW.  24 August 2026.
   They lived inside contact.html's own <style>, so the partner form on communities.html
   rendered as raw browser inputs and the honeypot ("Leave this empty") was visible on the
   page. A form appears on three pages; its styling belongs in one place. Page-level rules
   still win, because this file loads first. ---- */
.cform{max-width:640px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px 30px 32px}
.cform .crow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cform input[type=text],.cform input[type=email],.cform textarea{width:100%;border:1.5px solid var(--line);
  border-radius:16px;padding:14px 18px;font-size:1rem;font-family:inherit;background:var(--cream);
  color:var(--ink);margin:0 0 12px;min-height:52px}
.cform textarea{border-radius:18px;min-height:120px;resize:vertical;margin-top:14px}
.cform input:focus,.cform textarea:focus{outline:0;border-color:var(--orange)}
.clab{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8B5E3C;margin:14px 0 10px}
.cchecks{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:0 0 6px}
.cchecks label,.cconsent,.optin{display:flex;align-items:flex-start;gap:10px;font-size:.97rem;
  color:#54413e;line-height:1.45;min-height:44px;padding:6px 0}
.cchecks input,.cconsent input,.optin input{margin-top:4px;width:20px;height:20px;accent-color:var(--orange);flex:none}
.cfine{font-size:.88rem;color:#7a6763;margin:16px 0 0;line-height:1.5}
/* the honeypot must be off the page, not merely small */
.hp{display:none!important}

.cform .cchecks:has(label.ticked){margin-bottom:22px}
.cform .btn.full{width:100%;justify-content:center}


/* ============================================================
   THE STANDARD FOUNDING CIRCLE SIGN-UP.
   Moved here from index.html, 24 August 2026. It was page-local,
   so every other page that copied the markup got raw browser
   inputs and a permanently visible "Almost in!" line — the
   .done rule lived in index.html and nowhere else. Marek found
   it on the manifesto. A form used on more than one page belongs
   in the shared stylesheet.
   ============================================================ */
.signup{background:var(--brown);color:var(--cream);border-radius:22px;padding:30px}
.signup h3{color:var(--cream);font-size:1.5rem}
.signup form,form.signup{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.signup input,form.signup input{flex:1 1 200px;font-family:'Work Sans',sans-serif;font-size:1rem;
  padding:13px 15px;border:0;border-radius:30px;outline:none;min-height:48px}
.signup input:focus-visible,form.signup input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.signup .done,form.signup .done{display:none;flex-basis:100%;margin:8px 0 0;color:var(--gold);
  font-family:'Mona Sans',sans-serif;font-weight:600}
.signup small{display:block;margin-top:12px;color:rgba(252,244,232,.6);font-size:.78rem}
.fc-fine{font-size:.78rem;color:var(--muted);margin:12px 0 0}
/* inside the white module the form is not its own card — index.html's page CSS
   never had to say this because .signup lived only there. 24 August 2026. */
.fc-form form.signup{background:none;padding:0;border-radius:0;margin:0}
.fc-form form.signup input{border:1.6px solid var(--line);background:#fdfaf5;flex:1 1 170px}
.fc-form form.signup input.email{flex-basis:100%}
.fc-form form.signup button{flex-basis:100%;margin-top:2px}
.fc-form form.signup .done{color:var(--brown)}
.fc-sig{margin:16px 0 0;font-family:'Mona Sans',sans-serif;font-weight:800;color:var(--brown)}
.fc-sig span{display:block;font-weight:500;font-size:.82rem;color:var(--muted)}


/* ============================================================
   THE REGULAR FOUNDING CIRCLE MODULE.
   Lifted out of index.html, 24 August 2026, on Marek's word:
   "just insert the regular founding circle module". It was
   page-local, so the manifesto's copy of the markup rendered as
   naked browser inputs with the "Almost in!" line permanently
   showing. A module used on more than one page belongs here.
   ============================================================ */
.fc-card{display:grid;grid-template-columns:1.02fr .98fr;gap:0;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 30px 64px -34px rgba(68,28,28,.42);margin-top:22px}
.fc-form{padding:clamp(24px,3vw,40px);position:relative}
.fc-signet{position:absolute;top:22px;right:22px;width:66px;height:66px;opacity:1}
.fc-k{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin:0}
.fc-form h3{font-family:'Mona Sans',sans-serif;font-weight:800;font-size:clamp(1.6rem,3vw,2.15rem);color:var(--brown);margin:8px 0 6px;text-transform:none;letter-spacing:-.01em}
.fc-count{font-family:'Mona Sans',sans-serif;font-weight:800;color:var(--orange);font-size:1.06rem;margin:0 0 12px}
.fc-ask{font-size:.98rem;color:#5f4a42;margin:0 0 16px}
.fc-gets{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 16px}
.fc-gets li{position:relative;padding-left:25px;font-size:.9rem;color:var(--brown);line-height:1.34;font-weight:600}
.fc-gets li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='3.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%2012.5l4%204%208-9'/%3E%3C/svg%3E") center/10px 10px no-repeat}
.fc-gets li::after{content:none}
.fc-form form{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.fc-form input{flex:1 1 170px;font-family:'Work Sans',sans-serif;font-size:1rem;padding:13px 16px;border:1.6px solid var(--line);border-radius:30px;outline:none;background:#fdfaf5}
.fc-form input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,95,31,.12)}
.fc-form input.email{flex-basis:100%}
.fc-form button{flex-basis:100%;margin-top:2px}
.fc-form .done{display:none;flex-basis:100%;margin:8px 0 0;color:var(--brown);font-family:'Mona Sans',sans-serif;font-weight:600}
.fc-fine{font-size:.78rem;color:var(--muted);margin:12px 0 0}
.fc-sig{margin:16px 0 0;font-family:'Mona Sans',sans-serif;font-weight:800;color:var(--brown)}
.fc-sig span{display:block;font-weight:500;font-size:.82rem;color:var(--muted)}
@media(max-width:820px){.fc-card{grid-template-columns:1fr}}
@media(max-width:560px){.fc-gets{grid-template-columns:1fr}}


/* ============================================================
   PEOPLE WE MET AT AN INSTITUTION.
   Lifted out of buck-institute/index.html, 24 August 2026, on
   Marek's word: "I like how we present the people we met at this
   institution — present it the same way on Oxford and NUS."
   Small square faces, name, one line, a link out. Much lighter
   than a tall photo card, and it reads as a list of people
   rather than a gallery.
   ============================================================ */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px;max-width:840px}
.pcard{display:flex;gap:16px;align-items:center;border:1px solid var(--line);border-radius:18px;
  padding:16px;background:#fff;text-decoration:none;transition:box-shadow .2s,transform .2s}
.pcard:hover{box-shadow:0 16px 34px -20px rgba(26,16,20,.4);transform:translateY(-2px)}
.pcard img{width:80px;height:80px;border-radius:14px;object-fit:cover;flex:none}
.pcard b{font-family:'Mona Sans',sans-serif;font-size:1.1rem;color:var(--brown);display:block}
.pcard .r{font-size:.86rem;color:#5f4a42;margin:3px 0 4px;line-height:1.35}
.pcard .go{font-size:.82rem;color:#b98a12;font-weight:700}
@media(max-width:760px){.people{grid-template-columns:1fr}}
@media (pointer:coarse){.pcard{min-height:44px}}


/* ============================================================
   PLACES THIS PAGE MENTIONS.
   Added 24 August 2026: Marek found that an expert page could
   name an institution that has its own page here and never link
   to it — Nathan Cheng and the Longevity Biotech Fellowship.
   Measured across the whole Hub: 21 pages, 0 linked.
   The label is deliberately "places this page mentions" and not
   "where they work": Nir Barzilai's page names NUS because we
   filmed him there, and he does not work there. A navigation
   link must not become an affiliation claim.
   ============================================================ */
.alsohere{border-top:1px solid var(--line);margin:34px 0 0;padding:22px 0 4px}
.alsohere .k{font-family:'Mona Sans',sans-serif;font-weight:800;font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;color:#b98a12;margin:0 0 4px}
.alsohere p.s{margin:0 0 14px;font-size:.92rem;color:var(--muted);font-weight:300}
.alsohere .row{display:flex;flex-wrap:wrap;gap:10px}
.alsohere a{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;
  border:1.6px solid var(--line);border-radius:30px;background:#fff;text-decoration:none;
  font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.94rem;color:var(--brown);
  transition:.15s}
.alsohere a:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
.alsohere a::after{content:"\2197";color:#b98a12;font-weight:800}
.alsohere a:hover::after{color:var(--orange)}


/* ============================================================
   FRIENDS IN THE COMMON MISSION.
   The closing box every institution page ends on. Lifted out of
   buck-institute/index.html, 24 August 2026, on Marek's word:
   "can we do the same box with NUS and with Oxford so that we
   have one way we present all the institutions."
   ============================================================ */
.partner{background:linear-gradient(120deg,rgba(255,201,49,.14),rgba(255,95,31,.08)),var(--brown);
  color:var(--cream);border-radius:24px;padding:clamp(26px,4vw,44px);text-align:center;margin-top:30px}
.partner h2{text-transform:none;color:var(--cream)}
.partner .addr{font-family:'Mona Sans',sans-serif;font-weight:600;font-size:.92rem;
  color:rgba(252,244,232,.9);margin-top:14px}
.soc-row{display:flex;gap:10px;margin-top:16px;justify-content:center;flex-wrap:wrap}
.soc-row a{width:44px;height:44px;border:1px solid rgba(252,244,232,.45);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--cream);transition:.2s}
.soc-row a:hover{background:var(--cream);color:var(--brown);border-color:var(--cream)}
.soc-row svg{width:19px;height:19px}

/* ==========================================================
   P-HUB-01 · 24 August 2026 · THE MARK MAY NEVER SIT ON TYPE
   .fc-signet is 66px, absolute, top-right of .fc-form. At 390px the heading
   wrapped under it and the signet covered the last word of "Come build this
   with us" — on the sign-up card, which is the conversion moment. The space is
   reserved by the CARD so the mark itself is untouched and any heading added
   here later is safe. .fc-card raises the specificity above the page-local
   copies of .fc-form h3 in index.html and community.html.
   ========================================================== */
.fc-card .fc-form .fc-k,
.fc-card .fc-form h3{padding-right:96px}
@media(max-width:560px){
  .fc-card .fc-form .fc-k,
  .fc-card .fc-form h3{padding-right:84px}
}

/* ==========================================================
   P-HUB-01 · 24 August 2026 · THE WORDS CARRY THEIR OWN GROUND
   At 390px the hero lead paragraph landed on two printed T-shirts and two
   texts fought each other. Four readers mentioned it; two said it was where
   they nearly left. The scrim goes on the SECTION, not on the paragraph and
   not on the photograph, so any hero picture used here later is readable.
   Desktop is left exactly as it was.
   ========================================================== */
@media(max-width:820px){
  .home-hero{isolation:isolate}
  .home-hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(35,14,14,.10) 0%,rgba(35,14,14,.46) 22%,rgba(35,14,14,.74) 44%,rgba(35,14,14,.90) 66%,rgba(35,14,14,.96) 100%)}
  .home-hero>*{position:relative;z-index:1}
}

/* ==========================================================
   P-HUB-08 · IN MEMORIAM · 24 August 2026
   For an expert page whose subject has died. It sits above everything else on
   the page so that nobody reads three paragraphs of the present tense first.
   No orange, no gold, no kicker in capitals: this is the one band on the Hub
   that is not selling anything. The rule lives here rather than on the page
   because if it is ever needed again nobody should have to design it on the day.
   ========================================================== */
.memoriam{background:#3a1717;color:var(--cream);padding:34px 0 32px;border-bottom:1px solid rgba(252,244,232,.16)}
.memoriam .wrap{max-width:760px}
.memoriam .lab{font-family:'Mona Sans',sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(252,244,232,.5);margin:0 0 12px}
.memoriam h2{font-family:'Mona Sans Cond','Mona Sans',sans-serif;font-weight:800;text-transform:none;
  letter-spacing:-.01em;font-size:clamp(1.35rem,3.4vw,1.9rem);line-height:1.12;color:var(--cream);margin:0 0 14px}
.memoriam p{font-size:1rem;line-height:1.62;color:rgba(252,244,232,.86);margin:0 0 .9em;max-width:60ch}
.memoriam p:last-child{margin-bottom:0}
.memoriam .dates{font-family:'Mona Sans',sans-serif;font-weight:600;color:rgba(252,244,232,.6);font-size:.9rem}
@media(max-width:560px){.memoriam{padding:26px 0 24px}}

/* ==========================================================
   P-HUB-10 · THE ADDRESS BLOCK · 24 August 2026
   Role addresses, written plainly. A partner who cannot forward you to a
   colleague is a partner you have lost, and two readers were lost exactly
   there. The rule is here rather than on the page so the same block can sit
   on contact, support and anywhere else it is needed.
   ========================================================== */
.addr{border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:18px 0 0;background:#fff}
.addr .lbl{font-family:'Mona Sans',sans-serif;font-weight:700;font-size:.63rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.addr a{display:flex;align-items:baseline;gap:10px;min-height:44px;padding:6px 0;
  font-family:'Mona Sans',sans-serif;font-weight:700;font-size:1rem;color:var(--orange);
  border-bottom:1px solid var(--line);text-decoration:none;flex-wrap:wrap}
.addr a:last-of-type{border-bottom:0}
.addr a span{font-family:'Work Sans',sans-serif;font-weight:300;font-size:.88rem;color:var(--muted)}
.addr .note{font-size:.82rem;color:var(--muted);margin:10px 0 0;line-height:1.5}

/* ===== P-HUB-11 : the Founding Circle, one shape everywhere ================
   The photo is a 16:9 band cropped once, in Python, around verified faces —
   the CSS must never crop it a second time, so no height and no object-fit
   here. That double crop is what cut Alek's face in half last time. */
.fcx{padding:34px 0 64px}
.fcxcard{background:#fff;border:1px solid var(--line,rgba(68,28,28,.14));border-radius:22px;
  overflow:hidden;box-shadow:0 26px 56px -30px rgba(68,28,28,.5);max-width:880px;margin:0 auto}
.fcxhero{width:100%;height:auto;display:block}
.fcxbd{padding:28px 30px 32px;max-width:760px;margin:0 auto}
.fcxseal{text-align:center;margin:0 0 16px}
.fcxseal img{width:100px;height:100px;margin:0 auto;display:block}
.fcxseal span{display:block;margin-top:12px;font-family:'Mona Sans',system-ui,sans-serif;font-weight:700;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:#C2430D}
.fcx h2{font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;text-transform:none;
  font-size:clamp(1.35rem,3vw,1.9rem);line-height:1.08;margin:0 0 11px;letter-spacing:-.012em}
/* .signup is a brown box everywhere else on the Hub. Inside this card it is not a
   box at all — the card is the box. Structural, in the stylesheet, never inline. */
.fcxbd form.fcxform.signup{background:none;color:inherit;border-radius:0;padding:0;margin:0;display:block}
.fcxbd form.fcxform.signup input{flex:none;font-family:inherit}
.fcxbd form.fcxform.signup .done{color:var(--brown);flex-basis:auto}
.fcxbd form.fcxform.signup small{color:rgba(68,28,28,.6)}
.fcxwhy{font-size:1rem;line-height:1.55;margin:0 0 16px}
.fcxwhy b{font-weight:600}
ul.fcxgets{list-style:none;padding:0;margin:0 0 18px}
ul.fcxgets li{display:flex;gap:11px;align-items:flex-start;line-height:1.45;margin:0 0 10px;font-size:1rem}
ul.fcxgets .tk{flex:none;width:21px;height:21px;border-radius:50%;background:#FF5F1F;color:#fff;
  font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;font-size:.7rem;display:flex;
  align-items:center;justify-content:center;margin-top:3px}
.fcxfields{display:grid;grid-template-columns:1fr 1.25fr;gap:10px;margin:0 0 10px}
.fcxform input[type=text],.fcxform input[type=email]{width:100%;min-height:54px;padding:15px 19px;
  border:1.6px solid var(--line,rgba(68,28,28,.14));border-radius:30px;background:#FDFAF5;
  font:inherit;font-size:1rem;color:var(--brown,#441C1C)}
.fcxgo{width:100%;min-height:58px;border:0;border-radius:30px;cursor:pointer;background:#FF5F1F;
  color:#fff;font-family:'Mona Sans',system-ui,sans-serif;font-weight:700;font-size:1.16rem;padding:17px 22px}
.fcxgo:hover{background:#E8500F}
.fcxfine{margin:12px 0 0;font-size:.87rem;line-height:1.55;color:rgba(68,28,28,.66)}
.fcxfine b{color:var(--brown,#441C1C);font-weight:600}
a.fcxmore{display:inline-block;margin:10px 0 0;font-family:'Mona Sans',system-ui,sans-serif;
  font-weight:700;font-size:.92rem;color:#C2430D;text-decoration:underline;
  text-underline-offset:3px;padding-block:11px}
.fcxform .done{display:none;margin:12px 0 0;font-size:.9rem;line-height:1.5}
.fcxform.sent .done{display:block}
@media(max-width:640px){
  .fcxbd{padding:24px 20px 28px}
  .fcxfields{grid-template-columns:1fr}
}

/* P-HUB-12 : the three things, and the door to the rest. The ten-item list ran
   in two columns; three things read better as one, at reading size. */
.fc-gets.fc-short{grid-template-columns:1fr;gap:11px;margin-bottom:14px}
.fc-gets.fc-short li{font-size:.97rem;font-weight:500;line-height:1.45;padding-left:29px}
.fc-gets.fc-short li b{font-weight:700}
.fc-gets.fc-short li::before{width:19px;height:19px;top:1px;background-size:12px 12px}
.fc-else{margin:0 0 16px}
.fc-else a{font-family:'Mona Sans',system-ui,sans-serif;font-weight:700;font-size:.92rem;
  color:#C2430D;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding-block:11px}

/* P-HUB-13 : the seal — the signet big and centred, the words under it. Registered
   artwork, recoloured only, never redrawn. The old 66px corner mark is gone. */
.fc-seal{text-align:center;margin:0 0 16px}
.fc-seal img{width:100px;height:100px;margin:0 auto 12px;display:block}
.fc-seal span{display:block;font-family:'Mona Sans',system-ui,sans-serif;font-weight:700;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:#C2430D}
.fc-form h3{text-align:center;text-transform:none;font-family:'Mona Sans',system-ui,sans-serif;
  font-weight:800;letter-spacing:-.012em}
.fc-count{font-family:'Mona Sans',system-ui,sans-serif;font-weight:600;color:rgba(68,28,28,.62);
  font-size:.9rem;margin:0 0 14px;text-align:center}

/* P-HUB-18 : the rest of what the Circle gets, opening in place.
   A native <details> - no script, so it also works in a page opened from disk. */
.fcxmore,.fc-more{border:0;background:none;margin:14px 0 0;padding:0}
.fcxmore>summary,.fc-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:9px;min-height:44px;font-family:'Mona Sans',system-ui,sans-serif;font-weight:700;font-size:.92rem;
  color:#C2430D;text-decoration:underline;text-underline-offset:3px;-webkit-tap-highlight-color:transparent}
.fcxmore>summary::-webkit-details-marker,.fc-more>summary::-webkit-details-marker{display:none}
.fcxmore>summary:after,.fc-more>summary:after{content:"";width:8px;height:8px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.fcxmore[open]>summary:after,.fc-more[open]>summary:after{transform:rotate(-135deg) translate(-2px,-2px)}
ul.fcxrest,ul.fc-rest{list-style:none;margin:10px 0 2px;padding:14px 16px;border-radius:14px;
  background:#FDF6EC;border:1px solid var(--line);display:grid;gap:9px}
ul.fcxrest li,ul.fc-rest li{position:relative;padding-left:22px;font-size:.93rem;line-height:1.45;
  color:var(--brown)}
ul.fcxrest li:before,ul.fc-rest li:before{content:"";position:absolute;left:2px;top:.55em;
  width:7px;height:7px;border-radius:50%;background:#FF5F1F}
a.fcxman,.fc-else a{display:inline-block;margin:12px 0 0;font-family:'Mona Sans',system-ui,sans-serif;
  font-weight:700;font-size:.92rem;color:#C2430D;text-decoration:underline;
  text-underline-offset:3px;padding-block:11px}

/* P-HUB-22 : the pointer to the one explanation of NPC. Quiet - it sits inside
   a sentence, so it takes the sentence's own colour and adds only a rule. */
a.npclink{color:inherit;font:inherit;text-decoration:underline;
  text-decoration-color:rgba(68,28,28,.34);text-decoration-thickness:1px;
  text-underline-offset:3px;padding-block:11px;margin-block:-11px;display:inline}
a.npclink:after{content:"\2192";margin-left:6px;color:#C2430D;font-weight:700;
  display:inline-block;text-decoration:none}
a.npclink:hover{text-decoration-color:var(--brown)}

/* P-HUB-27 : a link inside the copyright SENTENCE is not a menu item.
   .gf a is display:flex,min-height:44px for the footer columns; that rule was
   breaking the sentence into three lines. Inline here, hit area from padding. */
.gf .base a{display:inline;min-height:0;padding:6px 0;margin:-6px 0;
  color:rgba(252,244,232,.82);text-decoration:underline;
  text-decoration-color:rgba(252,244,232,.35);text-underline-offset:3px}
.gf .base a:hover{color:var(--cream);text-decoration-color:var(--cream)}
.gf .base span{display:block}

/* P-HUB-36 : the play mark, drawn rather than typed. U+25B6 is not in Mona
   Sans, so an iPhone drew it as a blue emoji tile. currentColor keeps it the
   colour of the words beside it, in every state, without a rule per state. */
.tri{display:inline-block;width:0;height:0;vertical-align:-.02em;
     border-left:.60em solid currentColor;border-top:.34em solid transparent;
     border-bottom:.34em solid transparent;margin-right:.40em}

/* P-HUB-37 : the soon tag stays a pill, on the title line */
.gh .mega b{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gh .mega .soon-tag,.drawer .soon-tag,.gf .soon-tag{display:inline-block;width:auto;flex:none;
  margin-top:0;font-size:.52rem;line-height:1.5;color:var(--brown);background:var(--gold)}
.drawer a .soon-tag{margin-left:auto}
.gf a .soon-tag{margin-left:6px}

/* P-HUB-38 : 44px under every thumb */
/* -- links that carry no background: grow the box, keep the words still -- */
.gf .top div a,
nav.subnav .wrap a,
.sig a,
.lb-belt .wrap a{padding-top:10px;padding-bottom:10px;margin-top:-10px;margin-bottom:-10px}

/* -- anything drawn as a pill, a circle or a border: an invisible target -- */
.badges .badge::after,
.tr-toggle::after,.iconlink::after,.hero-social a::after,.psoc a::after,
.gh .logo::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px)}
.badges .badge,.tr-toggle,.iconlink,
.hero-social a,.psoc a,.gh .logo{position:relative}
/* the chips sit in wrapped rows 8px apart, so an invisible 44px box would
   overlap the row above and steal its taps - measured. They grow for real. */
.chips .chip,.views button{min-height:44px}
.opts button{min-height:44px}


/* P-HUB-45 : a tick box sits on the FIRST line of its label, and the label is
   the tap target. Written once here so every form on the Hub reads the same. */
.ints label,.optin,label.optin,.cform .ints label,.supform .ints label{
  display:grid;grid-template-columns:20px 1fr;column-gap:12px;align-items:start;
  padding:5px 0;min-height:44px;line-height:1.45;cursor:pointer}
.ints label input[type=checkbox],.optin input[type=checkbox],
.cform .ints label input[type=checkbox],.supform .ints label input[type=checkbox],
.ints label input[type=radio],.optin input[type=radio]{
  width:20px;height:20px;min-height:0;margin:0;align-self:start;
  margin-top:calc((1.45em - 20px) / 2);accent-color:var(--orange);flex:none}
@media(max-width:760px){
  .ints,.supform .ints,.cform .ints{gap:4px}
  .ints label,.optin,label.optin{padding:4px 0;column-gap:11px}
  /* the two cards on the contact page stop drifting apart */
  .ct-lay{gap:14px}
  .ct-lay .addr{margin-top:0}
}

/* P-HUB-47 : no underline on a standalone link - a drawn diagonal arrow instead. */

a.fcxmore,a.fcxman,.fc-else a,.addr a{text-decoration:none !important;border-bottom:0 !important;box-shadow:none !important}

  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat}

/* P-HUB-48 : two buttons that wrap onto separate lines must not touch. The row
   gap only ever applied sideways, so on a phone they sat on top of each other
   on six pages. And the pronunciation of a word is one word. */
.hero-cta,.film-cta,.ev-cta,.cta-row,.btnrow,.btns,.two-btns,
.hero .cta-wrap,.lb-cta,.pcta{display:flex;flex-wrap:wrap;gap:12px}
.def-head .ipa,.ipa{white-space:nowrap;display:inline-block}
@media(max-width:760px){
  .hero-cta,.film-cta,.ev-cta,.cta-row,.btnrow,.btns,.two-btns,.lb-cta,.pcta{gap:12px}
  .def-head{line-height:1.25}
}

/* P-HUB-59 : the gold line in the footer, deleted. Marek, 25 August 2026 -
   "just delete the line". .gf a is display:block (and display:flex, 44px, on a
   phone), so a border-bottom on a link inside a SENTENCE paints across the whole
   paragraph and strikes through the line underneath. The colour was doing the
   affordance work anyway. Hit area comes from padding, as in P-HUB-27. */
.gf .brandcol .la a,
.gf .brandcol .la a:hover{
  display:inline;min-height:0;padding:6px 0;margin:-6px 0;
  border-bottom:0 !important;box-shadow:none !important;text-decoration:none !important}
.gf .brandcol .la a{color:var(--gold)}
.gf .brandcol .la a:hover{color:#fff}

/* P-HUB-62 : the expert hero is 94vh, and on a phone that means the browser
   scales the picture until only 28% of the frame is visible - which is why
   people were vanishing off the side of their own page, or having their face
   cut in half. Measured on a 390px phone with a 2000x1125 still:
       94vh  ->  28% of the frame
       68svh ->  38% of the frame
   A shorter hero shows more of the photograph AND puts the words nearer the
   thumb. Only .hero, so the home and film heroes (P-HUB-57 / P-HUB-58) are
   untouched. */
@media(max-width:600px){
  .hero{min-height:68svh !important}
}
@media(max-width:600px) and (max-height:640px){
  .hero{min-height:74svh !important}
}

/* P-HUB-63 : DRAW THE MARK, NEVER TYPE IT — the second time this has bitten.
   U+2197 is not in Mona Sans and is only partly in our Work Sans build, so an
   iPhone hands it to the colour emoji font and paints a blue tile with a white
   arrow in it. Marek photographed it twice. Same fix as the play triangle
   (P-HUB-36): the glyph is replaced by the same SVG mask the site uses for
   every other diagonal arrow, so it takes currentColor and scales with the type. */
.arw{font-size:0 !important;line-height:0;display:inline-flex;align-items:center}
.arw::before{
  content:"";display:inline-block;width:1.05em;height:1.05em;font-size:1.3rem;
  background-color:currentColor;opacity:.95;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat}
/* a straight arrow inside a card keeps its own shape */
.arw.arw-right::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
/* and anywhere an arrow is still typed inside a sentence, ask for the TEXT
   form of the character rather than the emoji one. */
body{font-variant-emoji:text}

/* P-HUB-64 : the highlight on a pre-ticked row. Written at the END of this file
   on purpose: the P-HUB-45 rule further up carries `padding:5px 0` at the same
   specificity, so an earlier copy of this rule lost its padding while keeping
   its negative margin — and the tick box slid ten pixels left of every other
   one. Marek spotted the misalignment in a screenshot.

   No padding, no margin, nothing that can move the row. The air on the left and
   right comes from a HORIZONTAL-ONLY shadow, which cannot bleed onto the rows
   above or below the way a spread ring did. */
.cform label.ticked{
  background:rgba(255,201,49,.30);
  border-radius:10px;
  box-shadow:-9px 0 0 rgba(255,201,49,.30), 9px 0 0 rgba(255,201,49,.30);
}


/* P-HUB-68 : THE LONGEVITY-MAP TIP ON A HERO RAN OFF THE RIGHT OF THE SCREEN.
   Marek's friend found it: tap any of the glowing level dots at the bottom
   right of a hero on a phone and the box that opens is cut off by the edge —
   "RADICAL LIF…", "BIOHACKING UPG…", "LONGEVITY BASIC…". The tip is a child of
   the dot and centres itself on the dot, and the dots sit at 74%-90% of the
   width, so on a 390px screen half the box is simply outside the picture.
   .hero has overflow:hidden, so it is clipped rather than scrolled to.

   Two ways to answer it: move the box, or take the tap away on phones. Taking
   it away loses the thing a reader most wants to know — which level of the Map
   this person stands on — for most of the audience. So the box moves.

   Here it is allowed to size itself to its words instead of a fixed 168px; the
   measuring and the sliding are in site.js, which is the only place that can
   know where the dot actually is. Same shape as the clinic-map label (P-HUB-65).
   The caret keeps pointing at the dot, wherever the box has slid to. */
@media(max-width:760px){
  .hmdot .htip{
    width:auto !important;
    min-width:190px;
    max-width:min(78vw, 320px) !important;
  }
}
/* the caret follows the dot rather than sitting in the middle of the box */
.hmdot .htip::after{ left:var(--htip-caret, 50%) !important; }


/* ============================================================
   A LINK THAT SAYS IT IS A LINK   —  26 August 2026
   Marek: "I know I can click on something, but it should be like an orange
   link with an arrow." Used for every cross-link between a person and the
   chapter they appear in, and anywhere a link sits inside running text.
   ============================================================ */
.golink{color:var(--orange);font-weight:600;
  border-bottom:1.5px solid rgba(255,95,31,.42);padding-bottom:1px}
.golink:hover{border-bottom-color:var(--orange)}
.golink::after{content:" \2197";font-weight:700}
/* on a dark band the orange still reads, but the rule needs lifting */
.dark .golink,.band.dark .golink{border-bottom-color:rgba(255,95,31,.55)}
.chapterlink{display:block;margin-top:22px;font-family:'Mona Sans',sans-serif;
  font-weight:700;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase}

/* THE FOUR BEATS IN THE EXPERT HERO — 26 August 2026 */
.badges .badge{text-decoration:none}
.badge.b-film .b-dot{background:#FFC931}
.badge.b-book .b-dot{background:#FF5F1F}
.badge.b-series .b-dot{background:#70CFFF}
.badge.b-mission .b-dot{background:#FFAFB7}