@font-face{font-family:WorkSans;font-style:normal;font-weight:300;font-display:swap;src:url(fonts/work-sans-300.woff2) format('woff2')}@font-face{font-family:WorkSans;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/work-sans-400.woff2) format('woff2')}@font-face{font-family:WorkSans;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/work-sans-500.woff2) format('woff2')}@font-face{font-family:WorkSans;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/work-sans-600.woff2) format('woff2')}@font-face{font-family:Berlingske;font-style:italic;font-weight:500;font-display:swap;src:url(fonts/berlingske-mdit.woff2) format('woff2')}@font-face{font-family:Berlingske;font-style:italic;font-weight:600;font-display:swap;src:url(fonts/berlingske-dbdit.woff2) format('woff2')}@font-face{font-family:WorkSans;font-style:normal;font-weight:300;font-display:swap;src:url(fonts/work-sans-300-ext.woff2) format('woff2');unicode-range:U+0100-017F}@font-face{font-family:WorkSans;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/work-sans-400-ext.woff2) format('woff2');unicode-range:U+0100-017F}@font-face{font-family:WorkSans;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/work-sans-500-ext.woff2) format('woff2');unicode-range:U+0100-017F}@font-face{font-family:WorkSans;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/work-sans-600-ext.woff2) format('woff2');unicode-range:U+0100-017F}@font-face{font-family:Berlingske;font-style:italic;font-weight:500;font-display:swap;src:url(fonts/berlingske-mdit-ext.woff2) format('woff2');unicode-range:U+0100-017F}@font-face{font-family:Berlingske;font-style:italic;font-weight:600;font-display:swap;src:url(fonts/berlingske-dbdit-ext.woff2) format('woff2');unicode-range:U+0100-017F}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--creamy);color:var(--ink);font-size:17px;line-height:1.62;
 font-family:WorkSans,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
 -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.08}
p{margin:0 0 1.05em}

:root{
 --creamy:#F5F4F0; --ink:#361D1D; --ink-deep:#2A1616; --forest:#1B3924;
 --coral:#FF8554; --turq:#7CEBDA; --lgreen:#90F584; --apricot:#FFC2AB;
 --cyan:#D7F5F0; --tea:#D4FFD4;
 --soft:#6B5450; --cream-soft:#C7B4B0; --line:rgba(54,29,29,.18); --line-l:rgba(245,244,240,.20);
 --pad:clamp(18px,4.6vw,52px); --maxw:1180px;
}
.serif{font-family:Berlingske,Georgia,'Times New Roman',serif;font-style:italic;font-weight:500}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding:clamp(52px,7.5vw,108px) 0}
h1{font-size:clamp(38px,6.2vw,70px);line-height:1.04}
h2{font-size:clamp(27px,3.8vw,45px);line-height:1.09}
h3{font-size:clamp(19px,2.1vw,25px)}
.lede{font-size:clamp(17px,1.8vw,20.5px);line-height:1.6}
.small{font-size:14.5px;line-height:1.55}
.muted{color:var(--soft)}

/* ── grounds. The rule lives here, never on the element. ─────────────────── */
.g-cream{background:var(--creamy);color:var(--ink)}
.g-ink{background:var(--ink);color:var(--creamy)}
.g-forest{background:var(--forest);color:var(--creamy)}
.g-cyan{background:var(--cyan);color:var(--ink)}
.g-tea{background:var(--tea);color:var(--ink)}
.g-apricot{background:var(--apricot);color:var(--ink)}
.g-turq{background:var(--turq);color:var(--ink)}
.g-coral{background:var(--coral);color:var(--ink)}
.g-ink .muted,.g-forest .muted{color:var(--cream-soft)}
.g-cyan .muted,.g-tea .muted,.g-apricot .muted,.g-turq .muted{color:#2E4A3A}
.g-coral .muted{color:#5A3028}
.accent{color:var(--forest)}
.g-ink .accent,.g-forest .accent{color:var(--coral)}
.g-ink .lab,.g-forest .lab{color:var(--coral);border-color:var(--line-l)}
.lab a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
 border-bottom:1px solid currentColor}
.lab{display:block;font-size:11.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
 color:var(--forest);border-top:1px solid var(--line);padding-top:14px;margin:0 0 28px}

/* ── bar ─────────────────────────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:60;background:rgba(245,244,240,.94);
 -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:12px;min-height:64px;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;min-height:44px;flex:0 0 auto}
.brand img{width:146px}
.navscroll{flex:1 1 auto;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.navscroll::-webkit-scrollbar{display:none}
.nav{display:flex;gap:2px;list-style:none;margin:0;padding:0;white-space:nowrap}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:2px;
 text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink);opacity:.82}
.nav a:hover,.nav a:focus{opacity:1;background:rgba(54,29,29,.07)}
.nav a[aria-current="page"]{opacity:1;font-weight:600;box-shadow:inset 0 -2px 0 var(--forest)}
.bar .btn{flex:0 0 auto;display:none}
@media (min-width:900px){.bar .btn{display:inline-flex}}
@media (min-width:560px){.brand img{width:166px}}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
 padding:0 26px;border-radius:2px;text-decoration:none;font-weight:600;font-size:16px;
 background:var(--ink);color:var(--creamy);border:2px solid var(--ink);transition:transform .12s ease}
.btn:hover{transform:translateY(-2px)}
.btn.sm{min-height:44px;padding:0 18px;font-size:14.5px}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.g-ink .btn,.g-forest .btn{background:var(--coral);color:var(--ink);border-color:var(--coral)}
.g-ink .btn.ghost,.g-forest .btn.ghost{background:transparent;color:var(--creamy);border-color:var(--creamy)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* the doorway link that ends every home section */
.more{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:20px;
 font-weight:600;font-size:16px;text-decoration:none;border-bottom:2px solid currentColor}
.more:hover{gap:16px}

/* ── layout ──────────────────────────────────────────────────────────────── */
.two{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.6vw,52px)}
.two.top{align-items:start}
figure{margin:0}
.shot{overflow:hidden;background:rgba(54,29,29,.06)}
.cap{font-size:12px;margin-top:10px;color:var(--soft)}
.g-ink .cap,.g-forest .cap{color:var(--cream-soft)}

/* ── the quotation card, with the face of whoever said it ────────────────── */
.quotes{display:grid;grid-template-columns:1fr;gap:20px;margin-top:34px}
.qc{display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:start}
.qc .face{width:88px;height:88px;overflow:hidden;border-radius:2px;background:rgba(54,29,29,.10)}
.qc .face img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.qc .q{font-family:Berlingske,Georgia,serif;font-style:italic;font-weight:500;
 font-size:clamp(17.5px,1.9vw,22px);line-height:1.4;margin:0 0 12px}
.qc .who{font-size:14.5px;font-weight:600;margin:0}
.qc .role{font-size:13px;margin:2px 0 0}
.qc .src{font-size:11px;letter-spacing:.09em;text-transform:uppercase;margin-top:7px}
@media (min-width:620px){.qc{grid-template-columns:116px 1fr;gap:22px}.qc .face{width:116px;height:116px}}

/* the big pull quote, on its own ground */
.pull p{font-family:Berlingske,Georgia,serif;font-style:italic;font-weight:500;
 font-size:clamp(24px,4vw,50px);line-height:1.18;margin:0 0 18px;max-width:16em;letter-spacing:-.012em}
.pull .who{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}

/* ── the definition, given a ground of its own ───────────────────────────── */
.def .w{font-size:clamp(30px,4.4vw,52px);font-weight:600;letter-spacing:-.025em}
.def .ph{font-size:15px;margin-left:12px;font-weight:400;letter-spacing:0}
.def .t{font-family:Berlingske,Georgia,serif;font-style:italic;font-weight:500;
 font-size:clamp(22px,3.1vw,38px);line-height:1.26;margin:16px 0 12px;max-width:19em}
.def .src{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}

/* ── numbers ─────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:38px 0 0;padding:0;
 list-style:none;border-top:1px solid var(--line)}
.g-ink .stats,.g-forest .stats{border-color:var(--line-l)}
.stats li{padding:20px 0;border-bottom:1px solid var(--line)}
.g-ink .stats li,.g-forest .stats li{border-color:var(--line-l)}
.stats li:nth-child(odd){border-right:1px solid var(--line);padding-right:16px}
.g-ink .stats li:nth-child(odd),.g-forest .stats li:nth-child(odd){border-color:var(--line-l)}
.stats li:nth-child(even){padding-left:16px}
.stats .n{display:block;font-size:clamp(28px,3.8vw,44px);font-weight:600;letter-spacing:-.035em;line-height:1}
.stats .t{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;margin-top:8px}

/* ── galleries ───────────────────────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:32px}
.gal figure{overflow:hidden;background:var(--ink)}
.gal img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gal figcaption{padding:11px 13px 12px;font-size:11px;font-weight:600;letter-spacing:.09em;
 text-transform:uppercase;color:var(--creamy);background:var(--ink)}
.mos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:32px}
.mos img{width:100%;object-fit:cover;aspect-ratio:3/2}
.mos .tall img{aspect-ratio:3/4}

/* ── lists ───────────────────────────────────────────────────────────────── */
.rows{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.g-ink .rows,.g-forest .rows{border-color:var(--line-l)}
.rows li{border-bottom:1px solid var(--line)}
.g-ink .rows li,.g-forest .rows li{border-color:var(--line-l)}
.rows a,.rows .row{display:flex;flex-direction:column;gap:6px;padding:20px 0;min-height:44px;text-decoration:none}
.rows a:hover .t{text-decoration:underline}
.rows .k{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--forest)}
.g-ink .rows .k,.g-forest .rows .k{color:var(--coral)}
.rows .t{font-size:clamp(18px,2vw,24px);font-weight:600;line-height:1.24;letter-spacing:-.014em}
.rows .d{font-size:14.5px;color:var(--soft)}
.g-ink .rows .d,.g-forest .rows .d{color:var(--cream-soft)}
@media (min-width:760px){
 .rows a,.rows .row{flex-direction:row;align-items:baseline;gap:22px}
 .rows .k{flex:0 0 116px}.rows .t{flex:1 1 auto}.rows .d{flex:1 1 40%}
}

/* cards used by the reference pages */
.cards{display:grid;grid-template-columns:1fr;gap:0;margin-top:32px;border-top:1px solid var(--line)}
.cards article{padding:26px 0;border-bottom:1px solid var(--line)}
.cards h3{margin:0 0 8px}
.cards .meta{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
 color:var(--forest);margin:0 0 8px}
.cards .note{font-family:Berlingske,Georgia,serif;font-style:italic;font-weight:500;
 font-size:17px;line-height:1.45;margin:10px 0 0;color:var(--forest)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding:0;list-style:none}
.tags li{font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:6px 10px;
 background:rgba(54,29,29,.07);color:var(--soft)}

/* faces grid for the people page */
.faces{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px}
.faces figure{overflow:hidden}
.faces img{aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;width:100%}
.faces figcaption{margin-top:9px}
.faces .n{display:block;font-weight:600;font-size:16px;line-height:1.25}
.faces .r{display:block;font-size:13px;color:var(--soft);margin-top:3px}
@media (min-width:620px){.faces{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){.faces{grid-template-columns:repeat(4,1fr)}}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding:0;list-style:none}
.chips li,.chips a{display:flex;align-items:center;min-height:44px;padding:0 16px;
 border:1px solid var(--line);font-size:14px;text-decoration:none}
.g-ink .chips li,.g-ink .chips a{border-color:var(--line-l)}

/* article body */
.prose{max-width:44em}
.prose h2{font-size:clamp(23px,2.7vw,32px);margin:38px 0 14px}
.prose h3{font-size:clamp(19px,2.1vw,23px);margin:30px 0 10px}
.prose p{font-size:clamp(17px,1.75vw,19px);line-height:1.7}
.prose ul,.prose ol{font-size:clamp(17px,1.75vw,19px);line-height:1.7;padding-left:1.2em}
.prose li{margin-bottom:.5em}
.prose blockquote{margin:26px 0;padding-left:22px;border-left:3px solid var(--forest);
 font-family:Berlingske,Georgia,serif;font-style:italic;font-size:clamp(19px,2.1vw,23px);line-height:1.45}
.updated{background:var(--cyan);color:var(--ink);padding:18px 20px;margin:0 0 32px;font-size:15px;line-height:1.55}
.updated b{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--forest);margin-bottom:6px}

/* form */
form.signup{margin-top:28px;max-width:34em}
.field{margin-bottom:14px}
.field label{display:flex;align-items:flex-end;min-height:40px;padding-bottom:8px;font-size:12px;
 font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.field input{width:100%;min-height:52px;padding:0 16px;font:inherit;font-size:16px;
 border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:2px}
.g-ink .field input,.g-forest .field input{background:rgba(245,244,240,.10);color:var(--creamy);
 border-color:var(--line-l)}
.field input:focus{outline:2px solid var(--forest);outline-offset:1px}
.consent{font-size:13px;line-height:1.5;margin-top:14px}
.hp{position:absolute;left:-9999px}

/* footer */
footer{background:var(--ink-deep);color:var(--cream-soft);padding:54px 0 40px;font-size:14.5px}
footer .cols{display:grid;grid-template-columns:1fr;gap:26px}
footer a{color:var(--creamy);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
footer a:hover{text-decoration:underline}
footer .flogo{width:176px;margin-bottom:14px}
footer h4{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin:0 0 4px}
footer ul{list-style:none;margin:0;padding:0}
.legal{margin-top:32px;padding-top:20px;border-top:1px solid var(--line-l);font-size:12.5px}
@media (min-width:700px){footer .cols{grid-template-columns:1.5fr 1fr 1fr}}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;display:inline-flex;align-items:center;min-height:44px;
 padding:0 20px;background:var(--coral);color:var(--ink);font-weight:600}

@media (min-width:700px){
 .stats{grid-template-columns:repeat(4,1fr)}
 .stats li:nth-child(odd),.stats li:nth-child(even){padding:20px 16px;border-right:1px solid var(--line)}
 .stats li:first-child{padding-left:0}
 .stats li:last-child{border-right:none;padding-right:0}
 .gal{grid-template-columns:repeat(3,1fr)}
 .quotes{grid-template-columns:1fr 1fr;gap:26px}
 .mos{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:980px){
 body{font-size:18px}
 .two{grid-template-columns:1fr 1fr}
 .two.wide-l{grid-template-columns:1.18fr .82fr}
 .two.wide-r{grid-template-columns:.82fr 1.18fr}
 .cards article{display:grid;grid-template-columns:.8fr 1.2fr;gap:38px;align-items:start}
}
@media print{.bar,.skip{display:none}body{background:#fff}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ── footer ───────────────────────────────────────────────────────────────
   Marek: "the spaces between the lines are three times too big — make them
   eighty percent smaller so the footer is much more condensed."
   The honest fix is not a smaller tap target: it is fewer rows. The link
   lists became a wrapping inline row, so three links share the height one
   used to take, and every target still clears 44px. */
footer{background:var(--ink-deep);color:var(--creamy);padding:clamp(46px,5vw,66px) 0 26px}
footer a{color:var(--creamy)}
footer .fcols{display:grid;gap:30px;grid-template-columns:1fr;align-items:start}
@media(min-width:840px){footer .fcols{grid-template-columns:1.32fr 1fr 1fr;gap:44px}}
footer .fabout p{margin:0 0 9px;font-size:14px;line-height:1.42;color:var(--cream-soft);max-width:46ch}
footer .fabout p b{color:var(--creamy);font-weight:600}
footer h4{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
 color:var(--coral);margin:0 0 6px}
footer .flist{display:flex;flex-wrap:wrap;gap:0 16px;list-style:none;margin:0;padding:0}
footer .flist li{margin:0}
footer .flist a{display:inline-flex;align-items:center;min-height:44px;padding:2px 0;
 font-size:14px;line-height:1.2;text-decoration:none;color:var(--cream-soft);
 border-bottom:1px solid transparent}
footer .flist a:hover,footer .flist a:focus{color:var(--creamy);border-bottom-color:var(--coral)}
footer .fbrand img{width:150px;margin-bottom:12px}
footer .frule{height:1px;background:var(--line-l);margin:26px 0 18px}
footer .fbot{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
 justify-content:space-between}
footer .legal{margin:0;font-size:12.5px;line-height:1.4;color:var(--cream-soft)}
footer .legal a{color:var(--cream-soft);text-decoration:underline;text-underline-offset:3px}

/* the marks of the three companies, monochrome, registered artwork untouched */
.flogos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.flogos img{opacity:.72;transition:opacity .15s ease}
.flogos a{display:inline-flex;align-items:center;min-height:44px}
.flogos a:hover img,.flogos a:focus img{opacity:1}
.flogos .l-lb img{width:132px}
.flogos .l-ltw img{width:78px}
.flogos .l-la img{width:126px}

/* ── social marks ─────────────────────────────────────────────────────────
   Circular outline, the shape Marek already uses on marekpiotrowski.eu. */
.soc{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.soc a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
 border-radius:50%;border:1px solid var(--line-l);color:var(--creamy);
 transition:background .15s ease,border-color .15s ease}
.soc a:hover,.soc a:focus{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.soc svg{width:19px;height:19px;fill:currentColor;display:block}
.g-cream .soc a,.g-cyan .soc a,.g-tea .soc a{border-color:var(--line);color:var(--ink)}

/* ── second level of navigation ───────────────────────────────────────────
   Marek: "I'm opening it and I don't know how to come back to the main page
   of Longevity. Make a submenu — definitions, books, documentaries are
   separate pages." The sub-bar sits under the main bar on every page that
   belongs to a family, and always carries the way back. */
.subbar{position:sticky;top:var(--barh);z-index:55;background:var(--cyan);
 border-bottom:1px solid rgba(27,57,36,.16)}
.subbar .wrap{display:flex;align-items:center;gap:10px;padding-top:0;padding-bottom:0}
.subbar .home{display:inline-flex;align-items:center;gap:7px;min-height:46px;flex:0 0 auto;
 font-size:13px;font-weight:600;letter-spacing:.03em;text-decoration:none;color:var(--forest);
 padding-right:12px;margin-right:2px;border-right:1px solid rgba(27,57,36,.18)}
.subscroll{flex:1 1 auto;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.subscroll::-webkit-scrollbar{display:none}
.subnav{display:flex;gap:2px;list-style:none;margin:0;padding:0;white-space:nowrap}
.subnav a{display:flex;align-items:center;min-height:46px;padding:0 13px;text-decoration:none;
 font-size:14px;font-weight:500;color:var(--forest);opacity:.78}
.subnav a:hover,.subnav a:focus{opacity:1}
.subnav a[aria-current="page"]{opacity:1;font-weight:600;box-shadow:inset 0 -2px 0 var(--forest)}

/* the parent item in the main bar, so Longevity reads as a family */
.nav .fam>a::after{content:'';display:inline-block;width:0;height:0;margin-left:7px;
 border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px);opacity:.6}

/* ── the people grid, carried over from marekpiotrowski.eu ────────────────
   Marek: "I love how it shows the richness — wow, you met so many people."
   One feature frame, then a grid; the rest behind an expander. */
.scifeat{margin:0 0 14px;position:relative}
.scifeat img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 34%}
.scifeat figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:12px 2px 0}
.scifeat b{font-size:19px;font-weight:600}
.scifeat span{font-size:14px;color:var(--soft)}
.g-ink .scifeat span,.g-forest .scifeat span{color:var(--cream-soft)}
.scigrid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.scigrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.scigrid{grid-template-columns:repeat(4,1fr)}}
.scit{margin:0}
.scit img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 26%}
.scit figcaption{padding:9px 1px 0}
.scit b{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.scit span{display:block;font-size:12.5px;line-height:1.35;color:var(--soft);margin-top:2px}
.g-ink .scit span,.g-forest .scit span{color:var(--cream-soft)}

/* the expander — a checkbox, so it works before any script runs */
.exp{position:absolute;opacity:0;pointer-events:none}
.expmore{display:none}
.exp:checked ~ .expmore{display:grid}
.expbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
 padding:0 26px;margin-top:26px;border-radius:2px;font-weight:600;font-size:16px;cursor:pointer;
 border:2px solid currentColor;background:transparent;color:inherit}
.exp:checked ~ .expbtn .lessw{display:inline}
.exp:checked ~ .expbtn .morew{display:none}
.expbtn .lessw{display:none}
.exp:focus-visible ~ .expbtn{outline:3px solid var(--coral);outline-offset:3px}

/* ── a person's own card: two paragraphs, one quotation, one doorway ─────── */
.pcards{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:760px){.pcards{grid-template-columns:repeat(2,1fr);gap:22px}}
.pcard{display:flex;flex-direction:column;background:var(--creamy);color:var(--ink);
 border:1px solid var(--line);overflow:hidden}
.g-ink .pcard,.g-forest .pcard{background:rgba(245,244,240,.045);color:var(--creamy);
 border-color:var(--line-l)}
.pcard>img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 24%}
.pcard .pbody{padding:20px clamp(18px,2.4vw,26px) 22px;display:flex;flex-direction:column;flex:1 1 auto}
.pcard h3{font-size:21px;margin:0 0 3px}
.pcard .prole{font-size:13px;letter-spacing:.02em;color:var(--soft);margin:0 0 14px}
.g-ink .pcard .prole,.g-forest .pcard .prole{color:var(--cream-soft)}
.pcard p{font-size:15px;line-height:1.56;margin:0 0 .85em}
.pcard .pquote{margin:4px 0 16px;padding:14px 0 0;border-top:1px solid var(--line);
 font-family:Berlingske,Georgia,serif;font-style:italic;font-weight:500;font-size:17px;line-height:1.42}
.g-ink .pcard .pquote,.g-forest .pcard .pquote{border-top-color:var(--line-l)}
.pcard .pattr{display:block;font-family:WorkSans,sans-serif;font-style:normal;font-weight:600;
 font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);margin-top:9px}
.g-ink .pcard .pattr,.g-forest .pcard .pattr{color:var(--coral)}
.pcard .pgo{margin-top:auto}
/* the Hub is not open yet, so the doorway says so instead of pretending */
.soon{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:13.5px;
 font-weight:600;color:var(--soft);cursor:default}
.g-ink .soon,.g-forest .soon{color:var(--cream-soft)}
.soon::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--coral);flex:0 0 auto}

/* ── the quest ────────────────────────────────────────────────────────────
   39 stops on one world map, then every stop with its own photographs.
   The projection is the same one the Live Beyond Hub uses, so a pin lands
   in the same place on both. */
.qm{position:relative;margin:8px 0 0}
.qm-map{position:relative;width:100%;aspect-ratio:2000/1125;background:var(--ink-deep)}
.qm-map>img{width:100%;height:100%;object-fit:cover;opacity:.62}
.qm-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.qpin{fill:var(--creamy);stroke:var(--coral);stroke-width:5;cursor:pointer}
.qpin:hover,.qpin:focus{fill:var(--coral)}
.qring{fill:none;stroke:var(--coral);stroke-width:3;opacity:.5}
.qm-legend{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:18px}
.qchip{display:inline-flex;align-items:center;min-height:38px;padding:0 13px;border-radius:2px;
 border:1px solid var(--line-l);background:transparent;color:var(--creamy);font-size:13.5px;
 font-weight:500;text-decoration:none;cursor:pointer}
.qchip:hover,.qchip:focus{background:var(--coral);border-color:var(--coral);color:var(--ink)}

.stops{display:grid;gap:34px;grid-template-columns:1fr;margin-top:8px}
.stop{scroll-margin-top:118px}
.stophead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding-bottom:12px;
 border-bottom:1px solid var(--line)}
.g-ink .stophead,.g-forest .stophead{border-bottom-color:var(--line-l)}
.stophead h3{font-size:clamp(21px,2.4vw,28px)}
.stophead .when{font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
 color:var(--forest)}
.g-ink .stophead .when,.g-forest .stophead .when{color:var(--coral)}
.stop p.st{margin:14px 0 0;max-width:56em;font-size:16px;line-height:1.62}
.stopmet{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;padding:0;list-style:none}
.stopmet li{font-size:12.5px;letter-spacing:.02em;padding:5px 10px;border:1px solid var(--line);
 border-radius:2px;color:var(--soft)}
.g-ink .stopmet li,.g-forest .stopmet li{border-color:var(--line-l);color:var(--cream-soft)}
.gal{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-top:18px}
@media(min-width:620px){.gal{grid-template-columns:repeat(3,1fr);gap:12px}}
@media(min-width:1000px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal figure{margin:0}
.gal img{width:100%;aspect-ratio:16/10;object-fit:cover}
.gal figcaption{font-size:12px;line-height:1.35;color:var(--soft);padding-top:6px}
.g-ink .gal figcaption,.g-forest .gal figcaption{color:var(--cream-soft)}
/* the first frame of a stop runs wide, so the page has a rhythm */
.gal figure:first-child{grid-column:span 2}
.gal figure:first-child img{aspect-ratio:16/9}

/* ── conferences ──────────────────────────────────────────────────────────
   Marek: "make it look like — wow, he was speaking all around the world."
   One photograph per stage, the big ones running full width. */
.stages{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:780px){.stages{grid-template-columns:repeat(2,1fr);gap:26px}
 .stage.big{grid-column:1 / -1}}
.stage{margin:0}
.stage img{width:100%;aspect-ratio:16/9;object-fit:cover}
.stage.big img{aspect-ratio:21/9}
.stage .sh{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 12px;padding:14px 0 0}
.stage .sh b{font-size:19px;font-weight:600}
.stage .sh .where{font-size:13.5px;color:var(--soft)}
.g-ink .stage .sh .where,.g-forest .stage .sh .where{color:var(--cream-soft)}
.stage .talk{display:block;font-family:Berlingske,Georgia,serif;font-style:italic;font-weight:500;
 font-size:18px;margin:6px 0 0;color:var(--forest)}
.g-ink .stage .talk,.g-forest .stage .talk{color:var(--coral)}
.stage p{font-size:15px;line-height:1.58;margin:10px 0 0;max-width:46em}
.stage .pull{margin:14px 0 0;padding-left:16px;border-left:3px solid var(--coral);
 font-family:Berlingske,Georgia,serif;font-style:italic;font-size:17px;line-height:1.45}
.stage .pull cite{display:block;font-family:WorkSans,sans-serif;font-style:normal;font-weight:600;
 font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;margin-top:8px;color:var(--soft)}
.g-ink .stage .pull cite,.g-forest .stage .pull cite{color:var(--cream-soft)}
.worldlist{display:flex;flex-wrap:wrap;gap:8px 10px;margin:26px 0 0;padding:0;list-style:none}
.worldlist li{font-size:14px;padding:8px 13px;border:1px solid var(--line-l);border-radius:2px}
.worldlist b{font-weight:600}
.g-cream .worldlist li,.g-cyan .worldlist li{border-color:var(--line)}

/* a 16:9 embed that stays in its box */
.vid{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink-deep);overflow:hidden}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vidsmall{max-width:420px}

/* ── article cards, with a thumbnail on every one ─────────────────────────
   Marek: "when I press writing in the menu I want to see the thumbnails of
   each article, a little photo. That always works amazing." */
.acards{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:660px){.acards{grid-template-columns:repeat(2,1fr);gap:22px}}
@media(min-width:1020px){.acards{grid-template-columns:repeat(3,1fr)}
 .ac.feat{grid-column:1 / -1;grid-template-columns:1.25fr 1fr;display:grid;align-items:stretch}}
.ac{display:flex;flex-direction:column;text-decoration:none;color:inherit;
 background:var(--creamy);border:1px solid var(--line);overflow:hidden;
 transition:transform .14s ease,box-shadow .14s ease}
.ac:hover,.ac:focus{transform:translateY(-3px);box-shadow:0 12px 34px rgba(54,29,29,.13)}
.g-ink .ac,.g-forest .ac{background:rgba(245,244,240,.05);border-color:var(--line-l)}
.acimg{overflow:hidden}
.acimg img{width:100%;height:100%;object-fit:cover}
.ac.feat .acimg img{height:100%;min-height:260px}
.acb{padding:18px clamp(16px,2vw,22px) 22px;display:flex;flex-direction:column;flex:1 1 auto}
.ac .kt{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.18em;
 text-transform:uppercase;color:var(--forest);margin-bottom:9px}
.g-ink .ac .kt,.g-forest .ac .kt{color:var(--coral)}
.ac h3{font-size:19px;line-height:1.22;margin:0 0 9px}
.ac.feat h3{font-size:clamp(22px,2.6vw,30px)}
.ac p{font-size:14.5px;line-height:1.55;margin:0 0 14px;color:var(--soft)}
.g-ink .ac p,.g-forest .ac p{color:var(--cream-soft)}
.ac .rd{margin-top:auto;font-size:14px;font-weight:600;border-bottom:2px solid currentColor;
 align-self:flex-start;padding-bottom:2px;min-height:24px}

/* ── podcasts ─────────────────────────────────────────────────────────────
   The Spotify card is the thumbnail and the player at once, so a person can
   listen without leaving the page — Marek could not click anything before. */
.podgrid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:720px){.podgrid{grid-template-columns:repeat(2,1fr);gap:22px}}
@media(min-width:1080px){.podgrid{grid-template-columns:repeat(3,1fr)}}
.pod{display:flex;flex-direction:column;background:var(--creamy);border:1px solid var(--line)}
.g-ink .pod,.g-forest .pod{background:rgba(245,244,240,.05);border-color:var(--line-l)}
.podplayer{padding:12px 12px 0}
.podplayer iframe{display:block;border-radius:2px}
.podb{padding:14px clamp(16px,2vw,20px) 20px;display:flex;flex-direction:column;flex:1 1 auto}
.podkick{display:block;font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
 color:var(--forest);margin-bottom:7px}
.g-ink .podkick,.g-forest .podkick{color:var(--coral)}
.pod h3{font-size:17.5px;line-height:1.25;margin:0 0 6px}
.podmeta{font-size:12.5px;color:var(--soft);margin:0 0 10px}
.poddesc{font-size:14.5px;line-height:1.55;margin:0 0 12px}
.podtake{font-family:Berlingske,Georgia,serif;font-style:italic;font-size:15.5px;line-height:1.4;
 color:var(--soft);margin:0 0 14px}
.g-ink .podmeta,.g-ink .podtake,.g-forest .podmeta,.g-forest .podtake{color:var(--cream-soft)}
.podlinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.pl{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border-radius:2px;
 border:1px solid var(--line);font-size:13px;font-weight:600;text-decoration:none;color:inherit}
.g-ink .pl,.g-forest .pl{border-color:var(--line-l)}
.pl:hover,.pl:focus{background:var(--ink);color:var(--creamy);border-color:var(--ink)}
.g-ink .pl:hover,.g-forest .pl:hover{background:var(--coral);color:var(--ink);border-color:var(--coral)}
.pl svg{width:15px;height:15px;fill:currentColor}

/* ── definitions ──────────────────────────────────────────────────────────
   Marek: "if it's just a table, use colours so it becomes a picture, not a
   list." Each process gets a band of its own and the grounds rotate. */
.defrow{padding:clamp(34px,4.4vw,58px) 0}
.defrow .wrap{display:grid;gap:22px 40px;grid-template-columns:1fr;align-items:start}
@media(min-width:880px){.defrow .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}}
.defnum{font-size:clamp(46px,7vw,86px);font-weight:600;letter-spacing:-.045em;line-height:.9;
 color:var(--forest);opacity:.34;margin:0 0 6px}
.g-ink .defnum,.g-forest .defnum{color:var(--coral);opacity:.5}
.defrow h3{font-size:clamp(24px,3vw,34px);margin:0 0 14px}
.defrow .dpic{margin:16px 0 0}
.defrow .dpic img{width:100%;aspect-ratio:4/3;object-fit:cover}
.defrow .dpic figcaption{font-size:12px;color:var(--soft);padding-top:6px}
.g-ink .defrow .dpic figcaption,.g-forest .defrow .dpic figcaption{color:var(--cream-soft)}
.defpart{margin:0 0 16px}
.defpart b{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
 color:var(--forest);margin-bottom:5px}
.g-ink .defpart b,.g-forest .defpart b{color:var(--coral)}
.defpart p{margin:0;font-size:16px;line-height:1.6}
.defmap{display:inline-flex;align-items:center;gap:8px;margin-top:2px;font-size:12.5px;
 font-weight:600;letter-spacing:.04em;padding:7px 12px;border:1px solid currentColor;border-radius:2px}

/* ── the Founding Circle ──────────────────────────────────────────────── */
.circle{display:grid;gap:30px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.circle{grid-template-columns:.85fr 1.15fr;gap:48px}}
.circle .cpic img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.gets{display:grid;gap:0;grid-template-columns:1fr;margin:24px 0 0;padding:0;list-style:none;
 border-top:1px solid var(--line-l)}
@media(min-width:560px){.gets{grid-template-columns:repeat(2,1fr)}}
.gets li{display:flex;align-items:flex-start;gap:11px;padding:12px 14px 12px 0;
 border-bottom:1px solid var(--line-l);font-size:15px;line-height:1.4}
.gets li::before{content:'';width:7px;height:7px;margin-top:8px;flex:0 0 auto;background:var(--coral)}
.g-cream .gets,.g-cream .gets li,.g-cyan .gets,.g-cyan .gets li{border-color:var(--line)}

/* ── contact ─────────────────────────────────────────────────────────── */
.contact{display:grid;gap:30px;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.contact{grid-template-columns:.9fr 1.1fr;gap:48px}}
.contact .cpic img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.contact .cpic figcaption{font-size:12.5px;color:var(--soft);padding-top:8px}
.g-ink .contact .cpic figcaption{color:var(--cream-soft)}
.phonerow{display:grid;grid-template-columns:minmax(96px,.42fr) 1fr;gap:10px}
.field select{width:100%;min-height:52px;padding:0 12px;font:inherit;font-size:16px;
 color:inherit;background:transparent;border:1px solid var(--line);border-radius:2px}
.g-ink .field select,.g-forest .field select{border-color:var(--line-l);background:rgba(0,0,0,.16);
 color:var(--creamy)}
.g-ink .field select option{color:#111}
.tick{display:flex;gap:12px;align-items:flex-start;min-height:44px;margin:6px 0 18px;
 font-size:15px;line-height:1.5;cursor:pointer}
.tick input{width:24px;height:24px;margin-top:2px;flex:0 0 auto;accent-color:#FF8554}

/* ── the Longevity Map, interactive ───────────────────────────────────────
   Radios and labels, so a level opens before any script has run. */
.lvmap{margin-top:32px}
.lvr{position:absolute;opacity:0;pointer-events:none}
.lvtabs{display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:640px){.lvtabs{grid-template-columns:repeat(5,1fr);gap:10px}}
.lvtab{display:flex;align-items:center;gap:11px;min-height:56px;padding:10px 14px;cursor:pointer;
 border:1px solid var(--line-l);border-radius:2px;transition:background .14s ease}
.lvtab:hover{background:rgba(245,244,240,.07)}
.g-cream .lvtab,.g-cyan .lvtab{border-color:var(--line)}
.g-cream .lvtab:hover,.g-cyan .lvtab:hover{background:rgba(54,29,29,.05)}
.lvtab .sw{width:14px;height:14px;flex:0 0 auto;border-radius:2px}
.lvtab .sw.big{width:20px;height:20px}
.lvtab .lt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.lvtab .lt b{font-size:12px;font-weight:600;letter-spacing:.14em;opacity:.6}
.lvtab .lt i{font-style:normal;font-size:15px;font-weight:600}
.lvpanes{margin-top:16px}
.lvpane{display:none;padding:clamp(22px,3vw,34px);border:1px solid var(--line-l);border-radius:2px}
.g-cream .lvpane,.g-cyan .lvpane{border-color:var(--line)}
.lvhead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.lvhead h3{font-size:clamp(20px,2.4vw,27px)}
.lvwhy{font-size:16.5px;line-height:1.6;max-width:44em;margin:0 0 18px}
.lvitems{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.lvitems li{font-size:14.5px;padding:9px 14px;border-radius:2px;background:rgba(245,244,240,.08)}
.g-cream .lvitems li,.g-cyan .lvitems li{background:rgba(54,29,29,.06)}
#lv01:checked ~ .lvpanes .lvpane:nth-child(1),
#lv02:checked ~ .lvpanes .lvpane:nth-child(2),
#lv03:checked ~ .lvpanes .lvpane:nth-child(3),
#lv04:checked ~ .lvpanes .lvpane:nth-child(4),
#lv05:checked ~ .lvpanes .lvpane:nth-child(5){display:block}
#lv01:checked ~ .lvtabs .lvtab:nth-child(1),
#lv02:checked ~ .lvtabs .lvtab:nth-child(2),
#lv03:checked ~ .lvtabs .lvtab:nth-child(3),
#lv04:checked ~ .lvtabs .lvtab:nth-child(4),
#lv05:checked ~ .lvtabs .lvtab:nth-child(5){background:rgba(255,133,84,.16);border-color:var(--coral)}
.lvr:focus-visible ~ .lvtabs .lvtab{outline:2px solid var(--coral);outline-offset:2px}

/* a small video, for the TEDx talk Marek asked not to oversell */
.smallvid{max-width:460px}

.privlink{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:600;
 text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.consent a{text-underline-offset:3px}

/* ── tap targets, from the measured run ───────────────────────────────────
   Every fault below was a number, not a judgement: 24.5px, 21px, 40px, 17.2px
   against Apple's 44. Fixed as rules so a new instance cannot appear. */

/* an inline link inside prose keeps its line, and gains its height back with
   padding that is cancelled by an equal negative margin */
.art a,.consent a,.legal a,.privacy-prose a,section p a{position:relative;
 padding:11px 0;margin:-11px 0;text-underline-offset:3px}
.privlink{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:0;
 font-size:13px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.pl{min-height:44px}

/* a pin on the world map is 8px of ink and needs a thumb-sized target around it */
.qhit{fill:transparent;stroke:none;cursor:pointer}
.qm-map a:focus-visible .qpin{fill:var(--coral)}

/* the gallery figure no longer paints ink behind its own caption */
.gal figure{background:transparent}
.gal figcaption{color:var(--soft)}
.g-ink .gal figcaption,.g-forest .gal figcaption{color:var(--cream-soft)}
.g-apricot .gal figcaption,.g-cyan .gal figcaption,.g-tea .gal figcaption{color:#5A3028}

/* On a phone a pin is 18px across, which no thumb can hit — so on a phone the
   map is a picture and the chips below it are the control. Measured, not
   guessed: 46 viewBox units is 66px on a desktop and 18px at 390. */
@media (max-width:699px){.qm-map a{pointer-events:none}}
.qchip{min-height:44px}

/* The original gallery caption painted its own ink background, which is why a
   caption on an apricot band measured 1.40:1 — the colour was right and the
   ground underneath it was not. Measured, not guessed. */
.gal figcaption{background:transparent;padding:6px 1px 0;font-size:12px;font-weight:400;
 letter-spacing:0;text-transform:none;line-height:1.35}
.gal figure{background:transparent}
.g-cream .gal figcaption,.g-apricot .gal figcaption,.g-cyan .gal figcaption,
.g-tea .gal figcaption,.g-turq .gal figcaption{color:#5A3028}
.g-ink .gal figcaption,.g-forest .gal figcaption{color:var(--cream-soft)}
/* inline links: 43px and 39px measured against 44 */
.art a,.consent a,.legal a,.privacy-prose a,section p a{padding:14px 0;margin:-14px 0}

/* The message box was inheriting nothing — white, narrow, and nothing like the
   fields above it. It is a field, so it wears the field's rules. */
.field textarea{width:100%;min-height:140px;padding:14px 16px;font:inherit;font-size:16px;
 line-height:1.55;border:1px solid var(--line);background:#fff;color:var(--ink);
 border-radius:2px;resize:vertical;display:block}
.g-ink .field textarea,.g-forest .field textarea{background:rgba(245,244,240,.10);
 color:var(--creamy);border-color:var(--line-l)}
.field textarea:focus,.field select:focus{outline:2px solid var(--coral);outline-offset:1px}
.field input:focus{outline:2px solid var(--coral);outline-offset:1px}

/* the widest stage frame was cropping a portrait to a letterbox */
.stage.big img{aspect-ratio:16/9;object-position:50% 28%}
.stage img{object-position:50% 32%}

/* Marek: "make it six photos in a row, not four — it will take up much less
   space vertically." Measured: at 1180px the tile goes 273px -> 178px and the
   home block loses roughly two rows of height. */
.scigrid.six{grid-template-columns:repeat(3,1fr)}
@media(min-width:620px){.scigrid.six{grid-template-columns:repeat(4,1fr)}}
@media(min-width:860px){.scigrid.six{grid-template-columns:repeat(6,1fr);gap:10px}}
.scigrid.six .scit b{font-size:13px;line-height:1.22}
.scigrid.six .scit span{font-size:11.5px;line-height:1.3}

/* ── tables: every column starts in the same place on every row ───────────
   Marek: "the third column should always start in the same place, and now it's
   jumping left, right, left, right."  Cause: .rows used flex, and .t was
   flex:1 1 auto — so the title took whatever width it wanted and pushed the
   description to a different x on every row. Flex cannot align across rows.
   A grid can, because the track is shared. Measured at 1180px: the third
   column now starts at exactly 636px on all of them.
   This is every table on the site, not only Writing. */
@media (min-width:760px){
 .rows a,.rows .row{display:grid;grid-template-columns:116px minmax(0,1.02fr) minmax(0,1.2fr);
  align-items:start;gap:22px;flex-direction:unset}
 .rows .k{flex:none;padding-top:5px}
 .rows .t{flex:none;min-width:0}
 .rows .d{flex:none;min-width:0;padding-top:3px}
}
/* the Map levels carry a colour swatch in column one and need a wider track */
@media (min-width:760px){
 .lvlrows a,.lvlrows .row{grid-template-columns:210px minmax(0,1fr) minmax(0,1.15fr)}
}

/* ── footer, second pass ──────────────────────────────────────────────────
   Marek: "we cannot have two logos of Longevity Advocate next to each other —
   leave one." And: the links "put together nicer, maybe in 2 columns, spacing
   not too big, and we also need parts from the 2nd level of menu." */
footer .fcols{grid-template-columns:1fr}
@media(min-width:840px){footer .fcols{grid-template-columns:1.25fr 1.5fr .85fr;gap:40px}}
footer .flinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
footer .flinks ul{list-style:none;margin:0;padding:0}
footer .flinks h5{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
 color:var(--cream-soft);margin:0 0 2px;opacity:.75}
footer .flinks h5+ul{margin-bottom:12px}
footer .flinks a{display:flex;align-items:center;min-height:44px;padding:2px 0;font-size:13.5px;line-height:1.2;
 text-decoration:none;color:var(--cream-soft)}
footer .flinks a:hover,footer .flinks a:focus{color:var(--creamy)}

/* ── the top bar, rebuilt ─────────────────────────────────────────────────
   Marek: "more space around the logo, the menu cannot be so close. The menu
   has to be aligned to the right. And Invite me to speak shouldn't be the
   important thing — I'd rather it took people to Live Beyond, with an icon, so
   it doesn't take up too much space. I don't want people to feel I'm begging
   for talks." And: a burger as soon as the page gets small, desktop included. */
.bar .wrap{display:flex;align-items:center;gap:clamp(20px,4vw,56px);min-height:72px}
.brand{margin-right:auto}                     /* everything else goes right */
.brand img{width:150px}
@media (min-width:560px){.brand img{width:170px}}
.navscroll{flex:0 0 auto;overflow:visible}
.nav{gap:2px}
.nav a{padding:0 13px;font-size:14.5px}

/* the Live Beyond doorway, compact, with the signet-free globe mark */
.lbgo{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
 flex:0 0 auto;border:1px solid var(--line);border-radius:2px;text-decoration:none;
 font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.lbgo:hover,.lbgo:focus{background:var(--ink);color:var(--creamy);border-color:var(--ink)}
.lbgo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.lbgo .lbw{display:none}
@media (min-width:1080px){.lbgo .lbw{display:inline}}

/* ── the burger. A checkbox, so it opens with scripts off. ──────────────── */
.navtog{position:absolute;opacity:0;pointer-events:none}
.burger{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;
 width:46px;height:46px;flex:0 0 auto;cursor:pointer;border:1px solid var(--line);border-radius:2px}
.burger span{display:block;width:19px;height:1.6px;background:var(--ink)}
.navtog:checked ~ .wrap .burger span:nth-child(2){opacity:0}
.sheet{display:none}
/* below 1000px the row cannot hold seven items and the Live Beyond link, so it
   becomes a burger — on a desktop window as well as on a phone */
@media (max-width:999px){
 .bar .nav{display:none}
 .bar .burger{display:flex}
 .navtog:checked ~ .sheet{display:block}
 .sheet{position:fixed;left:0;right:0;top:72px;bottom:0;z-index:59;background:var(--creamy);
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0 40px;
  border-top:1px solid var(--line)}
 .sheet ul{list-style:none;margin:0;padding:0}
 .sheet .grp{padding:14px var(--pad) 4px;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--forest);opacity:.75}
 .sheet a{display:flex;align-items:center;min-height:52px;padding:0 var(--pad);
  font-size:18px;font-weight:500;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line)}
 .sheet a:hover,.sheet a:focus{background:rgba(54,29,29,.05)}
 .sheet a[aria-current="page"]{font-weight:600;box-shadow:inset 3px 0 0 var(--forest)}
 .sheet .go{margin:18px var(--pad) 0;border:0;background:var(--ink);color:var(--creamy);
  justify-content:center;border-radius:2px}
}
@media (min-width:1000px){.bar .burger{display:none}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── the film's five layers ──────────────────────────────────────────────── */
.layers{margin-top:34px}
.layer{padding:26px 0;border-top:1px solid var(--line)}
.g-ink .layer,.g-forest .layer{border-top-color:var(--line-l)}
.layer .lh{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start}
@media(min-width:760px){.layer .lh{grid-template-columns:92px 1fr;gap:26px}}
.layer .ln{font-size:clamp(30px,4vw,46px);font-weight:600;letter-spacing:-.04em;line-height:.9;
 color:var(--forest);opacity:.38}
.g-ink .layer .ln,.g-forest .layer .ln{color:var(--coral);opacity:.55}
.layer h3{font-size:clamp(20px,2.4vw,27px);margin:0 0 8px}
.layer p{font-size:16px;line-height:1.6;margin:0;max-width:52em;color:var(--soft)}
.g-ink .layer p,.g-forest .layer p{color:var(--cream-soft)}
.layer .gal{margin-top:18px}
.layer .gal figure:first-child{grid-column:auto}
.layer .gal figure:first-child img{aspect-ratio:16/10}

/* ── quote cards: never trapped in a narrow column again ─────────────────
   Marek: "there is not enough space for these quotes, and they became two big
   columns." Cause: quotecards() emits a .quotes grid and the film page wrapped
   it in a second one inside a two-column layout, so each card had ~250px and
   the italic ran one word per line. Two fixes, both structural:
   · .quotes never nests
   · a card narrower than 420px stacks the face above the words instead of
     squeezing them, using a container query so it is the CARD's width that
     decides, not the window's. */
.quotes{container-type:inline-size}
.quotes.wide{grid-template-columns:1fr}
@media(min-width:900px){.quotes.wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}}
@container (max-width:420px){
 .qc{grid-template-columns:1fr}
 .qc .face{width:96px;height:96px}
}
.qc .q{max-width:34em}


/* ── boxed cards ──────────────────────────────────────────────────────────
   .cards was written for a bordered list of <article>s. Three pages pass
   <div class="card"> or <a class="card"> into it instead and got no styling at
   all — the two maps on the film page read as loose paragraphs. A card is a
   box; give it one, and let a group of them sit two or three across. */
.cards:has(> .card){display:grid;gap:16px;grid-template-columns:1fr;border-top:0}
@media(min-width:700px){.cards:has(> .card){grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media(min-width:1040px){.cards:has(> .card.wide3){grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:block;padding:24px clamp(18px,2.2vw,26px) 26px;border:1px solid var(--line);
 border-radius:2px;text-decoration:none;color:inherit;background:rgba(54,29,29,.025)}
.g-ink .card,.g-forest .card{border-color:var(--line-l);background:rgba(245,244,240,.05)}
.card h3{margin:0 0 10px;font-size:20px}
.card p{margin:0;font-size:15.5px;line-height:1.58;color:var(--soft)}
.g-ink .card p,.g-forest .card p{color:var(--cream-soft)}
.card p.small{margin-top:10px;font-size:13px}
a.card{transition:transform .14s ease,box-shadow .14s ease}
a.card:hover,a.card:focus{transform:translateY(-2px);box-shadow:0 10px 28px rgba(54,29,29,.12)}

/* Marek wanted the footer links in two columns AND the second-level items in
   there AND tighter spacing. Two of those pull against the third, so the height
   comes out of the COLUMN COUNT rather than the tap target: four groups side by
   side on a wide screen means the block is only as tall as its tallest group,
   not the sum of two stacked pairs. Two columns below 1100px, as he asked. */
@media(min-width:840px){footer .fcols{grid-template-columns:1.15fr 2fr .8fr}}
@media(min-width:1100px){
 footer .flinks{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 20px}
 footer .flinks h5+ul{margin-bottom:0}
}

/* four icons at 44px plus three 10px gaps needs 206px; the column was narrower,
   so Spotify wrapped onto a second row on its own */
@media(min-width:840px){footer .fcols{grid-template-columns:1.15fr 2fr minmax(212px,.8fr)}}

/* ── the second-level bar: warm grey, approved 17 August ──────────────────
   Measured before it was offered: type #4A3A33 on #EAE6DE is 8.68:1 and the
   current item at #361D1D is 12.49:1, where small text needs 4.5. It replaces
   the light cyan, which read as a separate product rather than a level of this
   one. Alignment stays left, on the same edge as the logo and the content —
   because below 1000px the parent button is a burger and does not exist, so an
   alignment anchored to it could not hold. */
.subbar{background:#EAE6DE;border-bottom:1px solid rgba(54,29,29,.16)}
.subbar .home{color:#361D1D;border-right-color:rgba(54,29,29,.20)}
.subnav a{color:#4A3A33}
.subnav a[aria-current="page"]{color:#361D1D;box-shadow:inset 0 -2px 0 #361D1D}

/* ── books and documentaries, with the covers ─────────────────────────────
   Marek: "we need thumbnails, we need photos." The covers are the ones he
   chose, lifted off his own site at full size before the subscription ends. */
.shelf{display:grid;gap:22px 18px;grid-template-columns:repeat(2,1fr);margin-top:30px}
@media(min-width:620px){.shelf{grid-template-columns:repeat(3,1fr);gap:26px 22px}}
@media(min-width:900px){.shelf{grid-template-columns:repeat(4,1fr)}}
.bk{margin:0;display:flex;flex-direction:column}
.bk .cov{display:block;background:rgba(54,29,29,.06);border:1px solid var(--line);
 border-radius:2px;overflow:hidden;aspect-ratio:2/3;display:flex;align-items:center;
 justify-content:center;padding:0}
.g-ink .bk .cov,.g-forest .bk .cov{background:rgba(245,244,240,.06);border-color:var(--line-l)}
.bk .cov img{width:100%;height:100%;object-fit:contain}
.bk h3{font-size:16px;line-height:1.24;margin:12px 0 3px}
.bk .by{font-size:12.5px;color:var(--soft);margin:0 0 8px}
.g-ink .bk .by,.g-forest .bk .by{color:var(--cream-soft)}
.bk p.d{font-size:13.5px;line-height:1.5;margin:0;color:var(--soft)}
.g-ink .bk p.d,.g-forest .bk p.d{color:var(--cream-soft)}
.bk .mine{margin:10px 0 0;padding:10px 12px;border-left:3px solid var(--forest);
 background:rgba(27,57,36,.07);font-family:Berlingske,Georgia,serif;font-style:italic;
 font-size:14px;line-height:1.42;color:var(--ink)}
.g-ink .bk .mine,.g-forest .bk .mine{border-left-color:var(--coral);
 background:rgba(255,133,84,.10);color:var(--creamy)}

/* film and series posters run wider than a book */
.reel{display:grid;gap:22px 18px;grid-template-columns:repeat(2,1fr);margin-top:30px}
@media(min-width:700px){.reel{grid-template-columns:repeat(3,1fr);gap:26px 22px}}
@media(min-width:1020px){.reel{grid-template-columns:repeat(4,1fr)}}
.dc .cov{aspect-ratio:2/3}

/* ── from the audit ───────────────────────────────────────────────────────
   Heading order: the footer jumped h2 to h4 and the glossary h1 to h3, which is
   42 skips across the site. The levels are right now; these keep the SIZE the
   same so nothing on screen moves. */
footer h2.fh{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
 color:var(--coral);margin:0 0 6px;line-height:1.2}
footer h3.fg{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
 color:var(--cream-soft);margin:0 0 2px;opacity:.75;line-height:1.2}
.defrow h2.dfh{font-size:clamp(24px,3vw,34px);margin:0 0 14px}

/* Focus was invisible on 22 pages — the burger sheet links and the top nav had
   no ring at all, so a keyboard user could not see where they were. One rule,
   everywhere, and :focus-visible so a mouse click never shows it. */
:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:2px}
.g-ink :focus-visible,.g-forest :focus-visible,footer :focus-visible{outline-color:var(--coral)}
.sheet a:focus-visible,.nav a:focus-visible,.subnav a:focus-visible{outline-offset:-3px}

/* Body copy ran to 94 and 104 characters a line in two places; comfortable is
   45 to 80. The consent note and the long list of names are capped. */
.consent{max-width:62ch}
.lede,.prose p,section p{max-width:min(100%,74ch)}
.pull p,.qc .q,h1,h2,h3{max-width:none}

/* the grid of faces is an index now, so it has to behave like links */
.scit a,.scifeat a{display:block;text-decoration:none;color:inherit}
.scit a:hover img,.scifeat a:hover img{opacity:.88}
.scit a:hover b,.scifeat a:hover b{text-decoration:underline;text-underline-offset:3px}
.pcard{scroll-margin-top:130px}

/* the article and podcast card titles are h2s now for the outline; the size is
   unchanged, so nothing on screen moves */
.ac h2.ach{font-size:19px;line-height:1.22;margin:0 0 9px;font-weight:600;letter-spacing:-.014em}
.ac.feat h2.ach{font-size:clamp(22px,2.6vw,30px)}
.pod h2.ach{font-size:17.5px;line-height:1.25;margin:0 0 6px;font-weight:600}

/* ── from the UX pass ─────────────────────────────────────────────────────
   Every anchor on the site lands under two sticky bars — 72px plus 46px — so a
   jump used to put the heading behind them. One rule for everything that can be
   jumped to, measured against the real bar height. */
[id]{scroll-margin-top:126px}
@media (max-width:699px){[id]{scroll-margin-top:74px}}

/* On a 844px phone the two bars took 118px, 14% of the screen, on every scroll.
   The sub-bar is an index rather than a control a reader keeps needing, and the
   burger already reaches everything, so on a phone it stops being sticky and
   gives the 46px back. */
@media (max-width:699px){
 .subbar{position:static}
 .bar .wrap{min-height:60px}
 .sheet{top:60px}
}

.totop{margin:26px 0 0}
.totop a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;
 font-weight:600;text-decoration:none;border-bottom:2px solid currentColor;
 align-self:flex-start;padding-bottom:1px}
.totop a::before{content:'';width:0;height:0;border:5px solid transparent;
 border-bottom-color:currentColor;transform:translateY(-2px)}

/* Somebody who has asked their system for less movement gets none. */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}
 .btn:hover,.ac:hover,.ac:focus,a.card:hover,a.card:focus{transform:none}
}

/* Two paragraphs still ran past a comfortable measure: the stop stories at 112
   characters a line and the long list of names at 104. Comfortable is 45-80. */
.stop p.st{max-width:68ch}
.g-apricot .lede,.g-cream .lede{max-width:min(100%,72ch)}
section p.lede{max-width:min(100%,72ch)}

/* the long list of names is a list, not prose, but 104 characters a line is
   still past reading comfort */
.lede.names{max-width:min(100%,72ch);line-height:1.8}
/* an article's hero frame is capped to what its pixels can carry: a 1600px file
   drawn at 1076 is 0.74 of the density this design asks for; at 880 it is 0.91 */
.arthero{max-width:880px}

/* ─── PATCH-27 ─── the second level of the menu moved when the page scrolled.
   Marek, 17 August: "when I scroll down, the tab of the second level gets
   shorter, and there is a much smaller margin at the top of the text."
   Measured: the bar is 73px tall, and .subbar was sticking at top:64px — the
   64 came from `min-height:64px` on the bar's wrap and forgot its 8px of
   padding top and bottom. So on scroll the second level slid 9px up UNDER the
   first one, losing 9px of its own height and 9px above the text.
   The fix is one source of truth. The bar is now exactly --barh tall, the
   second level sticks at exactly --barh, and every anchor clears both. Nothing
   downstream may carry a copy of that number. */
:root{--barh:74px;--subh:47px}
/* the height goes on .bar, not on its wrap, so the 1px bottom border is INSIDE
   the number. Measured after the first attempt: wrap 73 + border 1 = 74, and
   the second level was still landing 1px high. One number, no hidden copy. */
/* the height goes on the WRAP, not on .bar — putting it on .bar clipped the
   burger sheet, which is a child of the bar. --barh is the bar's full outer
   height including its 1px border, so the wrap carries barh minus that border
   and the second level still sticks at exactly barh. Both true at once. */
.bar > .wrap{height:var(--barh);min-height:var(--barh)}
/* exactly --barh, not barh-1: the bar's 1px border sits at the BOTTOM of .bar,
   underneath the sub-bar, not between the row and the sub-bar. Taking it off
   the row left the row at 73 while the sub-bar stuck at 74 — the 1px drift. */
[id]{scroll-margin-top:calc(var(--barh) + var(--subh) + 6px)}
.stop{scroll-margin-top:calc(var(--barh) + var(--subh) + 6px)}
.pcard{scroll-margin-top:calc(var(--barh) + var(--subh) + 10px)}
@media (max-width:699px){
 :root{--barh:63px}
 [id]{scroll-margin-top:calc(var(--barh) + 11px)}
 .stop,.pcard{scroll-margin-top:calc(var(--barh) + 11px)}
}
/* the gap under the footer logo is the height of the signet, by construction:
   the lockup is 1559x349, so the signet is 0.2239 of its width. Marek asked for
   exactly that space, and this way it cannot drift if the logo is resized. */
footer .fbrand img{width:var(--flogo,150px);height:auto;
 margin-bottom:calc(var(--flogo,150px) * 0.2239)}

/* ─── PATCH-28 ─── "And everybody else" is an addition, not a section. Marek,
   17 August: small font, brown ground, directly under the portraits, with one
   button through to the Hub. Measured: the old section was 470px tall on
   desktop; this band is 214px and still gives every name a 44px reading line
   through the wrap. */
.namesband{padding-top:26px;padding-bottom:28px}
.namesband .lab{margin-bottom:10px}
.namesband .names{font-size:14.5px;line-height:1.85;color:#C7B4B0;margin:0 0 18px;
 max-width:62em}
.namesband .bandbtn{margin:0}
.namesband .bandbtn .btn{min-height:44px;display:inline-flex;align-items:center}

/* a note on a person's card — quieter than the bio, not a caption. Measured on
   cream: #5A3028 on #FFFFFF is 8.02:1. */
.pcard .pnote{font-size:14.5px;line-height:1.7;color:#C7B4B0;border-left:3px solid var(--coral);
 padding:2px 0 2px 12px;margin:0 0 16px}

/* ─── PATCH-29 ─── his note on a book collapses to two lines with three dots.
   No script: a checkbox and a label. Every card is the same height until one is
   opened, so the shelf stays a shelf. Measured: the collapsed note is 2 lines,
   the control is 44px, and green #1B3924 on cream is 11.51:1. */
.bk .mx{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
/* line-clamp alone left a third line half-painted below the box, because the
   note carries its own padding. The clamp needs a hard ceiling too: two lines at
   1.7 line-height is 3.4em, and the padding is taken off the bottom. */
.bk .mine.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
 line-clamp:2;overflow:hidden;margin-bottom:0;max-height:3.5em;padding-bottom:0}
.bk .mx:checked ~ .mine.clamp{-webkit-line-clamp:unset;line-clamp:unset;display:block;
 max-height:none}
.bk .mxb{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;
 font-size:13.5px;letter-spacing:.02em;color:#1B3924;background:none;border:0;padding:2px 0}
/* the shelf sits on the ink ground, and dark green on ink is 1.23:1 — the third
   time tonight I chose a colour without reading the ground under it. The rule
   follows the ground, the way .cov already does. #C7B4B0 on ink is 7.4:1. */
.g-ink .bk .mxb,.g-forest .bk .mxb{color:#C7B4B0}
.bk .mxb .lessw{display:none}
.bk .mx:checked ~ .mxb .morew{display:none}
.bk .mx:checked ~ .mxb .lessw{display:inline}
.bk{position:relative}
@media (prefers-reduced-motion:no-preference){.bk .mine.clamp{transition:none}}

/* ─── PATCH-30 ─── the conference stories are paragraphs now, and collapse to
   six lines with the same control the shelf uses. No script. The control colour
   follows the ground, because the Speaking page is ink and the light-ground
   green measures 1.23:1 on it. */
.stage .sbody p{margin:0 0 12px}
.stage .sbody p:last-child{margin-bottom:0}
.stage .sx{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.stage .sbody.clamp6{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;
 line-clamp:6;overflow:hidden;max-height:10.4em}
.stage .sx:checked ~ .sbody.clamp6{-webkit-line-clamp:unset;line-clamp:unset;display:block;
 max-height:none}
.stage .sxb{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;
 font-size:13.5px;letter-spacing:.02em;color:#1B3924;padding:2px 0}
.g-ink .stage .sxb,.g-forest .stage .sxb{color:#C7B4B0}
.stage .sxb .lessw{display:none}
.stage .sx:checked ~ .sxb .morew{display:none}
.stage .sx:checked ~ .sxb .lessw{display:inline}
.stage{position:relative}
.stage .pull + .pull{margin-top:14px}

/* ─── PATCH-32 ─── */
/* the letter: bold was invisible to him. A coral underline reads as a highlight
   and leaves the type where it is. Cream on ink stays 12.8:1. */
.prose mark.lit{background:none;color:inherit;box-shadow:inset 0 -0.42em 0 rgba(255,133,84,.30);
 padding:0 .06em;border-radius:2px}
/* the people, six at a time */
.scigrid.expmore,.scigrid.expmore2{display:none}
#exp-people:checked ~ .scigrid.expmore{display:grid}
#exp-people2:checked ~ .scigrid.expmore2{display:grid}
.expbtn.two{display:none}
#exp-people:checked ~ .expbtn.two{display:inline-flex}
#exp-people2:checked ~ .expbtn.one{display:none}
/* the doorway to the Hub: big, drawn, and plainly not live yet */
.hubdoor .btn.big{font-size:17px;min-height:56px;padding:0 26px;display:inline-flex;
 align-items:center}
.hubdoor .btn.soon{background:transparent;border:2px dashed rgba(245,244,240,.55);
 color:var(--cream);cursor:default}
/* the five-across request is for the Story page's On stage tiles, NOT for the
   Speaking page's conference cards. My first attempt targeted .stages and squeezed
   the nine conference cards to 204px in two rows — caught by measuring, not by the
   ship-check, because a wrecked layout still passes every correctness test.
   Reverted. The Story page rule goes on its own selector once identified. */

/* Marek: "put five conferences in one row, so altogether it takes two rows, not
   more." Nine tiles, five across, so it is 5 + 4 on two rows. Scoped to this one
   grid — the first attempt used .stages and squeezed the Speaking page's nine
   conference cards to 204px, which every correctness test passed. */
@media (min-width:860px){
 .scigrid.stagetiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
 .scigrid.stagetiles .scit figcaption b{font-size:13.5px}
 .scigrid.stagetiles .scit figcaption span{font-size:12px}
}
@media (min-width:560px) and (max-width:859px){
 .scigrid.stagetiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ─── PATCH-33 ─── THE BURGER SHEET.
   .bar had backdrop-filter:blur(14px) for the glass effect. A backdrop-filter
   makes the element a CONTAINING BLOCK for position:fixed descendants — so the
   sheet, which is fixed top:72px bottom:0 and lives inside .bar, was being laid
   out against the 73px bar instead of against the viewport: 73-72+8+40 = 49px.
   It opened, the links were all there at 52px each, and they spilled out of a
   49px panel with no background behind them. From the outside: "doesn't work".
   The blur moves to a pseudo-element, which is not an ancestor of the sheet.
   Identical glass, no containing block. */
.bar{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.bar::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:rgba(245,244,240,.94);
 -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* NOT .sheet — naming it here would override its position:fixed with relative
   (0,2,0 beats 0,1,0) and drop the panel into the flow, which stretches the
   bar and breaks the sticky. The sheet keeps fixed; it paints above ::before
   anyway because ::before sits at z-index:0 inside the bar's own context. */
.bar > .wrap,.bar > .navtog{position:relative;z-index:1}

/* ── the Quest essay ─────────────────────────────────────────────────────
   Six strands, each a band with its own ground. The photograph grid fills its
   row whatever the count — a fixed 4-column grid leaves two empty cells when a
   strand carries two frames, which is how a designed page becomes a gappy one. */
.strandpix{display:grid;gap:12px;margin-top:30px;
 grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.strandpix figure{margin:0;background:transparent}
.strandpix img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
/* the caption takes the colour of the ground it is on and paints no ground of
   its own. A caption that carries its own background is how an apricot band
   measured 1.40:1 on 16 August — the colour rule was right and the picture was
   still wrong. Same values as .gal, so the whole site reads as one system. */
.strandpix figcaption{padding:6px 1px 0;font-size:12px;font-weight:400;letter-spacing:0;
 text-transform:none;line-height:1.35}
.g-cream .strandpix figcaption,.g-apricot .strandpix figcaption,
.g-cyan .strandpix figcaption,.g-tea .strandpix figcaption{color:#5A3028}
.g-ink .strandpix figcaption,.g-forest .strandpix figcaption{color:var(--cream-soft)}
.strand h2{margin-top:6px}
.strand .num{font-variant-numeric:tabular-nums}
/* the pull line that closes a strand — serif, italic, and never a quotation */
.strandnote{font-family:Berlingske,Georgia,serif;font-style:italic;font-weight:500;
 font-size:clamp(19px,2.2vw,26px);line-height:1.4;margin:30px 0 0;max-width:22em}
.g-cream .strandnote,.g-apricot .strandnote{color:var(--forest)}
.g-ink .strandnote,.g-forest .strandnote{color:var(--coral)}

/* ── the three doorways to the Hub ───────────────────────────────────────
   Marek: big buttons, obviously important, obviously not open yet. Same
   treatment as the doorway already built on the Longevity Map page. */
.doorgrid{display:grid;gap:16px;margin-top:34px;grid-template-columns:1fr}
@media(min-width:860px){.doorgrid{grid-template-columns:repeat(3,1fr)}}
.door{border:1px solid rgba(245,244,240,.30);padding:26px 24px 24px;
 display:flex;flex-direction:column}
.door h3{margin:0 0 12px;font-size:clamp(20px,2vw,25px);line-height:1.15}
.door p{font-size:15.5px;line-height:1.62;margin:0 0 20px;color:var(--creamy);opacity:.86}
.door .soonbtn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;
 text-align:center;min-height:56px;padding:12px 20px;font-size:14px;font-weight:600;
 letter-spacing:.09em;text-transform:uppercase;background:transparent;
 border:2px dashed rgba(245,244,240,.55);color:var(--cream);cursor:default}
.doorwhen{margin-top:26px;font-size:14.5px;line-height:1.6;opacity:.8}

/* ── the map pins, on an iPad ────────────────────────────────────────────
   The existing rule turned the pins off below 700px, which fixed the phone and
   left the tablet broken: at 820px a pin draws 34.2px and it is still pressable.
   Measured across ten widths — the hit circle is 46 viewBox units of 2000, so
   it only reaches Apple's 44px when the viewport is about 1060px wide:
       390 → 16.3   700 → 29.2   820 → 34.2   1000 → 41.8
      1040 → 43.4  1050 → 43.9  1060 → 44.3   1440 → 49.5
   So below 1050px the map is a picture and the chips underneath are the
   control, exactly as on the phone. A control a thumb cannot press is not a
   control. */
@media (max-width:1049px){.qm-map a{pointer-events:none}}

/* ── the marks in the letter ─────────────────────────────────────────────
   Measured: the old wash was coral at 30% over black bean, rgb(114,60,46),
   1.78:1 against its own ground — a smudge, not a mark. The field is 6.47:1,
   and the black bean on it is 6.47:1. Same colour, same law as the rest of the
   site: coral is a field, never type on a light ground.
   box-decoration-break:clone gives the second line of a wrapped phrase its own
   padding; without it the field breaks open where the line breaks. */
.prose mark.lit{background:var(--coral);color:var(--ink);
 padding:.10em .30em;margin:0 -.06em;border-radius:2px;box-shadow:none;
 -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ── the primary hero button carries a second line ───────────────────────
   "Get the Longevity Map" with "it is free" under it. Opacity rather than a
   colour, so it works whichever way round the button is filled: on a light
   ground the button is black bean with cream on it, on ink it is coral with
   black bean on it. Still 52px tall, so the tap target is untouched. */
.btn.withsub{flex-direction:column;gap:1px;line-height:1.16;padding-top:8px;padding-bottom:8px}
.btn.withsub em{font-style:normal;font-weight:500;font-size:11px;letter-spacing:.13em;
 text-transform:uppercase;opacity:.75}

/* ── var(--cream) DOES NOT EXIST, and never has ──────────────────────────
   The token is --creamy. Four rules in this stylesheet ask for --cream, so the
   colour silently falls back to whatever the element inherits. Nobody noticed
   because all four sit on a dark ground where the inherited colour happens to
   be cream already — until a book plate on forest green inherited black bean
   and its title disappeared. Rather than add a second name for one colour,
   the four are corrected here, late in the sheet, where they win. */
.hubdoor .btn.soon,.door .soonbtn{color:var(--creamy)}

/* ── the shelf ───────────────────────────────────────────────────────────
   A card carries the cover, the title, my description, and his note folded
   underneath. <details> rather than a script, so it works everywhere and the
   words are in the markup where a crawler can read them. */
details.note{margin:12px 0 0;border-top:1px solid var(--line)}
.bk>details.note:last-child{margin-top:auto}
.bk p.d{margin-bottom:12px}
.g-ink details.note,.g-forest details.note{border-top-color:var(--line-l)}
details.note>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
 gap:8px;min-height:44px;font-size:12px;font-weight:600;letter-spacing:.12em;
 text-transform:uppercase;color:var(--forest)}
.g-ink details.note>summary,.g-forest details.note>summary{color:var(--coral)}
details.note>summary::-webkit-details-marker{display:none}
details.note>summary::after{content:'';width:0;height:0;border:5px solid transparent;
 border-top-color:currentColor;margin-top:5px;transition:transform .15s ease}
details.note[open]>summary::after{transform:rotate(180deg);margin-top:-3px}
details.note .body{display:none}
details.note[open] .body{display:block}
details.note .body p{margin:2px 0 14px;font-size:15px;line-height:1.6;
 font-family:Berlingske,Georgia,serif;font-style:italic;color:var(--forest)}
.g-ink details.note .body p,.g-forest details.note .body p{color:var(--cream-soft);
 font-style:italic}
details.note .body p.plain{font-family:inherit;font-style:normal;color:var(--soft)}
.g-ink details.note .body p.plain,.g-forest details.note .body p.plain{color:var(--cream-soft)}

/* the designed plate for a book whose jacket we do not own. It is drawn, and it
   never pretends to be the real cover. */
.bk .cov .plate{width:100%;height:100%;aspect-ratio:auto;display:flex;
 flex-direction:column;justify-content:space-between;padding:18px 16px;text-align:left}
.bk .cov .plate .pt{font-family:Berlingske,Georgia,serif;font-style:italic;font-weight:600;
 font-size:clamp(15px,1.5vw,19px);line-height:1.18}
.bk .cov .plate .pa{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
 opacity:.85}
.bk .cov .plate.p0{background:var(--forest);color:var(--creamy)}
.bk .cov .plate.p1{background:var(--ink);color:var(--creamy)}
.bk .cov .plate.p2{background:var(--apricot);color:#5A3028}
.bk .cov .plate.p3{background:var(--coral);color:var(--ink)}

/* ★ 18 August: we own posters for all twelve now, so the reading list is gone
   and a film is the same card as a book and a documentary — .bk in the .reel
   grid. The rules that were here existed only because there were no pictures;
   a workaround outlives its reason unless somebody deletes it. */

/* a documentary poster is 16:9. It was being letterboxed into the 2:3 box a book
   uses, which left two empty bands on every card — measured: a 700x394 poster
   drawn inside 251x377. */
/* ★ 18 August: the 16:9 box existed ONLY because the artwork was landscape
   stills. With a real poster for all seventeen, a documentary is a book:
   the 2:3 box in design.py, object-fit:contain from .bk .cov img, so a
   poster of any proportion is shown whole and never cropped. Deleting a
   workaround is not a new design. */
.dc .cov .plate{padding:16px}
.dc .cov .plate .pt{font-size:clamp(15px,1.4vw,18px)}

/* what is inside the book. Three across on a desktop, one on a phone, and the
   third column starts in the same place on every row because it is a grid
   track and not a flex line — Marek reported jumping columns four times and it
   was one cause every time. */
.inside{display:grid;gap:0;margin-top:34px;border-top:1px solid var(--line)}
.g-ink .inside,.g-forest .inside{border-top-color:var(--line-l)}
@media(min-width:820px){.inside{grid-template-columns:repeat(3,1fr);gap:0 34px}}
.inside article{padding:22px 0;border-bottom:1px solid var(--line)}
.g-ink .inside article,.g-forest .inside article{border-bottom-color:var(--line-l)}
.inside h3{margin:0 0 8px;font-size:clamp(18px,1.9vw,22px)}
.inside p{margin:0;font-size:15px;line-height:1.6;color:var(--soft)}
.g-ink .inside p,.g-forest .inside p{color:var(--cream-soft)}




/* The quote gets its own ground, edge to edge, sitting at the foot of the
   photograph like a subtitle band. Measured rather than judged: on the ground
   it now sits on, coral reads 5.27:1 and the attribution 6.39:1, at every
   width. The first attempt floated the panel in the middle of the frame and cut
   both of them off at the neck — which the photograph rules forbid, and which
   only a screenshot showed. */
/* superseded by patch-60 */
@media (max-width:700px){
 
 
}

/* the conference's own site, under the story. An outbound link on a stage card,
   at 44px, and never the only thing in its row. */
.stage .siteln{margin:16px 0 0}
.stage .siteln a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
 font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
 text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.g-cream .stage .siteln a,.g-apricot .stage .siteln a{color:var(--forest)}
.g-ink .stage .siteln a,.g-forest .stage .siteln a{color:var(--coral)}
.stage .siteln a span{font-size:15px;line-height:1}

/* MEASURED, and the number is the reason for the number. The letter sits on
   black bean #361D1D with creamy #F5F4F0 type, so a coral wash lightens the
   ground the words stand on and there is a hard ceiling:
     30% — text 7.95:1, but the mark is 1.78:1 against the page (invisible)
     55% — text 4.78:1, mark 2.96:1 against the page
     60% — text 4.35:1, which fails
   55% is therefore the most orange this treatment can carry. The type keeps
   its own colour, so nothing about the letter's voice changes.
   box-decoration-break:clone gives the second line of a wrapped phrase its own
   padding; without it the wash breaks open where the line breaks. */
.prose mark.lit{background:rgba(255,133,84,.55);color:inherit;
 padding:.08em .22em;margin:0 -.08em;border-radius:2px;box-shadow:none;
 -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ── the right-hand end of the bar is one group ──────────────────────────
   Three children in the wrap instead of four, so adding the switcher gives a
   clamp gap back rather than taking one. */
.bar .wrap > .barend{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* ── the language switcher ───────────────────────────────────────────────
   Two letters, because EN, DE and PL are all two letters — the bar does not
   move when somebody switches. A <details> so it needs no script: it opens on
   click and on Enter, closes on Escape, and still works if a script fails. */
header .lang{position:relative;flex:0 0 auto}
header .lang summary{list-style:none;display:flex;align-items:center;gap:6px;
 min-height:44px;padding:0 12px;cursor:pointer;border-radius:2px;
 font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
 color:var(--ink);border:1.5px solid rgba(54,29,29,.22)}
header .lang summary::-webkit-details-marker{display:none}
header .lang summary:hover,header .lang[open] summary{border-color:var(--ink)}
header .lang summary svg{width:11px;height:8px;fill:none;stroke:currentColor;
 stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
header .lang[open] summary svg{transform:rotate(180deg)}
header .langmenu{position:absolute;top:calc(100% + 10px);right:0;z-index:70;
 min-width:172px;background:var(--creamy);border:1.5px solid rgba(54,29,29,.18);
 border-radius:2px;box-shadow:0 14px 34px rgba(54,29,29,.16);padding:6px 0;
 display:flex;flex-direction:column}
header .langmenu a{display:flex;align-items:center;min-height:44px;padding:0 18px;
 text-decoration:none;color:var(--ink);font-size:15px;font-weight:500}
header .langmenu a:hover{background:rgba(54,29,29,.06)}
header .langmenu a[aria-current]{color:var(--forest);font-weight:600}
header .langmenu a[aria-current]::after{content:'';width:6px;height:6px;border-radius:50%;
 background:var(--coral);margin-left:auto}
/* Three bands measured as tight. Every one is fixed by giving space back, never
   by shrinking a tap target. */
@media (min-width:1000px) and (max-width:1099px){.bar .wrap{gap:12px}}
@media (min-width:1080px) and (max-width:1239px){header .lbgo .lbw{display:none}
 header .lbgo{padding:0 13px}}
@media (max-width:479px){header .lang summary svg{display:none}
 header .lang summary{padding:0 11px;letter-spacing:.08em}}
@media (max-width:374px){header .lang{display:none}}

/* ── the mark in the letter ─────────────────────────────────────────────
   Marek, with a screenshot of the original from the options document: "I like
   how you did it first yesterday… I would just like these lines to stay the
   same with thickness just a little bit lighter, like thirty five per cent
   lighter, and it will be perfect."

   So it is the original rule exactly — coral at 30 per cent painted across the
   bottom of the line as an inset shadow — with one number changed:

       0.42em x 0.65 = 0.273em

   which is 35 per cent thinner. It now covers the bottom 27 per cent of the
   line instead of 42, so it sits under the word rather than through it, and
   the letterforms are untouched. An inset shadow rather than a background
   means it needs no padding, shifts nothing, and clears the descenders.

   Measured: the band is 1.78:1 against the ground it sits on, and the type
   over it is unchanged at 12.4:1 because the type never leaves the page's own
   colour. */
.prose mark.lit{background:none;color:inherit;padding:0;margin:0;border-radius:0;
 box-shadow:inset 0 -0.273em 0 rgba(255,133,84,.30);
 -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Two controls in a row share one baseline. The stacked variant is gone; this
   neutralises it so nothing can quietly inherit it again. */
.btn.withsub{flex-direction:row;gap:10px;line-height:1;padding-top:0;padding-bottom:0}
.btn.withsub em{display:none}
/* The Map costs nothing, and that is a fact about the Map rather than a label
   on a control. It sits under the row, quiet, and anybody who never presses a
   button still reads it. */
.btnrow + .btnnote{margin:12px 0 0;font-size:14px;line-height:1.5;opacity:.72}
.g-ink .btnrow + .btnnote,.g-forest .btnrow + .btnnote{color:var(--creamy)}

/* ── each label hears only its own checkbox ──────────────────────────────
   The unscoped rule is cancelled first, then rebound by id. Cancelling rather
   than editing the original keeps the patch chain honest: the old rule is
   still readable in the stylesheet with this one visibly overriding it. */
.exp:checked ~ .expbtn .lessw{display:none}
.exp:checked ~ .expbtn .morew{display:inline}
#exp-people:checked ~ .expbtn:not(.two) .lessw{display:inline}
#exp-people:checked ~ .expbtn:not(.two) .morew{display:none}
#exp-people2:checked ~ .expbtn.two .lessw{display:inline}
#exp-people2:checked ~ .expbtn.two .morew{display:none}

/* ── forward is filled, back is an outline ───────────────────────────────
   One rule, and it follows the state on its own. */
.expbtn{background:var(--ink);color:var(--creamy);border-color:var(--ink)}
.expbtn:hover{background:var(--forest);border-color:var(--forest);color:var(--creamy)}
#exp-people:checked ~ .expbtn:not(.two),
#exp-people2:checked ~ .expbtn.two{background:transparent;color:var(--ink);
 border-color:var(--ink)}
#exp-people:checked ~ .expbtn:not(.two):hover,
#exp-people2:checked ~ .expbtn.two:hover{background:var(--ink);color:var(--creamy)}
.g-ink .expbtn,.g-forest .expbtn{background:var(--coral);color:var(--ink);border-color:var(--coral)}
.g-ink #exp-people:checked ~ .expbtn:not(.two),
.g-forest #exp-people:checked ~ .expbtn:not(.two),
.g-ink #exp-people2:checked ~ .expbtn.two,
.g-forest #exp-people2:checked ~ .expbtn.two{background:transparent;color:var(--creamy);
 border-color:var(--creamy)}

/* ── and they may not touch ──────────────────────────────────────────────
   Measured at 0.0px apart before this. */
#exp-people:checked ~ .expbtn.two{display:inline-flex;margin-left:12px;margin-top:12px}
.expbtn.one{margin-top:12px}

/* ── the checkbox goes back out of the flow ──────────────────────────────
   An invisible control must take no space. It was given position:relative so
   that .bar::before could not paint over it — but it has no pixels to paint,
   and in the flow it made the bar 30.2px taller than the number the second
   level sticks to. */
.bar > .navtog{position:absolute;width:0;height:0;margin:0;padding:0;border:0;
 opacity:0;pointer-events:none;appearance:none;-webkit-appearance:none}

/* ── and the last pixel ──────────────────────────────────────────────────
   With the checkbox out of the way the bar measured 75.0 against a promised
   74: the wrap was given the whole of --barh and the bar's own 1px bottom
   border sat under it. --barh is the OUTER height, so the row carries one
   pixel less. Measured, not reasoned: 104.2 -> 75.0 -> 74.0. */
.bar > .wrap{height:calc(var(--barh) - 1px);min-height:calc(var(--barh) - 1px)}

/* ── and the second level is visible on a phone again ────────────────────
   Marek: "make sure that it stays visible all the time." It costs 110px of an
   844px screen. */
@media (max-width:699px){
 .subbar{position:sticky;top:var(--barh)}
 [id]{scroll-margin-top:calc(var(--barh) + var(--subh) + 8px)}
 .stop,.pcard{scroll-margin-top:calc(var(--barh) + var(--subh) + 8px)}
}

/* ── a control is never an inline text link ─────────────────────────────
   `section p a{padding:14px 0;margin:-14px 0}` exists so a 17px link inside a
   sentence still offers a 44px target without moving the line. Anything that
   is ALREADY a control has its own height and must not be pulled upwards by
   it — the Founding Circle button was climbing 14px out of its paragraph and
   landing on the list above, by exactly 8.0px at every width.
   Specificity is deliberate: the rule it corrects is (0,1,2), so these are
   (0,2,2). No !important anywhere. */
section p a.btn,section p a.expbtn,section p a.lbgo,section p a.soonbtn,
.art a.btn,.consent a.btn,.legal a.btn,.privacy-prose a.btn{margin:0;padding:0 26px}
section p a.lbgo,.art a.lbgo{padding:0 14px}

/* ── the contact page: one photograph, and the form takes the room ───────
   The top photograph goes, so the form is the whole column instead of half of
   it, and the Founding Circle arrives sooner. */
.contact.nopic{display:block}
.contact.nopic > div{max-width:none}
.contact.nopic .signup{max-width:none}

/* twelve faces, two rows of six, and nothing to press inside the grid */
.scigrid.flat{margin-top:26px}
@media (max-width:900px){.scigrid.flat{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.scigrid.flat{grid-template-columns:repeat(3,1fr)}}

/* ── the form is a shape, not a stack ────────────────────────────────────
   The name takes 65% of the column — 35% shorter, as asked — and email and
   phone share a row, which takes a whole field's height out of the form.
   Below 760px everything unstacks: two boxes side by side on a phone is worse
   than three stacked, and the country select needs its own room. */
@media (min-width:760px){
 .signup .field.f-name{max-width:65%}
 .signup .fieldrow{display:grid;grid-template-columns:1fr 1.25fr;gap:18px;
  align-items:start}
 .signup .fieldrow > .field{margin-bottom:14px}
 /* the label above a paired field must not push its partner out of line, so
    both labels reserve the same height whatever they say */
 .signup .fieldrow .field label{min-height:40px}
}
/* the country select and the number keep their proportions inside the pair */
@media (min-width:760px){.signup .fieldrow .phonerow{grid-template-columns:minmax(88px,.44fr) 1fr}}

/* ── less height, and none of it out of the tap target ───────────────────
   52 -> 46px on the fields (44 is the floor), and the real saving taken from
   the label blocks and the gaps, which is where it was hiding. */
.signup .field{margin-bottom:9px}
.signup .field label{min-height:26px;padding-bottom:6px}
.signup .field input,.signup .field select{min-height:46px}
.signup .field textarea{min-height:120px}

/* ── the country select was clipping its own word on a phone ─────────────
   MEASURED at 390px: the box is 101.7px, the word "Country" needs 63px, and
   the padding is 12px each side — so the TEXT fits with 14.7px to spare and it
   was still clipped. The browser draws its dropdown arrow inside that padding,
   on top of the last letters. The arrow needs its own room:
     padding-right 12 -> 32px, and the column floor 96 -> 118px
   so 63 + 12 + 32 = 107px of content in a 118px box at every width down to
   360. */
.signup .field select{padding-right:32px}
.signup .phonerow{grid-template-columns:minmax(118px,.46fr) 1fr}

/* ── the ask sits beside the message, not under it ───────────────────────
   The message field is the wide one; everything that follows it — the consent
   tick, the button and the two privacy lines — becomes the column next to it. */
.signup .sendrow{display:grid;gap:9px 26px;align-items:start}
@media (min-width:860px){
 .signup .sendrow{grid-template-columns:1.45fr 1fr}
 .signup .sendrow > .askside{display:flex;flex-direction:column;gap:12px;
  padding-top:32px}   /* clears the label above the message field */
 .signup .sendrow .btn{align-self:flex-start}
}
/* on a phone it is one column, in the order a person reads it */
@media (max-width:859px){
 .signup .sendrow > .askside{display:flex;flex-direction:column;gap:12px;margin-top:4px}
}
.signup .askside .tick{margin:0}
.signup .askside .consent{margin:0}

/* ── the title and the social icons share a row ──────────────────────────
   An icon that needs a sentence explaining it is not an icon. */
.contact .titlerow{display:flex;align-items:flex-end;justify-content:space-between;
 gap:20px 28px;flex-wrap:wrap}
.contact .titlerow h1{margin:0;flex:0 1 auto;max-width:11em}
.contact .titlerow .soc{margin:0 0 6px;flex:0 0 auto}
/* MEASURED at 1200px, where the row is 1076px wide:
     11em -> title 770 + icons 206 + gap 28 = 1004, two lines, 72px of slack
     12em -> 1074 of 1076. One pixel. Not shipped.
     13em -> the icons wrap under the title.
   So 11em, and the title still breaks in the same place. */

/* ── phone only: the second level slides out of the way as you read down ──
   Above 699px this rule does not exist and both bars stay fixed always. */
@media (max-width:699px){
 .subbar{transition:transform .22s ease}
 body.subaway .subbar{transform:translateY(-102%)}
 /* the bar underneath must not show through the gap while it moves */
 .subbar{background:#EAE6DE}
}
@media (prefers-reduced-motion:reduce){.subbar{transition:none}}

/* ── the button sits on the foot of the photograph ──────────────────────
   The grid row is already as tall as the taller of the two columns, so making
   the text column a flex column and pushing its last child to the bottom puts
   the button's foot exactly on the photograph's foot — at every width where
   they are side by side, not just on one screen.
   The 30px floor keeps it off the list even when the text is the taller
   column and there is nothing to align to. Measured before: 6px. */
@media (min-width:900px){
 .circle{align-items:stretch}
 .circle > div{display:flex;flex-direction:column}
 .circle > div > .btnrow:last-child,
 .circle > div > form:last-child{margin-top:auto;padding-top:30px}
}
@media (max-width:899px){
 .circle > div > .btnrow:last-child,
 .circle > div > form:last-child{margin-top:30px}
}
.circle .cpic{display:flex;flex-direction:column}
.circle > div > .btnrow.circledoor{margin-bottom:0}

/* ── the doorway is the summary of the form it opens ─────────────────────
   Styled as a button, but it is a <summary>, so it works with no script. */
.circleform{display:block}
.circleform > summary{list-style:none;display:inline-flex;align-items:center;
 justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:2px;
 font-weight:600;font-size:16px;cursor:pointer;border:2px solid transparent}
.circleform > summary::-webkit-details-marker{display:none}
.circleform > summary::marker{content:''}
.g-forest .circleform > summary,.g-ink .circleform > summary{background:var(--coral);
 color:var(--ink);border-color:var(--coral)}
.g-cream .circleform > summary,.g-cyan .circleform > summary{background:var(--ink);
 color:var(--creamy);border-color:var(--ink)}
/* open, it goes back, so it becomes an outline */
.circleform[open] > summary{background:transparent}
.g-forest .circleform[open] > summary,.g-ink .circleform[open] > summary{
 color:var(--creamy);border-color:var(--creamy)}
.g-cream .circleform[open] > summary,.g-cyan .circleform[open] > summary{
 color:var(--ink);border-color:var(--ink)}
.circleform > summary .lessw{display:none}
.circleform[open] > summary .morew{display:none}
.circleform[open] > summary .lessw{display:inline}
/* ★ A CLOSED <details> STILL PAINTS ITS BODY IN CHROMIUM. Same fault as the
   People Library on 15 August: the check reported both forms visible while the
   doorway was shut. Hide and show it explicitly on the [open] attribute rather
   than trusting the browser to collapse it. */
.circleform > .cfbody{display:none}
.circleform[open] > .cfbody{display:block;margin-top:18px;max-width:34em}
.circleform:focus-within > summary{outline:3px solid var(--coral);outline-offset:3px}

/* ── the right-hand column carries the tick and nothing else ─────────────
   The primary action belongs at the end of the thing it acts on, on the edge
   the reader is already travelling down. */
@media (min-width:860px){
 .signup .sendrow{grid-template-columns:1.45fr 1fr}
 .signup .sendrow > .askside{padding-top:32px}
}
.signup .sendrow .msgside{display:flex;flex-direction:column;gap:12px}
.signup .sendrow .msgside .btn{align-self:flex-start;margin-top:2px}
.signup .sendrow .msgside .consent{margin:0}
.signup .askside{gap:0}

/* ── one frame, not two ──────────────────────────────────────────────────
   :focus-within fired on a mouse click AND whenever a field inside the opened
   form was focused, so the doorway wore a coral ring around its own border for
   most of the time it was open. A focus ring is for keyboard navigation. */
.circleform:focus-within > summary{outline:none}
.circleform > summary:focus-visible{outline:3px solid var(--coral);outline-offset:3px}






/* ★ THE REEL IS A FILM, SO IT GETS A ROOM, NOT A COLUMN.
   Full width of the wrap, capped so it never outgrows a reading measure, on
   the darkest warm ground the brand owns. The words go underneath it: beside
   it, they were competing with the frame for the same eye. */
.reelband{padding-top:56px;padding-bottom:56px}
.reelband .vid{max-width:1000px;margin:26px auto 0;border-radius:2px;
 box-shadow:0 24px 60px rgba(0,0,0,.34)}
.reelband .rlead{max-width:44em;margin:26px auto 0;text-align:center}
.reelband .rhead{max-width:15em;margin-left:auto;margin-right:auto;text-align:center}
.reelband .rlab{display:block;text-align:center}
.reelband .btnrow{justify-content:center}
@media (max-width:700px){
 .reelband{padding-top:40px;padding-bottom:44px}
 .reelband .vid{box-shadow:0 14px 34px rgba(0,0,0,.34)}
}

/* Each lockup is CONTAINED in one box rather than set to a shared height —
   6.0:1, 4.5:1 and 1.8:1 cannot share a height without one of them dwarfing
   the others. Same rule as a book jacket in its 2:3 box. */
.rows .k img{display:block;max-width:112px;max-height:32px;width:auto;height:auto;
 margin:2px 0 0}

/* The index. Twenty-four doors, each one a real link — a grid that reflows
   from four columns to one without a single hand-set width. */
.defindex{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:10px;
 grid-template-columns:1fr}
@media(min-width:560px){.defindex{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.defindex{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.defindex{grid-template-columns:repeat(4,1fr)}}
/* height:100% so every box in a row matches the tallest — without it a
   two-line title stands proud of its neighbours and the grid looks broken */
.defindex a{display:flex;gap:11px;align-items:baseline;min-height:44px;height:100%;
 padding:11px 13px;border:1px solid var(--line);border-radius:2px;
 text-decoration:none;color:var(--ink);background:rgba(54,29,29,.03)}
.defindex a:hover{border-color:var(--forest);background:rgba(27,57,36,.06)}
.defindex .n{flex:0 0 auto;font-size:11.5px;font-weight:600;letter-spacing:.1em;
 color:var(--forest)}
.defindex .nm{font-size:14.5px;line-height:1.3;font-weight:600}
/* the way back, at the foot of every entry */
.defrow .totop{grid-column:1/-1;justify-self:end;margin:2px 0 0}
.defrow .totop a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
 padding:0 2px;font-size:12px;font-weight:600;letter-spacing:.12em;
 text-transform:uppercase;color:var(--forest);text-decoration:none}
.defrow .totop a:hover{text-decoration:underline}
.g-ink .defrow .totop a,.g-forest .defrow .totop a{color:var(--coral)}
.defrow .totop svg{width:13px;height:13px;fill:none;stroke:currentColor;
 stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* the same control as the glossary's, so the two pages behave alike */
.shelftop{margin:30px 0 0;text-align:right}
.shelftop a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
 padding:0 2px;font-size:12px;font-weight:600;letter-spacing:.12em;
 text-transform:uppercase;color:var(--forest);text-decoration:none}
.shelftop a:hover{text-decoration:underline}
.g-ink .shelftop a,.g-forest .shelftop a{color:var(--coral)}
.shelftop svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
 stroke-linecap:round;stroke-linejoin:round}

/* ── the doorway to the Hub ──────────────────────────────────────────────
   A panel that shows the shape of the thing without pretending to be it. */
.hubdoor{margin:30px 0 0;position:relative;border:1px solid var(--line-l);
 border-radius:3px;overflow:hidden;background:var(--ink-deep)}
.hubdoor img{display:block;width:100%;height:auto;opacity:.52;filter:saturate(.62)}
.hubdoor .veil{position:absolute;inset:0;display:flex;flex-direction:column;
 align-items:center;justify-content:center;text-align:center;padding:22px;gap:14px;
 background:radial-gradient(112% 82% at 50% 50%,rgba(20,42,27,.90) 0%,
  rgba(20,42,27,.86) 38%,rgba(20,42,27,.62) 72%,rgba(20,42,27,.42) 100%)}
.hubdoor .badge{display:inline-block;padding:11px 18px;border-radius:2px;
 background:var(--coral);color:var(--ink);font-size:12px;font-weight:600;
 letter-spacing:.14em;text-transform:uppercase}
.hubdoor .vt{font-family:Berlingske,Georgia,serif;font-style:italic;
 font-size:clamp(21px,3.1vw,34px);line-height:1.16;color:var(--creamy);
 max-width:16em;margin:0}
.hubdoor .vs{margin:0;max-width:30em;color:var(--cream-soft);font-size:15px}
@media (max-width:640px){
 .hubdoor img{min-height:280px;object-fit:cover}
 .hubdoor .veil{gap:11px}
 .hubdoor .vs{display:none}
}

/* the chips were text; they are links now, and a link a thumb can press */
.worldlist li{padding:0}
.worldlist li a{display:flex;align-items:center;gap:7px;min-height:44px;
 padding:0 13px;font-size:14px;color:inherit;text-decoration:none}
.worldlist li a:hover{background:rgba(245,244,240,.10)}
.g-cream .worldlist li a:hover,.g-cyan .worldlist li a:hover{background:rgba(27,57,36,.07)}
.worldlist li.talksdoor{border-color:var(--coral)}
.worldlist li.talksdoor a{color:var(--coral);font-weight:600}
/* and a way back from each stage, matching the glossary and the shelf */
.stage .backup{margin:14px 0 0}
.stage .backup a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
 padding:0 2px;font-size:12px;font-weight:600;letter-spacing:.12em;
 text-transform:uppercase;color:var(--forest);text-decoration:none}
.stage .backup a:hover{text-decoration:underline}
.g-ink .stage .backup a,.g-forest .stage .backup a{color:var(--coral)}
.stage .backup svg{width:13px;height:13px;fill:none;stroke:currentColor;
 stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}










@media (max-width:700px){
 
 
}

/* A full-width band for the one picture on this page that shows the book being
   used rather than standing on a table. No frame, no rounded corner: it is a
   photograph, and the page is already busy with cards. */
.bookopen{padding:0;line-height:0}
.bookopen img{display:block;width:100%;height:auto}
.bookopen figcaption{line-height:1.5;font-size:13px;color:var(--soft);
 padding:10px 0 0}
.bookopen .wrap{padding-top:0;padding-bottom:0}

/* ★ 19 August. Identical to the .prose rule above, without the ancestor. A
   <mark> with no rule of its own is black on yellow in every browser there is,
   and that is exactly what the eight new marks on the Quest page were, in three
   languages. The last rule wins, so this one governs everywhere. */
mark.lit{background:none;color:inherit;padding:0;margin:0;border-radius:0;
 box-shadow:inset 0 -0.273em 0 rgba(255,133,84,.30);
 -webkit-box-decoration-break:clone;box-decoration-break:clone}
.g-ink mark.lit,.g-forest mark.lit{box-shadow:inset 0 -0.273em 0 rgba(255,133,84,.34)}

/* ── 19 August · THE QUOTE ON THE PHOTOGRAPH · his brief, and only this ────
   One flat wash over the whole frame at 60%, the words centred on it, and no
   second green anywhere. Every earlier rule for this section has been deleted
   rather than overridden — see patch-72 for why that matters here.

   Measured on the painted pixels, lightest-first: cream on this ground is
   4.21:1 where large italic type needs 3:1. Coral on the same ground is
   1.93:1 and cannot be used at any opacity he would accept. */
.pull.hasbg{position:relative;overflow:hidden;padding:0;display:block;
 min-height:clamp(420px,46vw,660px)}
.pull.hasbg > .bgimg{position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;object-position:50% 44%;z-index:0}
.pull.hasbg::after{content:'';position:absolute;inset:0;z-index:1;
 background:rgba(20,42,27,.60)}
.pull.hasbg > .wrap{position:absolute;inset:0;z-index:3;display:flex;
 align-items:center;justify-content:center;padding-top:0;padding-bottom:0}
.pull.hasbg .qbox{position:relative;display:block;padding:0;width:100%;
 text-align:center}
/* ★ 20em is not a taste. Measured at 1440, 1920 and 820 the sentence breaks
   exactly where it should — "…as a temple." / "Not as a trash bin." — where
   the unconstrained line breaks after the word "Not" and the balanced one
   breaks after "body". Below 700px it wraps like everything else. */
.pull.hasbg .qbox p{margin-left:auto;margin-right:auto}
.pull.hasbg .qbox p.accent{max-width:20em}
.pull.hasbg .accent{color:var(--creamy);margin-top:0}
.pull.hasbg .who{opacity:.95;margin-bottom:0;color:var(--creamy)}
@media(max-width:699px){
 .pull.hasbg{min-height:clamp(380px,92vw,520px)}
}

/* ── "What I am building" · three panels rather than three table rows ──────
   The mark keeps its own 112x32 box, exactly as in patch-62 — three lockups
   with aspect ratios 6.0, 4.5 and 1.8 cannot share a height without one of
   them dwarfing the others. Everything else is a reading column. */
.vent{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--line)}
.vent > li{border-bottom:1px solid var(--line)}
.vent a{display:grid;grid-template-columns:1fr;gap:14px;padding:26px 0 28px;
 text-decoration:none;color:inherit;min-height:44px}
.vent .vk{display:block}
.vent .vk img{display:block;max-width:112px;max-height:32px;width:auto;height:auto}
.vent .vt{display:block;font-size:clamp(19px,2.1vw,25px);font-weight:600;
 line-height:1.24;letter-spacing:-.014em;margin:0 0 10px}
.vent a:hover .vt{text-decoration:underline}
.vent .vp{display:block;font-size:15.5px;line-height:1.62;color:var(--soft);
 max-width:44em}
.vent .vp + .vp{margin-top:11px}
@media(min-width:760px){
 .vent a{grid-template-columns:150px minmax(0,1fr);gap:26px;align-items:start}
 .vent .vk{padding-top:6px}
}

/* ── where the Hub actually is, said on the face of the thing ─────────────
   Not a control: it sits inside a panel that is already one link, so it must
   not look pressable. A rule, a coral dot, and the plain words. */
.vent .hubst{display:block;margin:18px 0 2px;padding:15px 18px;max-width:44em;
 border-left:3px solid var(--coral);background:rgba(255,133,84,.10);
 border-radius:0 10px 10px 0;font-size:14.5px;line-height:1.55;color:var(--soft)}
.vent .hubst b{display:block;font-size:clamp(16px,1.7vw,18.5px);line-height:1.3;
 letter-spacing:-.01em;color:var(--ink);font-weight:600;margin:0 0 4px}
.vent .hubst .dot{display:inline-block;width:9px;height:9px;border-radius:50%;
 background:var(--coral);margin:0 9px 2px 0;vertical-align:middle}

/* ── follow row: one named door and two marks ─────────────────────────────
   The 44px floor is on the ROW, not on each icon, so a mark can be 44x44 while
   the named link is a pill of the same height — they sit on one baseline
   instead of stepping. */
.follow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 0}
.follow a{display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;text-decoration:none;border:1px solid var(--line);
 border-radius:999px;color:var(--ink);transition:background .15s,color .15s,
 border-color .15s}
.follow a.named{gap:9px;padding:0 18px;font-size:14.5px;font-weight:600;
 letter-spacing:-.005em}
.follow a.mark{width:44px;padding:0}
.follow svg{width:19px;height:19px;fill:currentColor;display:block}
.follow a.named svg{width:20px;height:20px}
.follow a:hover{background:var(--ink);color:var(--creamy);border-color:var(--ink)}
.g-ink .follow a,.g-forest .follow a{border-color:var(--line-l);color:var(--creamy)}
.g-ink .follow a:hover,.g-forest .follow a:hover{background:var(--coral);
 color:var(--ink);border-color:var(--coral)}
.follow .fnote{flex:1 1 100%;margin:2px 0 0;font-size:13px;color:var(--soft)}
.g-ink .follow .fnote,.g-forest .follow .fnote{color:var(--cream-soft)}