/* =====================================================================
PXO Exchange — pxo.global
Site stylesheet v1.0 · seven-tab structure · 1 Sep 2026
Colours per the brand spec as amended:
Forest #1C3A30 · Forest deep #132720 · Warm black #17130F
Bone #F4F1EA · Bone 2 #EFEADF
Gold #FECA36 — sampled from the real painted X; matches podcast art
Gold ink #7E6023 — gold TEXT on light grounds (5.19:1). #C09A3C
fails AA on bone at 2.35:1 and is used for rules/dividers only.
Type: Georgia (editorial) + Helvetica/Arial (labels, nav, data).
Rule 5 holds: the X is the only coloured element.
===================================================================== */
:root{
--forest:#1C3A30;
--forest-deep:#132720;
--forest-mid:#22493C;
--ink:#17130F;
--bone:#F4F1EA;
--bone-2:#EFEADF;
--bone-dim:#E7E2D6;
--gold:#FECA36;
--gold-deep:#C09A3C; /* rules and dividers only — fails AA as text on light */
--gold-ink:#7E6023; /* gold text on light grounds */
--sage:#6F9483;
--sage-light:#9DB9AC;
--grey:#5B554D;
--grey-soft:#7C766C;
--rule-bone:#D8D2C4;
--rule-forest:rgba(244,241,234,.16);
--serif:Georgia,'Iowan Old Style','Times New Roman',serif;
--sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
--maxw:1140px;
--measure:64ch;
--pad:clamp(20px,4.5vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--bone);color:var(--ink);
font-family:var(--serif);font-size:18px;line-height:1.62;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:100;background:var(--gold);color:var(--ink);padding:.6em 1em;border-radius:2px;font-family:var(--sans);font-weight:700;font-size:.85rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:820px}
/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.06;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.5rem,6vw,4.1rem);line-height:.96}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin:0 0 1rem}
h3{font-size:1.22rem;margin:0 0 .45rem}
p{margin:0 0 1.05rem;max-width:var(--measure)}
.lead{font-size:clamp(1.1rem,2.1vw,1.35rem);line-height:1.5}
.dim{color:var(--grey)}
.eyebrow{
font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;
text-transform:uppercase;font-weight:700;color:var(--sage);margin:0 0 .85rem;
}
.rule{width:58px;height:3px;background:var(--gold-deep);border:0;margin:0 0 1.35rem}
.kick{
font-family:var(--serif);font-weight:700;
font-size:clamp(1.3rem,3vw,1.95rem);line-height:1.24;
color:var(--forest);max-width:26ch;margin:0;
}
.small{font-size:.95rem}
/* the E✕change device — page and section titles only, never body copy */
.exch{white-space:nowrap}
.exch img{display:inline-block;vertical-align:middle;height:.95em;width:auto;margin:0 -.19em}
section{padding:clamp(52px,7vw,96px) 0}
section[id]{scroll-margin-top:78px}
/* ---------- bands ---------- */
.band-bone2{background:var(--bone-2)}
.band-forest{background:var(--forest);color:var(--bone)}
.band-deep{background:var(--forest-deep);color:var(--bone)}
.band-forest .eyebrow,.band-deep .eyebrow{color:var(--sage-light)}
.band-forest .dim,.band-deep .dim{color:#C8C2B4}
.band-forest .rule,.band-deep .rule{background:var(--gold)}
.band-forest h1,.band-forest h2,.band-forest h3,
.band-deep h1,.band-deep h2,.band-deep h3{color:var(--bone)}
.band-forest .kick,.band-deep .kick{color:var(--gold)}
/* oversize painted X as section furniture — one X seen at two distances */
.has-x{position:relative;overflow:hidden}
.has-x > .wrap{position:relative;z-index:2}
.sec-x{position:absolute;pointer-events:none;z-index:1;width:auto;height:min(150%,900px);opacity:.46}
.sec-x--right{top:50%;right:-13%;transform:translateY(-50%)}
.sec-x--left{top:50%;left:-15%;transform:translateY(-50%) scaleX(-1)}
.sec-x--tr{top:-16%;right:-9%;height:min(120%,720px)}
.sec-x--bl{bottom:-18%;left:-11%;height:min(120%,720px);transform:scaleX(-1)}
section:not(.band-forest):not(.band-deep):not(.hero) .sec-x{opacity:.085}
@media(max-width:820px){
.sec-x{height:min(100%,520px);opacity:.3}
section:not(.band-forest):not(.band-deep):not(.hero) .sec-x{opacity:.06}
}
/* ---------- buttons ---------- */
.btn{
display:inline-block;font-family:var(--sans);font-weight:700;font-size:.9rem;
text-decoration:none;padding:.84em 1.45em;border-radius:2px;
transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:#FFD75C}
.btn--ghost{border:1.5px solid rgba(244,241,234,.32);color:var(--bone)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--dark{border:1.5px solid var(--rule-bone);color:var(--ink)}
.btn--dark:hover{border-color:var(--gold-ink)}
.btns{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.note-free{font-family:var(--sans);font-size:.78rem;color:var(--grey-soft)}
.band-forest .note-free,.band-deep .note-free,.hero .note-free{color:var(--sage-light)}
/* ---------- header ---------- */
.site-head{
position:sticky;top:0;z-index:40;
background:rgba(28,58,48,.96);backdrop-filter:blur(8px);
border-bottom:1px solid var(--rule-forest);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:68px}
.site-head .logo{height:46px;width:auto}
.nav{display:flex;gap:clamp(10px,1.6vw,20px);align-items:center;font-family:var(--sans);font-size:.83rem}
.nav a{color:var(--bone);text-decoration:none;opacity:.85;padding:.3em 0;border-bottom:2px solid transparent}
.nav a:hover{opacity:1;color:var(--gold)}
.nav a[aria-current="page"]{opacity:1;color:var(--gold);border-bottom-color:var(--gold)}
.nav .btn{padding:.56em 1.05em;font-size:.83rem;border-bottom:0}
.nav .btn[aria-current="page"]{border-bottom:0}
.navtoggle{display:none;background:none;border:1.5px solid var(--rule-forest);color:var(--bone);font-family:var(--sans);font-size:.8rem;font-weight:700;padding:.5em .9em;border-radius:2px;cursor:pointer}
@media(max-width:1040px){
.navtoggle{display:block}
.nav{
display:none;position:absolute;top:100%;left:0;right:0;
background:var(--forest);border-bottom:1px solid var(--rule-forest);
flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--pad) 18px;
}
.nav.open{display:flex}
.nav a{width:100%;padding:.72em 0;border-bottom:1px solid var(--rule-forest)}
.nav a[aria-current="page"]{border-bottom-color:var(--rule-forest)}
.nav .btn{margin-top:12px;width:100%;text-align:center}
}
/* ---------- hero ---------- */
.hero{
position:relative;overflow:hidden;color:var(--bone);
background:radial-gradient(118% 130% at 74% 18%,var(--forest-mid) 0%,var(--forest) 46%,var(--forest-deep) 100%);
padding:clamp(64px,9vw,120px) 0 clamp(56px,7.5vw,96px);
}
.hero .ghostx{position:absolute;top:50%;right:-8%;transform:translateY(-50%);height:155%;width:auto;opacity:.46;pointer-events:none;z-index:1}
@media(max-width:820px){.hero .ghostx{right:-30%;height:112%;opacity:.3}}
.hero .wrap{position:relative;z-index:2}
.hero .inner{max-width:680px}
.hero .eyebrow{color:var(--sage-light)}
.hero-logo{height:clamp(88px,12vw,140px);width:auto;margin:0 0 1.5rem}
.hero .you{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--bone-dim);margin:1.1rem 0 1.3rem;max-width:46ch}
.hero .only{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.9vw,1.22rem);color:var(--gold);margin:0 0 2rem;max-width:40ch}
/* page hero — inner pages */
.phero{
position:relative;overflow:hidden;color:var(--bone);background:var(--forest);
padding:clamp(52px,7vw,92px) 0 clamp(46px,6vw,74px);
}
.phero .ghostx{position:absolute;top:50%;right:-11%;transform:translateY(-50%);height:170%;width:auto;opacity:.4;pointer-events:none;z-index:1}
@media(max-width:820px){.phero .ghostx{right:-34%;height:120%;opacity:.26}}
.phero .wrap{position:relative;z-index:2}
.phero .eyebrow{color:var(--sage-light)}
.phero h1{font-size:clamp(2.1rem,4.8vw,3.4rem)}
.phero .lead{color:var(--bone-dim);margin-top:1.1rem;max-width:52ch}
/* ---------- grids ---------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,26px)}
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g4{grid-template-columns:1fr}}
/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--rule-bone);border-radius:5px;padding:26px 24px 28px;height:100%;display:flex;flex-direction:column}
.band-bone2 .card{background:var(--bone)}
.band-forest .card,.band-deep .card{background:rgba(255,255,255,.05);border-color:var(--rule-forest)}
.card .eyebrow{margin-bottom:.6rem}
.card p{font-size:1rem;color:var(--grey);margin:0 0 1rem}
.band-forest .card p,.band-deep .card p{color:#C8C2B4}
.card .more{font-family:var(--sans);font-weight:700;font-size:.86rem;text-decoration:none;color:var(--gold-ink);margin-top:auto}
.band-forest .card .more,.band-deep .card .more{color:var(--gold)}
.card h3{color:var(--forest)}
.band-forest .card h3,.band-deep .card h3{color:var(--bone)}
/* ---------- doors (audience) ---------- */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--rule-forest);margin-top:2rem}
@media(max-width:900px){.doors{grid-template-columns:1fr}}
.door{background:var(--forest);padding:28px 26px 30px;display:flex;flex-direction:column;gap:.45rem}
.door .st{font-family:var(--sans);font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.door h3{color:var(--bone)}
.door p{font-size:.97rem;color:#C8C2B4;margin:0 0 .9rem}
.door .more{font-family:var(--sans);font-weight:700;font-size:.85rem;color:var(--gold);text-decoration:none;margin-top:auto}
/* ---------- three doors, LinkedIn ---------- */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--rule-forest);margin-top:2rem;border-radius:4px;overflow:hidden}
@media(max-width:900px){.tri{grid-template-columns:1fr}}
.tri .d{background:var(--forest);padding:28px 26px 30px;display:flex;flex-direction:column;gap:.4rem}
.tri .verb{font-family:var(--sans);font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.tri h3{color:var(--bone)}
.tri p{font-size:.97rem;color:#C8C2B4;margin:.2rem 0 1rem}
.tri .becomes{font-family:var(--sans);font-size:.8rem;color:var(--sage-light);margin:0 0 1rem}
.tri .becomes b{color:var(--gold)}
.tri .btn{align-self:flex-start;margin-top:auto}
/* ---------- XYZ axes ---------- */
.axis{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-top:1px solid var(--rule-forest)}
.axis:first-child{border-top:0}
.axis .let{
flex:0 0 auto;width:58px;height:58px;display:grid;place-items:center;border-radius:3px;
background:rgba(0,0,0,.28);color:var(--gold);font-family:var(--serif);font-size:1.9rem;font-weight:700;
}
.axis h3{color:var(--bone);margin-bottom:.25rem}
.axis p{margin:0;color:#C8C2B4;font-size:1rem}
/* ---------- global reach ---------- */
.reach{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(18px,3vw,40px);align-items:center;margin-top:2rem}
@media(max-width:820px){.reach{grid-template-columns:1fr}}
.city{background:rgba(255,255,255,.05);border:1px solid var(--rule-forest);border-radius:4px;padding:26px 24px 28px}
.city .who{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 .6rem}
.city .nm{font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.15rem);font-weight:700;color:var(--bone);line-height:1;margin:0 0 .7rem}
.city p{font-size:.97rem;color:#C8C2B4;margin:0}
.reach .mid{text-align:center;font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-light)}
.reach .mid img{height:56px;width:auto;margin:0 auto .7rem}
/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--rule-forest);margin-top:2rem}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--forest-deep);padding:28px 22px;text-align:center}
.stat .n{font-family:var(--serif);font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:700;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.stat .l{font-family:var(--sans);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:#A9B7AF;margin-top:.65rem;display:block;line-height:1.4}
/* ---------- bios ---------- */
.bio{display:grid;grid-template-columns:200px 1fr;gap:clamp(22px,3.4vw,44px);align-items:start;padding:clamp(26px,3.6vw,42px) 0;border-top:1px solid var(--rule-bone)}
.bio:first-of-type{border-top:0;padding-top:0}
@media(max-width:760px){.bio{grid-template-columns:1fr}.bio .shot{max-width:200px}}
.bio .shot{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;border:3px solid var(--gold-deep);background:#DDD8CC}
.bio .shot--ph{display:grid;place-items:center;text-align:center;font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#8A8071;padding:16px;line-height:1.6}
.bio .rl{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .4rem}
.bio h3{font-size:1.55rem;color:var(--forest);margin-bottom:.25rem}
.bio .tag{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--gold-ink);margin:0 0 1rem}
.bio p{font-size:1rem;color:var(--grey)}
.bio .place{font-family:var(--sans);font-size:.74rem;letter-spacing:.06em;color:var(--grey-soft);margin-top:1rem}
/* ---------- mini-X list ---------- */
.xlist{list-style:none;margin:0;padding:0}
.xlist > li{position:relative;padding:0 0 0 36px;margin:0 0 1.05rem;max-width:var(--measure)}
.xlist > li::before{content:"";position:absolute;left:0;top:.26em;width:24px;height:20px;background:url("img/pxo-x-real.png") center/contain no-repeat}
.xlist--tight > li{margin-bottom:.6rem}
/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:.6rem 0 0}
.chips span{font-family:var(--sans);font-size:.83rem;padding:.42em .85em;border:1px solid var(--rule-bone);border-radius:999px;color:#4F4A42;background:#fff}
.band-bone2 .chips span{background:var(--bone)}
.cgroup{margin:0 0 1.8rem}
.cgroup .eyebrow{margin-bottom:.7rem;font-size:.66rem}
/* ---------- prompts (Your Turn) ---------- */
.turn{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--rule-forest);margin-top:2.2rem}
@media(max-width:760px){.turn{grid-template-columns:1fr}}
.prompt{background:var(--forest);padding:28px 26px 32px}
.prompt .ax{font-family:var(--serif);font-size:2.3rem;font-weight:700;color:var(--gold);line-height:1;margin:0 0 .55rem;display:block}
.prompt .ax img{height:46px;width:auto;display:inline-block;margin-top:-4px}
.prompt h3{color:var(--bone);margin-bottom:.45rem}
.prompt p{font-size:.98rem;color:#C8C2B4;margin:0}
/* ---------- link list ---------- */
.links{list-style:none;margin:0;padding:0}
.links li{padding:20px 0;border-top:1px solid var(--rule-forest)}
.links li:first-child{border-top:0}
.links a.t{color:var(--gold);text-decoration:none;font-size:1.28rem;font-weight:700}
.links a.t:hover{text-decoration:underline}
.links .d{display:block;color:#C8C2B4;font-size:1rem;margin-top:.25rem;max-width:var(--measure)}
/* ---------- manifesto block ---------- */
.mani{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,52px);align-items:center}
@media(max-width:760px){.mani{grid-template-columns:1fr}}
.mani .cover{width:clamp(180px,22vw,240px);border:1px solid var(--rule-forest);background:var(--forest);padding:34px 26px 30px;text-align:center;border-radius:3px}
.mani .cover img{height:54px;width:auto;margin:0 auto .9rem}
.mani .cover .t{font-family:var(--serif);font-size:1.35rem;font-weight:700;color:var(--bone);line-height:1.12}
.mani .cover .s{font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--gold);margin-top:.7rem;line-height:1.3}
.mani .cover .m{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-light);margin-top:1.1rem}
/* ---------- threads (manifesto page) ---------- */
.tgroup{margin:0 0 2.8rem}
.threads{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--rule-bone)}
@media(max-width:1000px){.threads{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.threads{grid-template-columns:1fr}}
.thread{background:var(--bone);padding:22px 20px 24px}
.band-bone2 .threads{background:var(--rule-bone)}
.band-bone2 .thread{background:var(--bone-2)}
.thread .n{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.18em;color:var(--gold-ink);display:block;margin-bottom:.5rem}
.thread h4{font-family:var(--serif);font-size:1.1rem;font-weight:700;margin:0 0 .45rem;line-height:1.2;color:var(--forest)}
.thread p{font-size:.94rem;line-height:1.5;color:var(--grey);margin:0 0 .7rem;max-width:none}
.thread .q{font-size:.94rem;font-style:italic;color:var(--forest);margin:0;font-weight:700}
/* ---------- bookshelf ---------- */
.shelf{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--rule-bone)}
.shelf li{padding:24px 0;border-bottom:1px solid var(--rule-bone)}
.shelf h4{font-family:var(--serif);font-size:1.24rem;margin:0 0 .1rem;font-weight:700;color:var(--forest)}
.shelf .by{font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .6rem}
.shelf p{font-size:1rem;color:var(--grey);margin:0 0 .5rem}
.shelf .ix{color:var(--forest);margin:0}
/* ---------- ex- word run ---------- */
.exrun{display:flex;flex-wrap:wrap;gap:9px;margin:1.6rem 0 1.4rem;padding:0;list-style:none}
.exrun li{font-family:var(--sans);font-size:.9rem;font-weight:700;padding:.44em .88em;border:1px solid var(--rule-bone);border-radius:2px;color:#4F4A42;background:#fff}
.exrun li .p{color:var(--gold-ink)}
.exrun li.is-end{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.band-forest .exrun li,.band-deep .exrun li{background:rgba(255,255,255,.05);border-color:var(--rule-forest);color:var(--bone-dim)}
.band-forest .exrun li .p,.band-deep .exrun li .p{color:var(--gold)}
/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.6vw,28px);margin-top:2rem}
@media(max-width:820px){.quotes{grid-template-columns:1fr}}
.quote{background:rgba(255,255,255,.05);border:1px solid var(--rule-forest);border-radius:4px;padding:26px 24px}
.quote p{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--bone-dim);margin:0 0 1rem}
.quote .w{font-family:var(--sans);font-size:.78rem;letter-spacing:.05em;color:var(--gold)}
/* ---------- platform row ---------- */
.plats{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.plats a{
font-family:var(--sans);font-size:.85rem;font-weight:700;text-decoration:none;
border:1.5px solid var(--rule-forest);color:var(--bone);padding:.6em 1.05em;border-radius:2px;
}
.plats a:hover{border-color:var(--gold);color:var(--gold)}
/* ---------- homepage v2: lockup, explain, four doors, census proof ---------- */
.lockup{margin-bottom:1.9rem}
.tagline{
font-family:var(--serif);font-style:italic;font-size:clamp(.95rem,1.5vw,1.1rem);
color:var(--gold);margin:.55rem 0 0;letter-spacing:.01em;
}
.hero .you{font-size:clamp(1.12rem,2.1vw,1.42rem);color:var(--bone);margin:1.1rem 0 1rem;max-width:30ch;font-weight:700}
.hero .explain{font-size:clamp(1rem,1.7vw,1.12rem);color:var(--bone-dim);margin:0 0 .9rem;max-width:46ch}
.hero .explain strong{color:var(--gold)}
.hero .whoever{
font-family:var(--sans);font-size:.86rem;color:var(--sage-light);
margin:0 0 2rem;max-width:44ch;letter-spacing:.01em;
}
.doors--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.doors--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.doors--4{grid-template-columns:1fr}}
.doors--4 .door{padding:24px 22px 26px}
.doors--4 .door p{font-size:.94rem}
/* census used as proof — a wall of real answers */
.chips--proof span{
background:rgba(255,255,255,.06);border-color:var(--rule-forest);color:var(--bone-dim);
font-size:.88rem;padding:.46em .95em;
}
/* testimonial with a face */
.quote--full{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start}
@media(max-width:600px){.quote--full{grid-template-columns:1fr}}
.qshot{width:92px;height:92px;border-radius:50%;object-fit:cover;border:2px solid var(--gold-deep);flex:0 0 auto}
.card.testimonial .qshot{margin-bottom:1rem}
/* ---------- evidence figures ---------- */
.figures{margin-top:2.2rem}
.fig{border-top:3px solid var(--gold-deep);padding-top:16px}
.fig .n{
font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.6rem);font-weight:700;
color:var(--forest);line-height:1;display:block;margin-bottom:.6rem;
font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.fig .l{font-size:.99rem;color:var(--grey);margin:0;max-width:34ch}
.src{
font-family:var(--sans);font-size:.74rem;color:var(--grey-soft);
margin-top:1.8rem;letter-spacing:.01em;max-width:none;
}
/* ---------- footer ---------- */
.site-foot{background:#0E1D17;color:#9AA79F;font-family:var(--sans);font-size:.85rem;padding:clamp(38px,5vw,60px) 0 26px}
.site-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(20px,3vw,36px);margin-bottom:32px}
@media(max-width:860px){.site-foot .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.site-foot .cols{grid-template-columns:1fr}}
.site-foot h4{font-family:var(--sans);font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:#CDD6CF;margin:0 0 .85rem;font-weight:700}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.site-foot a{color:#9AA79F;text-decoration:none}
.site-foot a:hover{color:var(--gold)}
.site-foot .foot-logo{height:52px;width:auto;margin-bottom:1rem}
.site-foot .blurb{font-size:.85rem;color:#8B978F;max-width:34ch;margin:0}
.site-foot .only{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--gold);margin:.9rem 0 0}
.site-foot .bot{border-top:1px solid #1C3128;padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.78rem}
/* =====================================================================
Compatibility — the manifesto page reuses the approved 27 Aug markup.
These alias its class names onto the v1.0 system.
===================================================================== */
.section-rule{width:58px;height:3px;background:var(--gold-deep);border:0;margin:0 0 1.35rem}
.band-forest .section-rule,.band-deep .section-rule{background:var(--gold)}
.kicker-quote{font-family:var(--serif);font-weight:700;font-size:clamp(1.3rem,3vw,1.95rem);line-height:1.24;color:var(--forest);max-width:26ch;margin:0}
.band-forest .kicker-quote,.band-deep .kicker-quote{color:var(--gold)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px)}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
.xdiv{color:var(--gold-deep);letter-spacing:1.2em;text-align:center;font-size:.9rem;margin:2.4rem 0}
.band-forest .xdiv,.band-deep .xdiv{color:var(--gold)}
.xrule{display:flex;align-items:center;justify-content:center;gap:14px;margin:2.6rem 0}
.xrule img{height:15px;width:auto;opacity:.9}
.xrule img:nth-child(2){height:22px}
.census-note{font-size:1rem;color:var(--grey);margin-top:1.5rem;max-width:var(--measure)}
.band-forest .census-note,.band-deep .census-note{color:#C8C2B4}
.closing{font-family:var(--serif);font-weight:700;color:var(--gold);font-size:clamp(1.3rem,3vw,1.95rem);line-height:1.25;margin-top:2.4rem}
.founder h3{font-size:1.5rem;color:var(--forest)}
.band-forest .founder h3,.band-deep .founder h3{color:var(--bone)}
a.more{font-family:var(--sans);font-weight:700;font-size:.86rem;text-decoration:none;color:var(--gold-ink)}
.band-forest a.more,.band-deep a.more{color:var(--gold)}
@font-face{font-family:'Instrument Serif';src:url('fonts/instrument-serif-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
/* =====================================================================
v3 — build preview, the placeholder slot system, portraits, voices,
the episode list, and the grouped navigation.
===================================================================== */
/* ---------- build preview marker ---------- */
.buildbar{
background:var(--gold);color:var(--ink);
font-family:var(--sans);font-size:.72rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;text-align:center;
padding:.6em 16px;line-height:1.5;
}
.buildbar b{letter-spacing:.14em}
.buildbar span{font-weight:400;letter-spacing:.06em;text-transform:none;font-size:.82rem;opacity:.78}
@media(max-width:640px){.buildbar span{display:block}}
/* ---------- the slot system: every gap, named and owned ---------- */
.slot{
position:relative;
border:2px dashed var(--gold-deep);border-radius:4px;
background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(192,154,60,.07) 11px 22px);
padding:22px 20px;display:flex;flex-direction:column;gap:.45rem;justify-content:center;
}
.slot .tag{
font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:.55em;margin:0;
}
.slot .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-deep);flex:0 0 auto}
.slot .what{font-family:var(--serif);font-weight:700;font-size:1.05rem;line-height:1.24;color:var(--forest);margin:0}
.slot .how{font-family:var(--sans);font-size:.85rem;line-height:1.5;color:var(--grey);margin:0}
.slot .own{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin:.2rem 0 0}
.band-forest .slot,.band-deep .slot,.hero .slot{
border-color:rgba(254,202,54,.62);
background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(254,202,54,.08) 11px 22px);
}
.band-forest .slot .what,.band-deep .slot .what{color:var(--bone)}
.band-forest .slot .how,.band-deep .slot .how{color:#C8C2B4}
.band-forest .slot .tag,.band-deep .slot .tag,
.band-forest .slot .own,.band-deep .slot .own{color:var(--gold)}
.band-forest .slot .tag::before,.band-deep .slot .tag::before{background:var(--gold)}
.slot--round{border-radius:50%;aspect-ratio:1;text-align:center;align-items:center;padding:18px}
.slot--round .tag{justify-content:center}
.slot--round .what{font-size:.95rem}
.slot--tall{min-height:210px}
.slot--inline{padding:16px 18px;gap:.3rem}
.slot--inline .what{font-size:.98rem}
.slotkey{
display:flex;gap:.7rem;align-items:flex-start;
border-left:3px solid var(--gold-deep);padding:.1rem 0 .1rem 14px;
font-family:var(--sans);font-size:.85rem;color:var(--grey);max-width:64ch;margin-top:1.5rem;
}
.band-forest .slotkey,.band-deep .slotkey{border-left-color:var(--gold);color:#C8C2B4}
/* ---------- Xer portraits ---------- */
.portraits{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--rule-forest);margin-top:2.2rem}
@media(max-width:900px){.portraits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.portraits{grid-template-columns:1fr}}
.portraits > *{background:var(--forest)}
.portraits .slot{background:var(--forest);min-height:224px;border-radius:0;border-width:0;
box-shadow:inset 0 0 0 2px rgba(254,202,54,.42);
background-image:repeating-linear-gradient(135deg,transparent 0 11px,rgba(254,202,54,.07) 11px 22px)}
.portrait{padding:26px 24px 28px;display:flex;flex-direction:column;gap:.5rem}
.portrait .face{width:62px;height:62px;border-radius:50%;object-fit:cover;border:2px solid var(--gold-deep);margin-bottom:.3rem}
.portrait .was{font-family:var(--sans);font-size:.7rem;letter-spacing:.06em;color:var(--sage-light);margin:0}
.portrait .nm{font-family:var(--serif);font-size:1.24rem;font-weight:700;color:var(--bone);margin:0;line-height:1.15}
.portrait .solves{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--gold);margin:.25rem 0 0}
/* ---------- voices: light-ground quote cards ---------- */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px);margin-top:2.2rem}
@media(max-width:960px){.voices{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.voices{grid-template-columns:1fr}}
.voice{background:#fff;border:1px solid var(--rule-bone);border-radius:5px;padding:26px 24px;display:flex;flex-direction:column}
.band-bone2 .voice{background:var(--bone)}
.voice p{font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.55;color:var(--ink);margin:0 0 1rem}
.voice .w{font-family:var(--sans);font-size:.76rem;letter-spacing:.04em;color:var(--gold-ink);margin-top:auto}
.voice .w b{display:block;font-size:.86rem;color:var(--forest);letter-spacing:0}
/* ---------- status pills ---------- */
.pill{
display:inline-flex;align-items:center;gap:.55em;
font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink);background:var(--gold);padding:.42em .85em;border-radius:999px;
}
.pill--quiet{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 1.5px rgba(254,202,54,.5)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--forest);flex:0 0 auto}
.pill--quiet::before{background:var(--gold)}
/* ---------- the now strip ---------- */
.now .card{position:relative}
.now .card .pill{margin-bottom:.9rem;align-self:flex-start}
.now .card .when{font-family:var(--sans);font-size:.76rem;color:var(--grey-soft);margin:.4rem 0 1rem}
.band-forest .now .card .when,.band-deep .now .card .when{color:var(--sage-light)}
/* ---------- episode list ---------- */
.eps{list-style:none;margin:2.2rem 0 0;padding:0;border-top:1px solid var(--rule-forest)}
.eps li{display:grid;grid-template-columns:52px 1fr 158px;gap:clamp(14px,2vw,24px);align-items:start;
padding:20px 0;border-bottom:1px solid var(--rule-forest)}
@media(max-width:760px){
.eps li{grid-template-columns:42px 1fr}
.eps .meta{grid-column:2;text-align:left;margin-top:.5rem}
}
.eps .num{font-family:var(--serif);font-size:1.45rem;font-weight:700;color:var(--gold-deep);line-height:1.1}
.eps h3{color:var(--bone);margin:0 0 .3rem;font-size:1.14rem}
.eps p{margin:0;font-size:.97rem;line-height:1.5;color:#C8C2B4;max-width:62ch}
.eps .meta{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-light);text-align:right;line-height:1.7}
.eps li.is-live .num,.eps li.is-live .meta{color:var(--gold)}
.eps li.is-live h3{color:var(--gold)}
.eps .act{font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:var(--sage-light);padding:26px 0 6px;border-bottom:0}
.eps li.act-row{display:block;border-bottom:0;padding:0}
/* ---------- grouped navigation ---------- */
.navgroup{display:flex;gap:clamp(10px,1.5vw,18px);align-items:center}
.navsep{width:1px;height:15px;background:rgba(244,241,234,.28);flex:0 0 auto}
.navlabel{display:none}
@media(max-width:1040px){
.navgroup{flex-direction:column;align-items:flex-start;gap:0;width:100%}
.navsep{display:none}
.navlabel{
display:block;width:100%;font-family:var(--sans);font-size:.6rem;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--sage-light);
padding:14px 0 6px;border-bottom:0;
}
}
/* platform row works on light grounds too now that it moved off the green */
.plats a{border-color:var(--rule-bone);color:var(--forest)}
.plats a:hover{border-color:var(--gold-ink);color:var(--gold-ink)}
.band-forest .plats a,.band-deep .plats a,.phero .plats a{border-color:var(--rule-forest);color:var(--bone)}
.band-forest .plats a:hover,.band-deep .plats a:hover,.phero .plats a:hover{border-color:var(--gold);color:var(--gold)}
/* portrait slots: align headings across the row */
.portraits .slot{justify-content:flex-start}
/* the nav CTA was inheriting .nav a's bone colour over the gold fill — 1.9:1.
Restore the dark ink it was designed with. */
.nav a.btn--gold{color:var(--ink);opacity:1}
.nav a.btn--gold:hover{color:var(--ink)}
/* =====================================================================
The Manifesto reader — built, not bought.
===================================================================== */
.reader-body{background:var(--forest-deep);color:var(--bone);overflow:hidden}
.reader{height:100dvh;display:flex;flex-direction:column}
.reader-bar{
display:flex;align-items:center;gap:16px;
padding:10px clamp(14px,3vw,28px);
border-bottom:1px solid var(--rule-forest);background:rgba(28,58,48,.9);flex:0 0 auto;
}
.rb-home img{height:34px;width:auto}
.rb-mid{flex:1;text-align:center;line-height:1.3}
.rb-t{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--bone);margin:0}
.rb-c{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-light);margin:0}
.rb-act{display:flex;gap:8px;flex:0 0 auto}
.rb-btn{
font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.06em;text-decoration:none;
background:var(--gold);color:var(--ink);padding:.55em 1em;border-radius:2px;white-space:nowrap;
}
.rb-btn--quiet{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1.5px var(--rule-forest)}
.rb-btn--quiet:hover{color:var(--gold);box-shadow:inset 0 0 0 1.5px var(--gold)}
@media(max-width:600px){.rb-btn--quiet{display:none}.rb-mid{text-align:left}}
.stage{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,22px);padding:clamp(10px,2.5vh,26px) clamp(8px,2vw,24px);min-height:0}
.turn{
flex:0 0 auto;width:46px;height:46px;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.06);border:1.5px solid var(--rule-forest);color:var(--bone);
font-size:1.5rem;line-height:1;display:grid;place-items:center;
}
.turn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.turn:disabled{opacity:.25;cursor:default}
@media(max-width:820px){.turn{width:38px;height:38px;font-size:1.2rem}}
.book{
position:relative;height:100%;aspect-ratio:4/3;max-width:100%;
display:grid;grid-template-columns:1fr 1fr;
perspective:2400px;
filter:drop-shadow(0 18px 44px rgba(0,0,0,.5));
}
.pg{
background:#fff center/contain no-repeat;background-color:#fff;cursor:pointer;
transition:opacity .2s ease;
}
.pg.is-empty{background-color:transparent;box-shadow:none;cursor:default}
.gutter{
position:absolute;top:0;bottom:0;left:50%;width:26px;transform:translateX(-50%);
background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 46%,rgba(0,0,0,.28) 50%,rgba(0,0,0,.22) 54%,rgba(0,0,0,0) 100%);
pointer-events:none;
}
/* the turning leaf */
.leaf{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;pointer-events:none;opacity:0}
.leaf--right{left:50%;transform-origin:left center;opacity:1;z-index:5}
.leaf--left{left:0;transform-origin:right center;opacity:1;z-index:5}
.leaf-face{position:absolute;inset:0;backface-visibility:hidden;background:#fff center/contain no-repeat}
.leaf-face--b{transform:rotateY(180deg)}
.leaf--right.is-turning{animation:leafFwd .62s cubic-bezier(.4,.05,.3,1) forwards}
.leaf--left.is-turning{animation:leafBack .62s cubic-bezier(.4,.05,.3,1) forwards}
@keyframes leafFwd{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes leafBack{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
.reader-hint{
flex:0 0 auto;text-align:center;font-family:var(--sans);font-size:.76rem;color:var(--sage-light);
margin:0;padding:0 16px 14px;
}
.reader-hint a{color:var(--gold)}
@media(max-width:820px){
.book{aspect-ratio:2/3;grid-template-columns:1fr;perspective:none;filter:drop-shadow(0 10px 26px rgba(0,0,0,.45))}
.pg--l{display:none}
.gutter,.leaf{display:none}
.book.slide-fwd .pg--r{opacity:0;transform:translateX(-14px);transition:all .2s ease}
.book.slide-back .pg--r{opacity:0;transform:translateX(14px);transition:all .2s ease}
}
@media (prefers-reduced-motion:reduce){
.leaf{display:none}
}
/* ---------- the track: one path, four rungs ---------- */
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--rule-forest);margin-top:2.4rem;position:relative}
@media(max-width:980px){.track{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.track{grid-template-columns:1fr}}
.rung{background:var(--forest);padding:28px 24px 30px;display:flex;flex-direction:column;gap:.5rem;position:relative}
.rung .n{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.22em;color:var(--gold);margin:0}
.rung h3{color:var(--bone);margin:.2rem 0 .1rem;font-size:1.16rem}
.rung p{font-size:.97rem;color:#C8C2B4;margin:0}
.rung .cost{font-family:var(--sans);font-size:.72rem;letter-spacing:.05em;color:var(--sage-light);margin:.15rem 0 0}
.rung .go{
font-family:var(--sans);font-weight:700;font-size:.86rem;color:var(--gold);
text-decoration:none;margin-top:auto;padding-top:1rem;
}
.rung .go:hover{text-decoration:underline}
.rung--end{background:var(--forest-deep)}
.rung--end h3{color:var(--gold)}
.rung .slot{margin-top:.4rem;border-radius:3px}
.track-note{font-family:var(--sans);font-size:.85rem;color:#C8C2B4;margin:1.4rem 0 0;max-width:68ch}
.band-bone2 .rung,.band-bone2 .track{background:var(--forest)}
/* ---------- census voting ---------- */
.vote{display:flex;flex-wrap:wrap;gap:9px;margin:1.4rem 0 0;padding:0;list-style:none}
.vote li{margin:0}
.vote input{position:absolute;opacity:0;width:0;height:0}
.vote label{
display:inline-flex;align-items:baseline;gap:.55em;cursor:pointer;
font-family:var(--sans);font-size:.86rem;padding:.5em .95em;border-radius:999px;
border:1px solid var(--rule-bone);background:#fff;color:#4F4A42;
}
.band-bone2 .vote label{background:var(--bone)}
.band-forest .vote label,.band-deep .vote label{background:rgba(255,255,255,.05);border-color:var(--rule-forest);color:var(--bone-dim)}
.vote label .c{font-size:.74rem;font-weight:700;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.band-forest .vote label .c,.band-deep .vote label .c{color:var(--gold)}
.vote input:checked + label{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:var(--gold);color:var(--ink)}
.vote input:checked + label .c{color:var(--ink)}
.vote input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px}
.addmine{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:1.6rem}
.fld{
font-family:var(--sans);font-size:.95rem;padding:.72em .9em;border-radius:2px;
border:1.5px solid var(--rule-bone);background:#fff;color:var(--ink);min-width:min(320px,100%);
}
.band-forest .fld,.band-deep .fld{background:rgba(255,255,255,.06);border-color:var(--rule-forest);color:var(--bone)}
.band-forest .fld::placeholder,.band-deep .fld::placeholder{color:#8FA398}
.fld:focus{outline:2px solid var(--gold);outline-offset:1px}
textarea.fld{min-height:120px;resize:vertical;width:100%}
select.fld{min-width:min(320px,100%)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:700px){.frow{grid-template-columns:1fr}}
.flab{display:block;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .45rem}
.band-forest .flab,.band-deep .flab{color:var(--gold)}
.fnote{font-family:var(--sans);font-size:.78rem;color:var(--grey-soft);margin:.8rem 0 0}
.band-forest .fnote,.band-deep .fnote{color:var(--sage-light)}
.hp{position:absolute;left:-9999px}
/* ---------- manifesto teaser ---------- */
.tease{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:820px){.tease{grid-template-columns:1fr}}
.tease .bookshot{position:relative;width:clamp(220px,26vw,300px)}
.tease .bookshot img{width:100%;border-radius:2px;box-shadow:0 22px 48px rgba(0,0,0,.34),0 2px 0 #E8E2D4,0 4px 0 #DED7C6}
.tease .pgs{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:.9rem 0 0;text-align:center}
.band-forest .tease .pgs,.band-deep .tease .pgs{color:var(--gold)}
.contents{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2rem}
@media(max-width:620px){.contents{grid-template-columns:1fr}}
.contents li{font-family:var(--sans);font-size:.92rem;color:var(--grey);padding:.35rem 0;border-bottom:1px solid var(--rule-bone)}
.band-forest .contents li,.band-deep .contents li{color:#C8C2B4;border-bottom-color:var(--rule-forest)}
.contents li b{color:var(--forest);font-weight:700}
.band-forest .contents li b,.band-deep .contents li b{color:var(--bone)}
/* reader: keep the book inside the viewport on small screens */
.stage{min-width:0}
.book{min-width:0}
@media(max-width:820px){
.stage{gap:4px;padding:8px 6px}
.book{height:auto;width:100%;max-height:100%;aspect-ratio:2/3}
}
@media(max-width:400px){
.turn{width:32px;height:32px}
}
/* slots inside a rung sit on forest even when the band is bone — give them
the dark-ground treatment or the brief is unreadable */
.rung .slot{border-color:rgba(254,202,54,.62);
background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(254,202,54,.08) 11px 22px)}
.rung .slot .what{color:var(--bone)}
.rung .slot .how{color:#C8C2B4}
.rung .slot .tag,.rung .slot .own{color:var(--gold)}
.rung .slot .tag::before{background:var(--gold)}
/* =====================================================================
v4.1 — the horizontal lockup (as the LinkedIn banner sets it) and a
hero with room to breathe.
===================================================================== */
.lockup--h{display:flex;align-items:center;gap:clamp(14px,2vw,22px);margin:0 0 clamp(26px,4vw,44px)}
.lockup--h .mk{height:clamp(58px,7.2vw,92px);width:auto;flex:0 0 auto}
.lockup--h .bar{width:1px;align-self:stretch;background:var(--gold);opacity:.85;flex:0 0 auto;margin:.25em 0}
.lockup--h .wd{display:flex;flex-direction:column;gap:.35em;min-width:0}
.lockup--h .ex{
font-family:var(--sans);font-weight:400;color:var(--bone);
font-size:clamp(.95rem,1.7vw,1.32rem);letter-spacing:.34em;line-height:1;margin:0;
}
.lockup--h .de{
font-family:var(--sans);font-weight:400;color:var(--gold);
font-size:clamp(.58rem,1vw,.8rem);letter-spacing:.26em;line-height:1;margin:0;text-transform:uppercase;
}
.lockup--h .tl{
font-family:var(--serif);font-style:italic;color:var(--gold);
font-size:clamp(.86rem,1.3vw,1.02rem);letter-spacing:0;line-height:1;margin:.15em 0 0;
}
@media(max-width:560px){
.lockup--h .ex{letter-spacing:.24em}
.lockup--h .de{letter-spacing:.18em;font-size:.56rem}
}
/* hero with air: fewer elements, more space between them */
.hero--air{padding:clamp(72px,11vw,148px) 0 clamp(64px,9vw,120px)}
.hero--air .inner{max-width:720px}
.hero--air h1{font-size:clamp(2.6rem,6.4vw,4.4rem);line-height:.98;max-width:15ch}
.hero--air .resolve{
font-family:var(--serif);font-weight:700;color:var(--gold);
font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.05;margin:.55rem 0 0;
}
.hero--air .say{
font-size:clamp(1rem,1.7vw,1.14rem);color:var(--bone-dim);
margin:clamp(22px,3.4vw,34px) 0 0;max-width:52ch;
}
.hero--air .btns{margin-top:clamp(26px,4vw,40px)}
.hero--air .quiet{
font-family:var(--sans);font-size:.86rem;font-weight:700;color:var(--sage-light);
text-decoration:none;border-bottom:1px solid rgba(157,185,172,.4);padding-bottom:2px;
}
.hero--air .quiet:hover{color:var(--gold);border-bottom-color:var(--gold)}
/* hero options sheet (not in the nav — a decision aid) */
.opt{border-top:1px solid var(--rule-bone);padding:2.4rem 0}
.opt:first-of-type{border-top:0}
.opt .lab{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 1rem}
.optbox{background:var(--forest);border-radius:4px;padding:clamp(30px,5vw,54px);position:relative;overflow:hidden}
.optbox h3{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.9rem);color:var(--bone);line-height:1;margin:0;max-width:16ch}
.optbox .r{font-family:var(--serif);font-weight:700;color:var(--gold);font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.1;margin:.6rem 0 0;max-width:36ch}
.optbox .s{font-family:var(--serif);color:#C8C2B4;font-size:1rem;margin:1.1rem 0 0;max-width:48ch}
.opt .why{font-family:var(--sans);font-size:.92rem;color:var(--grey);margin:1rem 0 0;max-width:64ch}
.opt .why b{color:var(--forest)}
/* (superseded — the PXO device is now the drawn mark, defined below) */
/* ---------- the X as titling motif ----------
Every section marker was a generic gold bar. It is now the painted X and a
short rule — the same mark at three sizes across the site: oversize as
section furniture, small as a section marker, tiny as a list bullet. */
.rule{
width:78px;height:15px;border:0;margin:0 0 1.4rem;background:transparent;
position:relative;
}
.rule::before{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:26px;height:22px;
background:url("img/pxo-x-real.png") center/contain no-repeat;
}
.rule::after{
content:"";position:absolute;left:27px;right:0;top:50%;transform:translateY(-50%);
height:2px;background:var(--gold-deep);
}
.band-forest .rule,.band-deep .rule{background:transparent}
.band-forest .rule::after,.band-deep .rule::after{background:var(--gold)}
.section-rule{
width:78px;height:15px;border:0;margin:0 0 1.4rem;background:transparent;position:relative;
}
.section-rule::before{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:26px;height:22px;background:url("img/pxo-x-real.png") center/contain no-repeat;
}
.section-rule::after{
content:"";position:absolute;left:27px;right:0;top:50%;transform:translateY(-50%);
height:2px;background:var(--gold-deep);
}
.band-forest .section-rule::after,.band-deep .section-rule::after{background:var(--gold)}
/* ---------- eyebrows: they were getting lost ----------
Were .7rem in --sage (#6F9483), which measures 2.86:1 on bone — under AA
for small text as well as visually weak. Bigger, tighter tracking, and the
brand's own text gold on light grounds. */
.eyebrow{
font-size:.84rem;letter-spacing:.19em;font-weight:700;
color:var(--gold-ink);margin:0 0 .95rem;
}
.band-forest .eyebrow,.band-deep .eyebrow,.hero .eyebrow,.phero .eyebrow{color:var(--gold)}
.card .eyebrow,.cgroup .eyebrow{font-size:.74rem;letter-spacing:.16em}
.opt .lab{font-size:.78rem;letter-spacing:.17em}
/* the titling X was reading as a smudge at 19px — give it presence */
.rule,.section-rule{width:96px;height:20px;margin:0 0 1.5rem}
.rule::before,.section-rule::before{width:25px;height:21px}
.rule::after,.section-rule::after{left:35px;height:2.5px}
/* ---------- eX > X > Xer > PXO — the progression ----------
The brand's own vocabulary used as structure rather than decoration. Each
term is glossed in plain English directly beneath it, so it teaches on
first read instead of assuming. */
.prog{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:2.4rem 0 0;align-items:stretch}
@media(max-width:860px){.prog{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.prog{grid-template-columns:1fr}}
.prog .st{
position:relative;padding:26px clamp(18px,2.4vw,30px) 28px;
border-left:1px solid var(--rule-forest);
}
.prog .st:first-child{border-left:0}
@media(max-width:860px){
.prog .st:nth-child(odd){border-left:0}
.prog .st:nth-child(n+3){border-top:1px solid var(--rule-forest)}
}
@media(max-width:520px){
.prog .st{border-left:0;border-top:1px solid var(--rule-forest)}
.prog .st:first-child{border-top:0}
}
.prog .tm{
font-family:var(--serif);font-weight:700;line-height:1;margin:0 0 .55rem;
font-size:clamp(2rem,4.4vw,3rem);color:var(--bone);
}
.prog .tm .lc{color:var(--sage-light);font-size:.62em;vertical-align:baseline}
.prog .tm img{display:inline-block;vertical-align:baseline;height:.74em;width:auto;margin:0 -.06em}
.prog .st--end .tm{color:var(--gold)}
.prog .gl{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 .5rem}
.prog .st--end .gl{color:var(--bone)}
.prog p.d{font-size:.97rem;line-height:1.5;color:#C8C2B4;margin:0}
.prog .st--end{background:rgba(254,202,54,.06)}
.prog-note{font-family:var(--sans);font-size:.85rem;color:#C8C2B4;margin:1.5rem 0 0;max-width:66ch}
/* stage tag on each door */
.door .stg{
font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--gold);
margin:0 0 .1rem;line-height:1;
}
.door .stg .lc{color:var(--sage-light);font-size:.7em}
.door .stg img{display:inline-block;vertical-align:baseline;height:.72em;width:auto;margin:0 -.06em}
/* ---------- track thumbnails: four objects you can pick up ---------- */
.rung .thumb{
display:block;margin:1.2rem 0 .2rem;line-height:0;border-radius:3px;overflow:hidden;
box-shadow:0 12px 28px rgba(0,0,0,.3);
transition:transform .18s ease, box-shadow .18s ease;
}
.rung a.thumb:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(0,0,0,.4)}
.rung .thumb img{width:100%;height:auto;display:block}
.rung .thumb--soon{box-shadow:none}
.rung .parked{
font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;color:var(--sage-light);
margin:.6rem 0 0;line-height:1.5;
}
@media(max-width:620px){
.rung .thumb{max-width:260px}
}
/* ---------- the manifesto in the hero: an object, not a second offer ----------
No button, no gold, no competing CTA. It sits to the right of the argument
as evidence that the work exists. The census keeps the only gold button on
the page. Hidden below 1000px so the mobile hero stays tight. */
.hero--split .wrap{position:relative;z-index:2}
.hero--split .inner{max-width:640px}
.herobook{display:none}
@media(min-width:1000px){
.herobook{
display:block;position:absolute;right:clamp(20px,4vw,72px);top:50%;
transform:translateY(-50%) rotate(-2.4deg);
width:clamp(190px,17vw,248px);text-decoration:none;z-index:3;
transition:transform .25s ease;
}
.herobook:hover{transform:translateY(-50%) rotate(-1.2deg) scale(1.025)}
.herobook img{
width:100%;display:block;border-radius:2px;
box-shadow:0 30px 60px rgba(0,0,0,.5),0 2px 0 #E8E2D4,0 5px 0 #DED7C6,0 8px 0 #D4CCB9;
}
.herobook .cap{
font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.19em;
text-transform:uppercase;color:var(--sage-light);margin:1rem 0 0;text-align:center;
}
.herobook .cap b{color:var(--gold);display:block;margin-top:.35rem;letter-spacing:.14em}
.herobook:hover .cap b{text-decoration:underline}
}
@media(min-width:1200px){ .hero--split .inner{max-width:700px} }
/* the ghost X stays the biggest statement — the book sits in front of it */
.hero--split .ghostx{opacity:.34;right:-14%}
/* =====================================================================
PALETTE DISCIPLINE — one gold hue, four weights, each with one job.
The old --gold (#FECA36) measured 99% saturation at 60% lightness,
which is definitionally a yellow, not a gold. It stays as GOLD LEAF
because it is the colour of the painted artwork and the published
podcast art — but it belongs to the mark, never to a flat field.
===================================================================== */
:root{
--gold-leaf:#FECA36; /* the mark only. Never a large flat fill. */
--gold:#D4AF37; /* the working gold: buttons, accents on dark */
--gold-rule:#C09A3C; /* hairlines and dividers on light grounds */
--gold-ink:#7E6023; /* gold as TEXT on light grounds — 5.19:1 on bone */
}
/* ---------- the PXO wordmark in copy ----------
BRAND RULE: where PXO appears as the mark it is the DRAWN letterforms,
never body type with a painted X dropped into it. Two files so it sits
correctly on either ground; measured so the drawn cap height matches
the surrounding type. */
.pxo{white-space:nowrap}
.pxo img{height:1.02em;width:auto;vertical-align:-.026em;display:inline-block;margin:0 .07em}
.pxo .d{display:none}
.band-forest .pxo .d,.band-deep .pxo .d,.hero .pxo .d,.phero .pxo .d,
.optbox .pxo .d{display:inline-block}
.band-forest .pxo .l,.band-deep .pxo .l,.hero .pxo .l,.phero .pxo .l,
.optbox .pxo .l{display:none}
/* ---------- the mobile "dirty green" ----------
Diagnosis: on a 390px viewport the oversize ghost X covers most of the
hero at .30 opacity, and it sits on top of a radial gradient whose light
patch lands in the same place. Two translucent olive layers over forest
read as mottled, not as furniture. On desktop the X is proportionally
small and the effect never appears.
Fix: flatten the gradient and quieten the X below 820px. The green is
correct — it was being covered. */
@media(max-width:820px){
.hero{background:linear-gradient(178deg,var(--forest) 0%,var(--forest-deep) 100%)}
.hero .ghostx{right:-42%;height:96%;opacity:.13}
.phero{background:linear-gradient(178deg,var(--forest) 0%,var(--forest-deep) 100%)}
.phero .ghostx{right:-44%;height:92%;opacity:.12}
.has-x .sec-x{opacity:.22}
}
/* =====================================================================
v6.1 — I over-corrected the gold yesterday and made the site duller.
#FECA36 was a yellow (99% sat / 60% light). #D4AF37 is a gold but a
TRADITIONAL one (65% sat) — desaturating the only accent by 34 points
is most of why the site started reading less contemporary.
#EFBE33 is the honest middle: 85% sat, 57% light. Still in the gold
zone, keeps the punch. 7.12:1 on forest, 10.63:1 with warm black on it.
===================================================================== */
:root{ --gold:#EFBE33; }
/* ---------- the mark, brought forward ----------
The ghost X was the same semi-transparent shape floating in the same
right-hand position on every band, which reads as a watermark rather
than as design. Bigger, more confident, cropped hard by the band edge
so a fragment bleeds — and placed differently band to band. */
.sec-x{opacity:.62}
.sec-x--right{top:52%;right:-19%;height:min(178%,1040px)}
.sec-x--left{top:48%;left:-21%;height:min(178%,1040px)}
.sec-x--tr{top:-34%;right:-13%;height:min(150%,880px)}
.sec-x--bl{bottom:-36%;left:-15%;height:min(150%,880px)}
/* a fragment, cropped so only the crossing shows */
.sec-x--crop{top:-58%;right:-6%;height:min(240%,1320px);opacity:.5}
.sec-x--edge{bottom:-52%;right:8%;height:min(200%,1160px);opacity:.42}
.band-bone2 .sec-x,section:not([class]) .sec-x{opacity:.10}
.band-bone2 .sec-x--crop{opacity:.09}
/* the painted X as a section transition — exists, never used */
.xbreak{display:flex;align-items:center;justify-content:center;gap:16px;margin:0;padding:34px 0 0}
.xbreak img{height:13px;width:auto;opacity:.55}
.xbreak img:nth-child(2){height:21px;opacity:.9}
/* ---------- mobile: stop the single-column stack ----------
Every grid was collapsing to one column, so the homepage became 24
blocks in a row and ran 11,104px against 6,651px on desktop. */
@media(max-width:620px){
.prog{grid-template-columns:1fr 1fr}
.prog .st{padding:20px 15px 22px}
.prog .st:nth-child(odd){border-left:0}
.prog .st:nth-child(n+3){border-top:1px solid var(--rule-forest)}
.prog .tm{font-size:1.85rem}
.prog p.d{font-size:.9rem}
.portraits{grid-template-columns:1fr 1fr}
.portraits .slot{min-height:0;padding:18px 15px}
.portraits .slot .what{font-size:.95rem}
.portraits .slot .how{font-size:.78rem}
.track{grid-template-columns:1fr 1fr}
.rung{padding:20px 16px 22px}
.rung h3{font-size:1.04rem}
.rung p{font-size:.9rem}
.rung .thumb{max-width:none}
.voices{grid-template-columns:1fr}
}
@media(max-width:820px){
main > section{padding-top:44px;padding-bottom:46px}
.hero--air{padding-top:52px;padding-bottom:52px}
h2{font-size:clamp(1.55rem,6.4vw,2rem)}
.lead{font-size:1.05rem}
.doors--4 .door{padding:18px 18px 20px}
.doors--4 .door p{font-size:.9rem;margin-bottom:.7rem}
.figures{margin-top:1.5rem}
.g3{gap:18px}
.vote label{font-size:.8rem;padding:.42em .8em}
.vote{gap:7px}
.chips span{font-size:.78rem;padding:.36em .7em}
.stats{grid-template-columns:1fr 1fr}
.slot{padding:16px 15px}
.slot .how{font-size:.8rem}
.eps li{padding:15px 0}
}
/* ---------- scale contrast beats uniform watermarking ----------
Every band carrying a similar-size X flattens the effect: it reads as
wallpaper. One band gets an enormous, hard-cropped X; the rest get a
marker or nothing. The hero X is now cropped by the section so only the
crossing and one arm show — a fragment reads as designed, a whole shape
floating in the frame reads as a watermark. */
.hero .ghostx{top:-34%;right:-17%;height:224%;opacity:.5;transform:none}
@media(max-width:820px){.hero .ghostx{top:-14%;right:-46%;height:118%;opacity:.13}}
.phero .ghostx{top:-30%;right:-19%;height:196%;opacity:.42;transform:none}
@media(max-width:820px){.phero .ghostx{top:-10%;right:-48%;height:112%;opacity:.12}}
/* the crossing is the recognisable part of the mark — crop the arms, never
the intersection. Previous setting pushed the crossing below the fold of
the band and it read as two abstract diagonals. */
.hero .ghostx{top:-16%;right:-20%;height:178%;opacity:.5}
.phero .ghostx{top:-14%;right:-21%;height:168%;opacity:.42}
@media(max-width:820px){
.hero .ghostx{top:-12%;right:-46%;height:112%;opacity:.13}
.phero .ghostx{top:-10%;right:-48%;height:108%;opacity:.12}
}
/* stage tags on the doors were rendering the mark at ~11px — mud. */
.door .stg{font-size:1.3rem;margin-bottom:.2rem}
/* Cropping this mark does not work and the brand doc already said why:
the X has one thick stroke and one hairline, so cropping loses the
hairline and the X becomes a V (principle six, "ghosting is asymmetric",
arriving from a different direction). Whole mark, larger, more present. */
.hero .ghostx{top:50%;right:-11%;height:162%;opacity:.46;transform:translateY(-50%)}
.phero .ghostx{top:50%;right:-13%;height:172%;opacity:.40;transform:translateY(-50%)}
@media(max-width:820px){
.hero .ghostx{top:50%;right:-44%;height:104%;opacity:.13;transform:translateY(-50%)}
.phero .ghostx{top:50%;right:-46%;height:100%;opacity:.12;transform:translateY(-50%)}
}
.sec-x--crop{top:50%;right:-16%;height:min(190%,1100px);opacity:.5;transform:translateY(-50%)}
.sec-x--edge{top:50%;left:-17%;height:min(180%,1040px);opacity:.4;transform:translateY(-50%) scaleX(-1)}
/* ---------- the census invitation ----------
Not a pop-up. A slim bar that never covers content, only appears once
someone has scrolled past the census without answering, remembers being
dismissed, and never returns for anyone who has answered. The MEA quiz
modal is the counter-example: it covers the hero, has a 20px close target,
and interrupts a senior reader mid-sentence. */
.censusbar{
position:fixed;left:0;right:0;bottom:0;z-index:60;
background:rgba(19,39,32,.97);backdrop-filter:blur(10px);
border-top:2px solid var(--gold);
transform:translateY(102%);transition:transform .38s cubic-bezier(.32,.72,.3,1);
padding:14px 0;
}
.censusbar.is-up{transform:translateY(0)}
.censusbar .wrap{display:flex;align-items:center;gap:clamp(12px,2.4vw,26px)}
.censusbar .cb-x{height:30px;width:auto;flex:0 0 auto;opacity:.9}
.censusbar .cb-t{flex:1;min-width:0}
.censusbar .cb-t b{
display:block;font-family:var(--serif);font-weight:700;color:var(--bone);
font-size:clamp(.98rem,1.7vw,1.12rem);line-height:1.25;
}
.censusbar .cb-t span{
display:block;font-family:var(--sans);font-size:.8rem;color:var(--sage-light);margin-top:.2rem;
}
.censusbar .btn{flex:0 0 auto;padding:.62em 1.2em;font-size:.86rem}
.censusbar .cb-no{
flex:0 0 auto;background:none;border:0;cursor:pointer;
font-family:var(--sans);font-size:.78rem;color:var(--sage-light);
padding:.6em .7em;text-decoration:underline;text-underline-offset:3px;
}
.censusbar .cb-no:hover{color:var(--bone)}
@media(max-width:700px){
.censusbar{padding:12px 0}
.censusbar .cb-x{display:none}
.censusbar .cb-t span{display:none}
.censusbar .btn{padding:.6em .9em;font-size:.8rem}
.censusbar .cb-no{font-size:.72rem;padding:.5em .35em}
}
@media (prefers-reduced-motion:reduce){.censusbar{transition:none}}
/* inner-page heroes get the same H1 + resolve treatment as the homepage,
so Stage 1 can state a proposition and then land it */
.phero .resolve{
font-family:var(--serif);font-weight:700;color:var(--gold);
font-size:clamp(1.35rem,3vw,2.05rem);line-height:1.08;margin:.5rem 0 0;max-width:26ch;
}
.phero .lead{margin-top:1.15rem}
/* ---------- the descriptor does the recognition work ----------
The H1 is a provocation, which serves directed traffic. A cold arrival
from search needs to know in half a second that this is about them, and
the only thing on the page that says so plainly is the descriptor. It was
set at 11-13px, too small to do that job. */
.lockup--h .de{font-size:clamp(.72rem,1.15vw,.9rem);letter-spacing:.22em;color:var(--gold)}
.lockup--h .wd{gap:.42em}
@media(max-width:560px){.lockup--h .de{font-size:.66rem;letter-spacing:.14em}}
/* beat 4 — the mitigation. Quieter than the benefit, but not a footnote:
it is the reason they stay rather than bookmark and forget. */
.hero--air .say--mit{
margin-top:.5rem;font-size:clamp(.95rem,1.5vw,1.04rem);
color:var(--sage-light);max-width:46ch;
}
.hero--air .say--mit::before{
content:"";display:inline-block;width:18px;height:1px;
background:var(--gold-rule);vertical-align:.32em;margin-right:.5rem;
}
/* the beat map on the decision sheet — shows the structure, not the copy */
.opt .beats{
font-family:var(--sans);font-size:.68rem;letter-spacing:.06em;
color:var(--grey);margin:.9rem 0 0;display:flex;flex-wrap:wrap;
gap:.42rem;align-items:baseline;
}
.opt .beats b{
font-size:.6rem;color:var(--gold-ink);background:rgba(192,154,60,.14);
border-radius:2px;padding:.1rem .3rem;margin-right:.1rem;
}
.opt .beats span{color:var(--gold-rule)}
.optbox .s--mit{color:var(--sage-light);font-size:.92rem;margin-top:.4rem}
.xm{height:1.34em;width:auto;vertical-align:-.34em;display:inline-block;margin:0 -.2em 0 -.1em}
.optbox .r .xm{height:1.3em;vertical-align:-.32em}
h1 .xm{height:1.24em;vertical-align:-.26em}
.resolve .sn,.optbox .r .sn{display:inline-block}
.evid{padding-top:clamp(48px,7vw,88px)}
.evid-h{max-width:24ch;line-height:1.04}
.figs--big{
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(20px,3.4vw,48px);margin:clamp(30px,4.4vw,54px) 0 0;
}
.figs--big .fig{border-top:2px solid var(--gold-rule);padding-top:1rem}
.figs--big .n{
display:block;font-family:var(--serif);font-weight:400;
font-size:clamp(3.1rem,7.4vw,5.6rem);line-height:.92;
color:var(--forest);letter-spacing:-.02em;
}
.figs--big .l{
font-family:var(--sans);font-size:.92rem;line-height:1.5;
color:var(--grey);margin:.7rem 0 0;max-width:30ch;
}
.figs--big .l b{color:var(--forest);font-weight:700}
.evid-so{
font-family:var(--serif);font-style:italic;
font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--forest);
margin:clamp(26px,3.4vw,40px) 0 0;max-width:38ch;
}
@media(max-width:820px){
.figs--big{grid-template-columns:1fr 1fr;gap:22px}
.figs--big .fig:first-child{grid-column:1/-1}
.figs--big .l{font-size:.85rem}
}
.mitline{
font-family:var(--sans);font-size:.88rem;line-height:1.6;
color:var(--grey);margin:1.4rem 0 0;max-width:64ch;
padding-left:1rem;border-left:2px solid var(--gold-rule);
}
.band-forest .mitline,.band-deep .mitline{color:var(--sage-light);border-left-color:var(--gold)}
.mitline a{color:inherit;text-decoration:none;border-bottom:1px solid var(--gold-rule)}
.mitline a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.hero--air h1{font-size:clamp(2.6rem,7.4vw,5.8rem);line-height:.94;max-width:none;letter-spacing:-.015em}
.nw{white-space:nowrap}
.hero--air h1 .xm{height:1.02em;vertical-align:-.19em;margin:0 -.15em 0 -.19em}
.hero--air h1 .hugex{display:block;margin:0 0 .1em}
.hero--air h1 .hugex .xm{height:1.9em;vertical-align:0;margin:0}
.hero--air .resolve{font-size:clamp(1.7rem,4vw,2.9rem);margin-top:.7rem}
.optbox h3 .xm{height:1em;vertical-align:-.18em;margin:0 -.1em 0 -.05em}
.optbox h3 .hugex .xm{height:1.7em;vertical-align:0;margin:0}
@media(max-width:820px){.hero--air h1{font-size:clamp(2.1rem,9.4vw,3.4rem)}}
.figs--4{grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px)}
.figs--4 .n{font-size:clamp(2.6rem,5.4vw,4.4rem)}
.figs--4 .l{font-size:.86rem;max-width:26ch}
@media(max-width:1020px){.figs--4{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.figs--4{grid-template-columns:1fr 1fr;gap:20px}.figs--4 .fig:first-child{grid-column:auto}}
.lockup--bare{align-items:stretch;gap:clamp(12px,1.6vw,18px);margin-bottom:clamp(20px,3.2vw,34px)}
.lockup--bare .bar--lead{width:2px;background:var(--gold);opacity:1;margin:.1em 0;border-radius:1px}
.lockup--bare .wd{justify-content:center;gap:.4em}
.lockup--bare .de{font-size:clamp(.62rem,1.05vw,.84rem);letter-spacing:.28em}
.lockup--bare .tl{font-size:clamp(.9rem,1.4vw,1.1rem)}
.hero--air .resolve .xm{height:1.06em;vertical-align:-.2em;margin:0 -.26em 0 -.24em}
.optbox .r .xm{height:1.02em;vertical-align:-.19em;margin:0 -.24em 0 -.22em}
.lockup--h .tl,.lockup--bare .tl{color:var(--gold-leaf)}
.lockup--bare .bar--lead{background:var(--gold-leaf)}
.lockup--h .de,.lockup--bare .de{color:var(--gold-leaf)}
/* the four-stage progression: one brand set, one cap height, much larger */
.prog .tm{font-size:clamp(2.5rem,5.8vw,3.9rem);min-height:1.06em;display:flex;align-items:baseline}
.prog .tm .lc{font-size:.70em;line-height:1}
.prog .tm img{height:.80em;margin:0 -.05em}
.prog .st--end .tm{color:var(--gold-leaf)}
.door .stg{font-size:1.42rem;margin-bottom:.28rem}
.door .stg .lc{font-size:.70em}
.door .stg img{height:.80em;margin:0 -.05em}
@media(max-width:820px){.prog .tm{font-size:2.4rem}}
.evid-so b{font-style:normal;font-weight:700;color:var(--forest)}
.evid-so{max-width:34ch}
.rung .parked{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--gold-ink);background:rgba(192,154,60,.12);border:0;border-radius:2px;
padding:.3rem .55rem;display:inline-block;margin:.6rem 0 0}
.hero--air .clock{
font-family:var(--sans);font-size:clamp(.66rem,1.05vw,.78rem);font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--gold-leaf);
margin:0 0 clamp(14px,1.8vw,20px);
}
.lockup--hero{display:flex;align-items:stretch;gap:clamp(18px,2.4vw,30px);
margin:0 0 clamp(30px,4.4vw,50px)}
.lockup--hero .mk{height:clamp(84px,10vw,132px);width:auto;flex:0 0 auto;align-self:center}
.lockup--hero .bar{width:3px;background:var(--gold-leaf);border-radius:2px;flex:0 0 auto;margin:6px 0}
.lockup--hero .wd{display:flex;flex-direction:column;justify-content:center;gap:.5em;min-width:0}
.lockup--hero .de{font-family:var(--sans);font-weight:400;color:var(--gold-leaf);
font-size:clamp(.68rem,1.2vw,.95rem);letter-spacing:.24em;line-height:1.3;text-transform:uppercase}
.lockup--hero .tl{font-family:var(--serif);font-style:italic;color:var(--gold-leaf);
font-size:clamp(1.05rem,1.9vw,1.5rem);line-height:1}
@media(max-width:560px){.lockup--hero{gap:14px}.lockup--hero .de{letter-spacing:.16em}}
/* the headline is now the inclusive line, so it sets in bone not gold */
.hero--air h1{font-size:clamp(2.2rem,5.2vw,3.9rem);line-height:1.06;max-width:20ch;letter-spacing:-.01em}
.hero--air .say{margin-top:clamp(20px,2.8vw,30px);max-width:56ch;font-size:clamp(1rem,1.6vw,1.15rem)}
/* ---------- the numbers, as a strip rather than a band ---------- */
.strip{background:var(--bone-2);padding:clamp(34px,4.4vw,54px) 0;border-bottom:1px solid var(--rule-bone)}
.strip-in{display:grid;grid-template-columns:minmax(220px,26%) 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.strip-say h2{font-family:var(--serif);font-size:clamp(1.5rem,2.7vw,2.15rem);
line-height:1.06;margin:0;color:var(--forest)}
.strip-say .src{font-size:.62rem;line-height:1.5;color:var(--grey);margin:.9rem 0 0;max-width:34ch}
.strip-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.strip-figs .f{border-top:2px solid var(--gold-rule);padding-top:.7rem}
.strip-figs .n{display:block;font-family:var(--serif);font-size:clamp(1.7rem,3.2vw,2.6rem);
line-height:1;color:var(--forest);letter-spacing:-.02em}
.strip-figs p{font-family:var(--sans);font-size:.76rem;line-height:1.45;color:var(--grey);
margin:.45rem 0 0;max-width:22ch}
@media(max-width:900px){
.strip-in{grid-template-columns:1fr;gap:22px}
.strip-figs{grid-template-columns:1fr 1fr}
}
/* the lock: mark and tagline as one unit, descriptor alongside */
.lockup--hero .lk{display:flex;flex-direction:column;align-items:center;gap:.55em;flex:0 0 auto}
.lockup--hero .lk .mk{height:clamp(84px,10vw,130px);width:auto;display:block}
.lockup--hero .lk .tl{font-family:var(--serif);font-style:italic;color:var(--gold-leaf);
font-size:clamp(.92rem,1.5vw,1.22rem);line-height:1;white-space:nowrap}
.lockup--hero .wd{justify-content:center}
.lockup--hero .de{max-width:none;white-space:nowrap}
/* H1 carries the drawn mark inside two acronyms */
.hero--air h1{font-size:clamp(1.9rem,4.6vw,3.5rem);line-height:1.1;max-width:22ch}
.hero--air h1 .xm{height:.94em;vertical-align:-.17em;margin:0 -.17em 0 -.19em}
.hero--air .resolve{font-size:clamp(1.4rem,2.9vw,2.15rem);margin-top:.85rem;max-width:22ch}
/* per-figure sourcing beats one long credit line */
.strip-figs .ref{font-size:.6rem;line-height:1.4;color:var(--gold-ink);margin:.5rem 0 0;
letter-spacing:.02em;max-width:24ch}
.strip-say .src{display:none}
@media(max-width:760px){.lockup--hero .de{white-space:normal;max-width:16ch}}
.hero--air .resolve{color:var(--gold-leaf)}
:root{ --gold:#FECA36; --gold-leaf:#FECA36; }
/* the brush X inside the tagline, tying the lock to the mark */
.lockup--hero .tl .tx{height:.86em;width:auto;vertical-align:-.14em;
display:inline-block;margin:0 -.16em 0 -.13em}
/* ---- the hero, decongested ---------------------------------------- */
.hero--air h1{font-size:clamp(1.8rem,3.9vw,3rem);line-height:1.14;max-width:none;
margin-bottom:clamp(16px,2.2vw,26px)}
.hero--air .resolve{
font-size:clamp(1.15rem,2.15vw,1.72rem);line-height:1.15;max-width:none;
white-space:nowrap;margin:0;color:var(--gold);
}
@media(max-width:820px){.hero--air .resolve{white-space:normal;font-size:1.3rem}}
/* H2 to H3 is the biggest gap in the hero — they are different jobs */
.hero--air .say{margin-top:clamp(38px,5.4vw,64px);max-width:54ch}
.hero--air .cta-row{margin-top:clamp(46px,6.4vw,80px);display:flex;align-items:center;
gap:clamp(22px,3.4vw,46px);flex-wrap:wrap}
/* ---- the census, given its own identity --------------------------- */
.btn--census{
display:inline-block;white-space:nowrap;
background:var(--gold);color:var(--forest);border:0;border-radius:3px;
font-family:var(--sans);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
font-size:clamp(.8rem,1.25vw,.95rem);padding:.95rem 1.5rem .95rem 1.15rem;
text-decoration:none;transition:transform .12s,box-shadow .12s;
box-shadow:0 2px 0 rgba(0,0,0,.18);
}
.btn--census:hover{transform:translateY(-1px);box-shadow:0 4px 0 rgba(0,0,0,.2)}
.btn--census .bxs{height:1.12em;width:auto;vertical-align:-.24em;margin:0 -.2em;display:inline-block}
/* the manifesto, present but quiet, so it does not stop the scroll */
.bookcue{display:inline-flex;align-items:center;gap:.85rem;text-decoration:none}
.bookcue img{height:64px;width:auto;border-radius:2px;box-shadow:0 3px 12px rgba(0,0,0,.35);
transition:transform .15s}
.bookcue:hover img{transform:translateY(-2px)}
.bookcue span{display:flex;flex-direction:column;gap:.18rem;
font-family:var(--sans);font-size:.86rem;font-weight:700;color:var(--sage-light)}
.bookcue span b{font-weight:400;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--gold-rule)}
.bookcue:hover span{color:var(--gold)}
@media(max-width:560px){.bookcue img{height:52px}}
:root{
--disp:'Instrument Serif',Georgia,serif;
--serif:'Newsreader',Georgia,serif;
--sans:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
--gold:#E3B733; --gold-leaf:#E3B733;
--gold-rule:#B08F35; --gold-ink:#7A5E22;
}
h1,h2,h3,.hero--air .resolve,.strip-say h2,.strip-figs .n,.figs .n,
.optbox h3,.evid-h,.lockup--hero .tl{font-family:var(--disp);font-weight:400}
h1{letter-spacing:-.006em}
.hero--air h1{font-size:clamp(2.1rem,4.9vw,3.6rem);line-height:1.07}
.hero--air .resolve{font-size:clamp(1.25rem,2.5vw,1.95rem);line-height:1.14;font-weight:400}
/* the tagline in the lock is the one place the SANS carries brand weight,
so it sits distinct from the display serif above it */
.lockup--hero .tl{font-family:var(--sans);font-weight:600;letter-spacing:-.01em;
font-size:clamp(.95rem,1.5vw,1.18rem);color:var(--bone)}
.lockup--hero .de{font-family:var(--sans);font-weight:500;letter-spacing:.22em}
body,p,li,.say,.lead,.dim{font-family:var(--serif)}
.nav a,.btn,.eyebrow,.flab,.fnote,.ref,.src,.cost,.gl,.stg,.de,
.strip-figs p,.figs p,.meta,.tag,.own,.how{font-family:var(--sans)}
/* hover: the brush sweeps the button. Replaces #FFD75C, which was brighter
than the brand colour — backwards for a hover state. */
.btn--census{position:relative;overflow:hidden}
.btn--census .sweep{position:absolute;left:-8%;top:50%;height:230%;width:auto;opacity:0;
transform:translate(-30%,-50%) rotate(-4deg);transition:opacity .22s,transform .34s;z-index:1;pointer-events:none}
.btn--census:hover .sweep{opacity:.2;transform:translate(6%,-50%) rotate(-4deg)}
.btn--census .lbl{position:relative;z-index:2}
.btn--gold:hover{background:#EFC64A}
.lockup--hero .lk .tl{font-family:var(--sans);font-style:normal;font-weight:600;
color:var(--bone);letter-spacing:-.01em;font-size:clamp(.95rem,1.5vw,1.18rem)}
.lockup--hero .lk .tl .tx{height:.9em;vertical-align:-.16em;margin:0 -.15em 0 -.12em}
.cta{
display:inline-flex;align-items:center;justify-content:center;
position:relative;overflow:hidden;white-space:nowrap;text-decoration:none;
font-family:var(--sans);font-weight:600;letter-spacing:.055em;text-transform:uppercase;
font-size:clamp(.72rem,1.02vw,.8rem);line-height:1;
padding:.78rem 1.15rem;border-radius:3px;transition:transform .12s,box-shadow .14s,background .16s;
}
.cta .lbl{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.42rem}
.cta .mki{height:1.06em;width:auto;display:inline-block;vertical-align:-.1em}
.cta .bk{height:2.05em;width:auto;border-radius:1px;margin-right:.15rem;
box-shadow:0 2px 6px rgba(0,0,0,.4)}
.cta--gold{background:var(--gold);color:var(--forest);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.cta--gold:hover{transform:translateY(-1px);box-shadow:0 4px 0 rgba(0,0,0,.22)}
.cta--ghost{color:var(--bone);border:1px solid rgba(244,241,234,.3);padding-left:.6rem}
.cta--ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(227,183,51,.07)}
.cta .sweep{position:absolute;left:-8%;top:50%;height:250%;width:auto;opacity:0;
transform:translate(-30%,-50%) rotate(-4deg);transition:opacity .22s,transform .34s;z-index:1;pointer-events:none}
.cta--gold:hover .sweep{opacity:.2;transform:translate(8%,-50%) rotate(-4deg)}
/* the three beats, under the descriptor, inside the lock */
.lockup--hero .wd{flex-direction:column;justify-content:center;gap:.85em}
.lockup--hero .beats{
font-family:var(--sans);font-weight:600;font-size:clamp(.72rem,1.05vw,.84rem);
letter-spacing:.14em;text-transform:uppercase;color:var(--bone);opacity:.92;
}
.hero--air .cta-row{gap:clamp(12px,1.6vw,18px);margin-top:clamp(40px,5.4vw,66px)}
.cta::before{content:none}
.cta .mki{height:1.45em;vertical-align:-.28em;margin:0 .05em}
.cta .bk{height:2.4em}
.cta--ghost{background:transparent!important;box-shadow:none!important}
.lockup--hero .lk .tl{
font-family:var(--serif);font-style:normal;font-weight:600;
color:var(--bone);letter-spacing:-.002em;
font-size:clamp(1rem,1.62vw,1.26rem);
}
.lockup--hero .lk .tl .tx{height:.92em;vertical-align:-.15em;margin:0 -.14em 0 -.11em}
.lockup--hero{margin-bottom:clamp(58px,8.4vw,104px)}
.hero--air{padding:clamp(44px,6vw,84px) 0 clamp(52px,7vw,96px)}
/* ---------- ground rhythm ---------- */
.strip{background:var(--bone-2)}
.what{background:var(--bone);padding:clamp(66px,8vw,110px) 0}
.census{background:var(--bone-2);padding:clamp(56px,7vw,92px) 0}
.levels{background:var(--bone);padding:clamp(66px,8vw,108px) 0}
.doorsec{background:var(--bone-2);padding:clamp(62px,7.4vw,100px) 0}
.endcta{background:var(--bone);padding:clamp(58px,7vw,92px) 0;border-top:1px solid var(--rule-bone)}
/* ---------- the strip, narrowed, with an eyebrow per figure ---------- */
.strip-in{grid-template-columns:minmax(210px,23%) 1fr;gap:clamp(26px,4vw,58px)}
.strip-say h2{font-size:clamp(1.28rem,2.1vw,1.75rem);line-height:1.14;max-width:16ch}
.strip-say .kick{font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--gold-ink);margin:1rem 0 0}
.strip-figs{gap:clamp(16px,2.2vw,30px)}
.strip-figs .fe{font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--gold-ink);margin:0 0 .5rem}
.strip-figs .f{border-top:2px solid var(--gold-rule);padding-top:.75rem}
.strip-figs .n{font-size:clamp(1.55rem,2.9vw,2.3rem)}
.strip-figs p{font-size:.74rem}
.strip-figs .ref{color:var(--grey);opacity:.75;margin-top:.55rem}
/* ---------- what this actually is ---------- */
.what .lead{max-width:56ch;font-size:clamp(1.02rem,1.6vw,1.18rem)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,50px);
margin:clamp(34px,4.4vw,54px) 0 0}
.three .t{border-top:2px solid var(--gold-rule);padding-top:1rem}
.three .tn{font-family:var(--disp);font-size:clamp(1.15rem,1.9vw,1.45rem);color:var(--forest);margin:0 0 .55rem}
.three .t p{font-size:.95rem;line-height:1.62;color:var(--grey);margin:0}
.what-so{font-family:var(--disp);font-size:clamp(1.1rem,1.85vw,1.4rem);color:var(--forest);
margin:clamp(34px,4.2vw,52px) 0 0;max-width:44ch;line-height:1.3}
@media(max-width:820px){.three{grid-template-columns:1fr;gap:26px}}
/* ---------- the census, as an instrument ---------- */
.cform{background:var(--bone);border:1px solid var(--rule-bone);border-top:4px solid var(--gold);
border-radius:4px;padding:clamp(26px,3.6vw,44px);box-shadow:0 10px 34px rgba(28,58,48,.07)}
.cform-hd{display:flex;align-items:flex-start;gap:1rem;margin:0 0 .9rem}
.cform-hd .cmk{height:38px;width:auto;filter:none}
.ceyebrow{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold-ink);margin:0 0 .3rem}
.cform h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0;line-height:1.1}
.clead{font-size:.98rem;line-height:1.6;color:var(--grey);margin:0 0 1.5rem;max-width:56ch}
.vote--short{margin-bottom:.9rem}
.cmore{margin:0 0 1.4rem}
.cmore a{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--gold-ink);
text-decoration:none;border-bottom:1px solid var(--gold-rule)}
.cmore a:hover{color:var(--forest);border-bottom-color:var(--forest)}
/* ---------- the levels: iconography, owned ---------- */
.levels .prog{background:transparent}
.levels .st{border-left:1px solid var(--rule-bone);padding:0 clamp(14px,1.8vw,24px)}
.levels .st:first-child{border-left:0;padding-left:0}
.levels .st--end{background:transparent}
.levels .tm,.doors .stg{color:var(--forest)}
.prog .tm{font-family:var(--disp);display:flex;align-items:baseline;gap:0}
.prog .tm .lc,.doors .stg .lc{font-family:var(--sans);font-weight:700;color:var(--forest);
font-size:.56em;letter-spacing:-.01em}
.prog .tm .lc--suf,.doors .stg .lc--suf{margin-left:.04em}
.prog .tm img{height:.86em;width:auto;margin:0 -.03em}
.prog .tm .tmk{height:.78em;width:auto;margin:0}
.levels .gl{color:var(--gold-ink)}
.levels p.d{color:var(--grey);font-size:.93rem}
.levels .st--end .gl{color:var(--gold-ink)}
.levels .st--end .tm{color:var(--forest)}
/* ---------- the doors ---------- */
.doorsec .door{background:var(--bone);border:1px solid var(--rule-bone);border-radius:4px;
padding:clamp(18px,2.2vw,26px)}
.doorsec .door h3{color:var(--forest);font-family:var(--disp);font-weight:400}
.doorsec .door p{color:var(--grey)}
.doorsec .door .st{color:var(--gold-ink)}
.doorsec .stg{font-family:var(--disp);color:var(--forest);display:flex;align-items:baseline}
.doorsec .stg img{height:.82em;width:auto}
.doorsec .more{color:var(--gold-ink)}
.doorsec .more:hover{color:var(--forest)}
/* the diagnostic, announced honestly rather than dressed as a placeholder */
.diag{display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap;
margin:clamp(30px,4vw,48px) 0 0;padding:clamp(20px,2.6vw,30px);
border:1px dashed var(--gold-rule);border-radius:4px;background:rgba(227,183,51,.06)}
.diag h3{font-family:var(--disp);font-weight:400;font-size:clamp(1.1rem,1.8vw,1.35rem);
color:var(--forest);margin:.3rem 0 .4rem}
.diag p{font-size:.9rem;color:var(--grey);margin:0;max-width:52ch}
.deyebrow{font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;color:var(--gold-ink);margin:0}
.cta--soon{color:var(--gold-ink);border-color:var(--gold-rule);cursor:default;margin-left:auto}
/* ---------- the standing CTA panel ---------- */
.ec{display:grid;grid-template-columns:minmax(230px,28%) 1fr;gap:clamp(26px,4vw,60px);align-items:center}
.ec-say h2{font-size:clamp(1.5rem,2.7vw,2.15rem);line-height:1.1;margin:0 0 .55rem;max-width:14ch}
.ec-say p{font-size:.93rem;line-height:1.6;color:var(--grey);margin:0;max-width:36ch}
.ec-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.eco{display:flex;align-items:center;gap:.75rem;text-decoration:none;
background:var(--bone-2);border:1px solid var(--rule-bone);border-radius:4px;
padding:.95rem 1.05rem;transition:border-color .14s,transform .12s,background .14s}
.eco:hover{border-color:var(--gold);transform:translateY(-2px);background:#fff}
.eco .pmk{height:26px;width:auto;flex:0 0 auto}
.eco-t{display:flex;flex-direction:column;gap:.16rem;font-family:var(--sans);
font-weight:600;font-size:.86rem;color:var(--forest);line-height:1.2}
.eco-t b{font-weight:400;font-size:.68rem;letter-spacing:.03em;color:var(--grey)}
.eco--go{background:var(--gold);border-color:var(--gold)}
.eco--go:hover{background:#EFC64A;border-color:#EFC64A}
.eco--go .eco-t b{color:rgba(28,58,48,.72)}
@media(max-width:900px){.ec{grid-template-columns:1fr;gap:24px}.ec-opts{grid-template-columns:1fr}}
/* the nav pill */
.navcta{padding:.6rem .95rem;font-size:.72rem}
.navcta .mki{height:1.3em;vertical-align:-.26em}
@media(max-width:900px){
.strip-in{grid-template-columns:1fr;gap:22px}
.strip-figs{grid-template-columns:1fr 1fr;gap:20px}
.strip-figs p{font-size:.78rem}
}
@media(max-width:560px){
.cform-hd .cmk{height:30px}
.levels .st{border-left:0;padding:0}
}
.three .t p.tn{font-family:var(--disp);font-size:clamp(1.15rem,1.9vw,1.45rem);
color:var(--forest);line-height:1.15;margin:0 0 .6rem}
/* any drawn X set inline in running copy takes the type's size, never its own */
.levels .lead img,.what p img,.doorsec .lead img{height:.92em;width:auto;
vertical-align:-.15em;display:inline-block;margin:0 -.1em}
.levels .lead b{font-family:var(--disp);font-weight:400;font-size:1.15em}
.what{padding-bottom:clamp(48px,5.4vw,72px)}
.census{padding-top:clamp(40px,4.6vw,64px)}
.census.band-forest{background:var(--forest);position:relative;overflow:hidden;
padding:clamp(62px,7.6vw,104px) 0}
.census .cform{background:rgba(244,241,234,.045);border:1px solid rgba(227,183,51,.28);
border-top:4px solid var(--gold);box-shadow:0 18px 50px rgba(0,0,0,.22)}
.census .cform h2{color:var(--bone)}
.census .ceyebrow{color:var(--gold)}
.census .clead{color:#CFD8D1}
.census .fnote{color:#9DB9AC}
.census .cmore a{color:var(--gold);border-bottom-color:rgba(227,183,51,.5)}
.census .cmore a:hover{color:var(--bone);border-bottom-color:var(--bone)}
.census .vote label{background:rgba(244,241,234,.06);border-color:rgba(244,241,234,.22);color:var(--bone)}
.census .vote label:hover{border-color:var(--gold);background:rgba(227,183,51,.12)}
.census .vote input:checked + label{background:var(--gold);border-color:var(--gold);color:var(--forest)}
.census .fld{background:rgba(244,241,234,.07);border-color:rgba(244,241,234,.25);color:var(--bone)}
.census .fld::placeholder{color:rgba(244,241,234,.5)}
.endcta.band-deep{background:var(--forest-deep,#132720);border-top:0;position:relative;overflow:hidden}
.endcta .ec-say h2{color:var(--bone)}
.endcta .ec-say p{color:#9DB9AC}
.endcta .eco{background:rgba(244,241,234,.05);border-color:rgba(244,241,234,.18)}
.endcta .eco:hover{background:rgba(244,241,234,.1);border-color:var(--gold)}
.endcta .eco-t{color:var(--bone)}
.endcta .eco-t b{color:#9DB9AC}
.endcta .eco .pmk{filter:brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(316%) hue-rotate(3deg) brightness(101%) contrast(94%)}
.endcta .eco--go{background:var(--gold);border-color:var(--gold)}
.endcta .eco--go .eco-t{color:var(--forest)}
.endcta .eco--go .eco-t b{color:rgba(28,58,48,.72)}
.endcta .eco--go .pmk{filter:none}
/* dark bands: bone type and a much quieter mark. The old complaint was the
watermark at .30 behind dim grey, never the green. */
.band-forest .sec-x,.band-deep .sec-x,.census .ghostx{opacity:.06}
.doorsec.band-bone2{background:var(--bone-2)}
/* two light bands next to each other need a stated edge, or they merge */
.strip{border-top:1px solid var(--rule-bone);border-bottom:1px solid var(--rule-bone)}
.doorsec.band-bone2{border-top:1px solid var(--rule-bone)}
.cta{
height:46px;min-width:196px;padding:0 1.15rem;
display:inline-flex;align-items:center;justify-content:center;
font-size:.76rem;letter-spacing:.055em;
}
.cta .lbl{gap:.45rem;white-space:nowrap}
.cta .mki{height:17px;width:auto;vertical-align:middle}
.cta--dark{background:var(--forest);color:var(--bone);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.cta--dark:hover{transform:translateY(-1px);box-shadow:0 4px 0 rgba(0,0,0,.2)}
.cta--dark .mki{filter:brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(316%) hue-rotate(3deg) brightness(101%) contrast(94%)}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.navcta{height:38px;min-width:0;padding:0 .9rem;font-size:.7rem}
.navcta .mki{height:15px}
.addmine .cta{flex:0 0 auto}
@media(max-width:480px){.cta{min-width:0;width:100%}}
/* ---- one pill, one size ---- */
.cta{height:46px;min-width:200px;padding:0 1.2rem;display:inline-flex;
align-items:center;justify-content:center;font-size:.77rem;letter-spacing:.05em}
.cta .lbl{gap:.45rem;white-space:nowrap}
.cta .mki{height:17px;width:auto}
.cta--dark{background:var(--forest);color:var(--bone);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.cta--dark:hover{transform:translateY(-1px)}
.cta--dark .mki{filter:brightness(0) invert(1)}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.navcta{height:38px;min-width:0;padding:0 .95rem;font-size:.71rem}
.navcta .mki{height:15px}
@media(max-width:480px){.cta{min-width:0;width:100%}}
/* ---- the stats, as an inset panel ---- */
.strip{background:var(--bone);border:0;padding:clamp(38px,4.6vw,62px) 0}
.strip-panel{background:var(--bone-2);border:1px solid var(--rule-bone);border-radius:5px;
padding:clamp(24px,3vw,38px) clamp(24px,3.2vw,44px);box-shadow:0 6px 22px rgba(28,58,48,.05)}
.strip-in{grid-template-columns:minmax(190px,22%) 1fr;gap:clamp(24px,3.4vw,48px);align-items:center}
.strip-say h2{font-size:clamp(1.18rem,1.85vw,1.5rem);max-width:15ch}
.strip-figs .n{font-size:clamp(1.5rem,2.5vw,2.05rem)}
.strip-figs p{font-size:.78rem}
.strip-figs .fe{font-size:.63rem}
.strip-figs .ref{font-size:.64rem}
/* ---- what it is: own ground, far less air ---- */
.what{background:var(--bone-2);padding:clamp(46px,5.2vw,72px) 0}
.three{margin-top:clamp(26px,3vw,38px);gap:clamp(22px,2.8vw,40px)}
.what-so{margin-top:clamp(26px,3vw,38px)}
.what .lead{margin-top:.7rem}
/* ---- four stages, on forest, marks in brand ---- */
.levels.band-forest{background:var(--forest);padding:clamp(52px,6.2vw,84px) 0;position:relative;overflow:hidden}
.levels h2,.levels .lead{color:var(--bone)}
.levels .lead{opacity:.85}
.levels .st{border-left:1px solid rgba(244,241,234,.16)}
.levels .tm,.levels .tm .lc{color:var(--bone)}
.levels .gl{color:var(--gold)}
.levels p.d{color:#C6D0C9;font-size:.94rem}
.prog .tm{min-height:1.15em;font-size:clamp(2.1rem,4.4vw,3rem)}
.prog .tm img{height:.8em}
.prog .tm .tmk{height:.72em}
/* ---- where you are: dark, so it stops clashing with the stages ---- */
.doorsec.band-deep{background:var(--forest-deep,#132720);padding:clamp(52px,6.2vw,84px) 0}
.doorsec h2,.doorsec .lead{color:var(--bone)}
.doorsec .lead{opacity:.85}
.doorsec .door{background:rgba(244,241,234,.05);border:1px solid rgba(244,241,234,.16)}
.doorsec .door h3{color:var(--bone)}
.doorsec .door p{color:#C6D0C9}
.doorsec .door .st{color:var(--gold)}
.doorsec .more{color:var(--gold)}
.doorsec .more:hover{color:var(--bone)}
/* the card icons: one size, one baseline, never scaled by the label */
.doorsec .stg{display:flex;align-items:center;height:30px;margin:0 0 .7rem;color:var(--bone);
font-family:var(--disp);font-size:1.5rem;line-height:1}
.doorsec .stg img{height:26px;width:auto}
.doorsec .stg .lc{font-family:var(--sans);font-weight:700;font-size:.62em;color:var(--bone)}
.diag{border-color:rgba(227,183,51,.45);background:rgba(227,183,51,.08)}
.diag h3{color:var(--bone)} .diag p{color:#C6D0C9} .diag .deyebrow{color:var(--gold)}
.diag .cta--soon{color:var(--gold);border-color:rgba(227,183,51,.5)}
/* ---- CTA panel back on bone ---- */
.endcta{background:var(--bone);border-top:1px solid var(--rule-bone)}
/* ---- the footer lock ---- */
.foot-lock{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;margin-bottom:1rem}
.foot-lock .foot-logo{margin:0}
.foot-tl{font-family:var(--serif);font-weight:600;font-size:.92rem;color:var(--bone);line-height:1}
.foot-tl img{height:.9em;width:auto;vertical-align:-.15em;margin:0 -.13em}
@media(max-width:900px){
.strip-in{grid-template-columns:1fr;gap:22px}
.strip-figs{grid-template-columns:1fr 1fr;gap:18px}
}
@media(max-width:560px){
.strip-panel{padding:22px 18px}
.strip-figs{gap:16px}
.strip-figs p{font-size:.8rem}
}
/* the CTA panel is on bone again, so undo the dark-ground overrides */
.endcta .ec-say h2{color:var(--forest)}
.endcta .ec-say p{color:var(--grey)}
.endcta .eco{background:var(--bone-2);border-color:var(--rule-bone)}
.endcta .eco:hover{background:#fff;border-color:var(--gold)}
.endcta .eco-t{color:var(--forest)}
.endcta .eco-t b{color:var(--grey)}
.endcta .eco .pmk{filter:none}
.endcta .eco--go{background:var(--gold);border-color:var(--gold)}
.endcta .eco--go .eco-t{color:var(--forest)}
.endcta .eco--go .eco-t b{color:rgba(28,58,48,.72)}
.hero--air .say{max-width:50ch}
.hero--air .say .say2{display:block;margin-top:.62em;color:var(--bone)}
.hero--air .say .say2 .pxo{vertical-align:baseline}
@media(max-width:640px){
.hero--air .say{max-width:none}
.hero--air .say .say2{margin-top:.55em}
}
.cta--ghost:hover .sweep{opacity:.16;transform:translate(8%,-50%) rotate(-4deg)}
.navcta{height:36px;min-width:0;padding:0 1.05rem;font-size:.685rem;letter-spacing:.085em}
.navcta .lbl{gap:.58rem}
.navcta .mki{height:13px;vertical-align:middle}
@media(max-width:1180px){
.navcta{padding:0 .85rem;font-size:.66rem;letter-spacing:.07em}
.navcta .lbl{gap:.46rem}
.navcta .mki{height:12px}
}
.navcta .sweep{height:150%;left:-4%}
.navcta:hover .sweep{opacity:.12;transform:translate(4%,-50%) rotate(-4deg)}
.nav a.cta--gold{color:var(--forest);opacity:1;border-bottom:0;
padding:0 1.05rem;height:36px;display:inline-flex}
.nav a.cta--gold:hover{color:var(--forest);opacity:1}
.nav a.cta--ghost{color:var(--bone);opacity:1;border-bottom:0;padding:0 1rem;height:36px}
.cta .sweep{display:none}
.cta--ghost .mki{filter:none}
.cta--gold:hover{transform:translateY(-1px);box-shadow:0 4px 0 rgba(0,0,0,.24)}
.cta--gold:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.22)}
/* --- 3: the painted X leads the eyebrow ------------------------------- */
.eyebrow{display:flex;align-items:center;gap:.55em}
.eyebrow::before{
content:"";flex:0 0 auto;width:1.36em;height:1.15em;
background:url("img/pxo-x-real.png") center/contain no-repeat;
}
.rule::before,.section-rule::before{content:none}
.rule::after,.section-rule::after{left:0}
.rule,.section-rule{width:62px;margin-top:-.55rem}
/* the census and door eyebrows have their own marks already */
.ceyebrow::before,.deyebrow::before{content:none}
/* --- 1: the shift, as a band of alternating tiles --------------------- */
.strip{background:var(--bone);border:0;padding:clamp(30px,3.4vw,46px) 0}
.strip-panel{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.strip-in{grid-template-columns:minmax(180px,20%) 1fr;gap:clamp(22px,3vw,40px);
align-items:stretch}
.strip-say{display:flex;flex-direction:column;justify-content:center}
.strip-say h2{font-size:clamp(1.08rem,1.62vw,1.34rem);line-height:1.16;max-width:14ch}
.strip-say .kick{font-size:.72rem;margin-top:.6rem}
.strip-figs{gap:clamp(10px,1.15vw,15px);align-items:stretch}
.strip-figs .f{
border-top:0;border-radius:4px;padding:13px 14px 12px;
display:flex;flex-direction:column;
}
.strip-figs .fe{font-size:.58rem;letter-spacing:.15em;margin-bottom:.15rem}
.strip-figs .n{font-size:clamp(1.35rem,2.15vw,1.82rem);line-height:1.02;display:block}
.strip-figs .f p{font-size:.7rem;line-height:1.34;margin-top:.32rem}
.strip-figs .ref{font-size:.58rem;margin-top:auto;padding-top:.5rem;opacity:.8}
/* forest tile */
.strip-figs .f:nth-child(odd){background:var(--forest);color:var(--bone)}
.strip-figs .f:nth-child(odd) .fe{color:var(--gold)}
.strip-figs .f:nth-child(odd) .n{color:var(--gold)}
.strip-figs .f:nth-child(odd) p{color:#D8D3C7}
.strip-figs .f:nth-child(odd) .ref{color:#A9A497}
/* gold tile */
.strip-figs .f:nth-child(even){background:var(--gold);color:var(--forest)}
.strip-figs .f:nth-child(even) .fe{color:rgba(28,58,48,.7)}
.strip-figs .f:nth-child(even) .n{color:var(--forest)}
.strip-figs .f:nth-child(even) p{color:rgba(28,58,48,.88)}
.strip-figs .f:nth-child(even) .ref{color:rgba(28,58,48,.6)}
/* --- 2: the section that follows, on deep green, and closer ----------- */
.what.band-deep{background:var(--forest-deep);color:var(--bone);
padding:clamp(52px,5.6vw,78px) 0}
.what.band-deep h2{color:var(--bone)}
.what.band-deep .lead{color:#D8D3C7}
.what.band-deep .three{border-top-color:rgba(227,183,51,.34)}
.what.band-deep .t{border-top-color:rgba(227,183,51,.34)}
.what.band-deep .tn{color:var(--gold)}
.what.band-deep .t p{color:#CFC9BC}
.what.band-deep .what-so{color:var(--bone)}
@media(max-width:820px){
.strip-figs{grid-template-columns:1fr 1fr;gap:10px}
.strip-figs .f p{font-size:.74rem}
}
.eyebrow::before{width:1.16em;height:.98em}
.strip-say .eyebrow{font-size:.7rem;letter-spacing:.13em;white-space:nowrap;margin-bottom:.75rem}
.strip-say .eyebrow::before{width:1.05em;height:.9em}
.what.band-deep{padding-bottom:clamp(38px,4.2vw,58px)}
.what.band-deep .what-so{margin-top:clamp(22px,2.4vw,32px);max-width:44ch}
.strip-figs,.strip-in{min-width:0}
.strip-figs .f{min-width:0}
.strip-figs .f p,.strip-figs .f .ref{overflow-wrap:anywhere}
@media(max-width:560px){
.strip-figs{grid-template-columns:1fr 1fr;gap:9px}
.strip-figs .f{padding:11px 11px 10px}
.strip-figs .n{font-size:1.42rem}
.strip-figs .f p{font-size:.71rem}
.strip-say .eyebrow{white-space:normal}
}
.strip-figs .f p,.strip-figs .f .ref{overflow-wrap:break-word}
@media(max-width:820px){
.strip-in{grid-template-columns:1fr;gap:20px}
.strip-say h2{max-width:none}
}
@media(max-width:560px){
.strip-figs .fe{font-size:.56rem;letter-spacing:.1em}
}
/* --- home: the census band ------------------------------------------- */
.cband{background:var(--gold);padding:clamp(26px,3.2vw,40px) 0}
.cband-in{display:flex;align-items:center;justify-content:space-between;
gap:clamp(20px,3vw,48px);flex-wrap:wrap}
.cband .eyebrow{color:rgba(28,58,48,.72);margin-bottom:.5rem;font-size:.72rem}
.cband .eyebrow b{font-weight:700;color:var(--forest)}
.cband .eyebrow::before{filter:brightness(0) saturate(100%) invert(15%) sepia(18%)
saturate(1200%) hue-rotate(115deg) brightness(95%) contrast(92%);opacity:.75}
.cband h2{font-family:var(--disp);color:var(--forest);margin:0;
font-size:clamp(1.32rem,2.35vw,1.95rem);line-height:1.12}
.cband p{font-family:var(--sans);color:rgba(28,58,48,.82);margin:.6rem 0 0;
font-size:.86rem;line-height:1.5;max-width:52ch}
.cband-go{background:var(--forest);color:var(--gold);flex:0 0 auto;
box-shadow:0 2px 0 rgba(0,0,0,.22)}
.cband-go:hover{background:var(--forest);color:var(--gold);transform:translateY(-1px)}
.cband-go .mki{filter:brightness(0) invert(1)}
/* --- census.html: the header ----------------------------------------- */
.chero{position:relative;overflow:hidden;padding:clamp(56px,6.4vw,92px) 0 clamp(34px,4vw,52px)}
.chero-hd{display:flex;align-items:center;gap:.7rem;margin-bottom:1.5rem}
.chero-hd .pmk{height:38px;width:auto}
.clabel{font-family:var(--sans);font-weight:600;text-transform:uppercase;
letter-spacing:.2em;font-size:.78rem;color:var(--gold);margin:0}
.clabel b{font-weight:800;color:var(--bone)}
.chero h1{font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.06;margin:0;max-width:18ch}
.clede{font-family:var(--serif);color:#D8D3C7;max-width:56ch;margin-top:1.15rem;
font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6}
.ckick{font-family:var(--sans);font-weight:600;letter-spacing:.05em;color:var(--gold);
font-size:.8rem;margin-top:1.1rem}
/* --- census.html: the instrument -------------------------------------- */
.cinst{background:var(--bone);padding:clamp(40px,4.8vw,66px) 0}
.cinst-form{background:#fff;border:1px solid var(--rule-bone);border-radius:6px;
padding:clamp(22px,3vw,38px);box-shadow:0 1px 0 rgba(28,58,48,.05)}
.cinst-hd{border-bottom:1px solid var(--rule-bone);padding-bottom:1.1rem;margin-bottom:1.5rem}
.cinst-hd .eyebrow{margin-bottom:.5rem}
.cinst-help{font-family:var(--sans);font-size:.84rem;color:var(--grey);margin:0;max-width:60ch}
.cgrp{margin-bottom:1.5rem}
.cgrp-t{font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.15em;
text-transform:uppercase;color:var(--gold-ink);margin:0 0 .6rem}
.vote--wrap{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.vote--wrap li{margin:0}
.vote--wrap li::before{content:none}
.cinst-own{border-top:1px solid var(--rule-bone);padding-top:1.4rem;margin-top:.4rem}
.cown-l{display:block;font-family:var(--sans);font-weight:700;font-size:.78rem;
letter-spacing:.06em;text-transform:uppercase;color:var(--forest);margin-bottom:.55rem}
.cinst .fnote{margin-top:1rem;font-size:.78rem;color:var(--grey)}
/* --- census.html: why we count ---------------------------------------- */
.cwhy{padding:clamp(48px,5.4vw,76px) 0}
.cwhy h2{font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.16;max-width:30ch;
color:var(--bone);margin:0 0 clamp(26px,3vw,40px)}
.cwhy-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px)}
.cw{border-top:1px solid rgba(227,183,51,.34);padding-top:1rem}
.cw-n{font-family:var(--disp);font-size:1.14rem;color:var(--gold);margin:0 0 .5rem}
.cw p{font-family:var(--sans);font-size:.86rem;line-height:1.62;color:#CFC9BC;margin:0}
.cwhy-so{font-family:var(--disp);font-size:clamp(1.15rem,2vw,1.5rem);color:var(--bone);
margin-top:clamp(28px,3.2vw,44px)}
@media(max-width:860px){
.cwhy-g{grid-template-columns:1fr;gap:20px}
.cband-in{flex-direction:column;align-items:flex-start;gap:18px}
}
.chero .ghostx{position:absolute;top:-24%;right:-14%;height:184%;width:auto;
opacity:.4;pointer-events:none;z-index:1;transform:none}
.chero .wrap{position:relative;z-index:2}
@media(max-width:820px){.chero .ghostx{right:-44%;height:110%;opacity:.14}}
/* 4 -- the leftover light-ground gold */
.levels .st--end .gl{color:var(--gold)}
.levels .st--end .tm{color:var(--bone)}
/* 1 + 2 + 3 -- the four stages */
.prog .tm{font-size:clamp(2.8rem,5.6vw,4.05rem);min-height:1.12em;align-items:center}
.prog .tm img{height:.72em;margin:0}
.prog .tm .tmk{height:.66em}
.prog .tm .lc,.doors .stg .lc,.doorsec .stg .lc{
font-family:var(--disp);font-weight:400;font-size:.82em;color:var(--bone);
line-height:1;letter-spacing:0;
}
.prog .tm .lc{margin-right:-.055em}
.prog .tm .lc--suf{margin-left:-.045em;margin-right:0}
/* 1 + 2 + 3 -- the door cards */
.doorsec .stg{height:44px;margin:0 0 .85rem;font-size:2.1rem}
.doorsec .stg img{height:34px}
.doorsec .stg .lc{font-size:.92em;margin-right:-.05em}
.doorsec .stg .lc--suf{margin-left:-.04em;margin-right:0}
/* the one-word pills on the door cards */
.door-go{margin-top:auto;align-self:flex-start;height:38px;min-width:0;
padding:0 .95rem;font-size:.7rem;letter-spacing:.08em}
.door-go .mki{height:14px}
.door{display:flex;flex-direction:column}
.door p{margin-bottom:1.1rem}
.prog .tm .lc{margin-right:-.085em}
.prog .tm .lc--suf{margin-left:-.07em}
.doorsec .stg .lc{font-size:1.16em;margin-right:-.075em}
.doorsec .stg .lc--suf{margin-left:-.06em;margin-right:0}
.fld,select.fld{box-sizing:border-box;max-width:100%}
.phero,.hero,.chero{overflow:hidden}
.endcta{padding:clamp(34px,3.8vw,52px) 0}
.ec{display:grid;grid-template-columns:minmax(210px,26%) 1fr;
gap:clamp(24px,3.4vw,52px);align-items:center}
.ec-say h2{font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.14;margin:0;max-width:16ch}
.ec-say p{font-family:var(--sans);font-size:.82rem;line-height:1.5;color:var(--grey);
margin:.6rem 0 0;max-width:34ch}
.ec-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);
align-items:start}
.ecp{display:flex;flex-direction:column;gap:.5rem}
.ecp .cta{width:100%;min-width:0;height:42px;padding:0 .8rem;font-size:.72rem;
background:var(--forest);color:var(--bone);box-shadow:0 2px 0 rgba(0,0,0,.16)}
.ecp .cta:hover{background:var(--forest);color:var(--gold);transform:translateY(-1px)}
.ecp .cta .mki{height:15px;filter:brightness(0) invert(1)}
.ecp--go .cta{background:var(--gold);color:var(--forest)}
.ecp--go .cta:hover{background:var(--gold);color:var(--forest)}
.ecp--go .cta .mki{filter:none}
.ecp-n{font-family:var(--sans);font-size:.72rem;line-height:1.35;color:var(--grey);
margin:0;padding-left:.1rem}
@media(max-width:900px){
.ec{grid-template-columns:1fr;gap:22px}
.ec-opts{grid-template-columns:repeat(2,1fr);gap:14px}
.ec-say h2,.ec-say p{max-width:none}
}
@media(max-width:420px){
.ec-opts{grid-template-columns:1fr}
}
.foot-tl,.lockup .tl{
display:inline-flex;align-items:baseline;white-space:nowrap;gap:.16em;
}
.foot-tl img,.lockup .tl img{margin:0;vertical-align:baseline;flex:0 0 auto}
.foot-tl{font-size:.9rem}
.foot-tl img{height:.86em;position:relative;top:.06em}
.foot-tl,.lockup .tl{gap:0}
.foot-tl img,.lockup .tl img{margin-left:.24em;margin-right:0}
.foot-tl img{height:.95em;top:.05em}
.eyebrow{font-size:.9rem;letter-spacing:.2em;gap:.5em;align-items:center}
.eyebrow::before{width:1.9em;height:1.6em;margin-top:-.06em}
/* on the smaller in-card eyebrows the same ratio, one size down */
.card .eyebrow,.cgroup .eyebrow{font-size:.8rem}
.card .eyebrow::before,.cgroup .eyebrow::before{width:1.7em;height:1.45em}
/* the strip rail is narrow: hold the ratio, not the absolute size */
.strip-say .eyebrow{font-size:.74rem;letter-spacing:.14em}
.strip-say .eyebrow::before{width:1.75em;height:1.5em}
/* COMING NEXT and THE CENSUS have their own marks already, so they keep
their own scale but come up to match the new eyebrow weight */
.deyebrow,.ceyebrow{font-size:.72rem;letter-spacing:.2em}
@media(max-width:640px){
.eyebrow{font-size:.8rem;letter-spacing:.16em}
.eyebrow::before{width:1.8em;height:1.5em}
}
.eyebrow::before{
background-image:url("img/pxo-x-bullet.png");
width:1.34em;height:1.55em;margin-top:0;
}
.card .eyebrow::before,.cgroup .eyebrow::before{width:1.24em;height:1.44em}
.strip-say .eyebrow::before{width:1.28em;height:1.48em}
@media(max-width:640px){.eyebrow::before{width:1.3em;height:1.5em}}
.eyebrow{gap:.42em;margin-bottom:1.15rem}
.eyebrow::before{width:1.94em;height:2.25em}
.card .eyebrow::before,.cgroup .eyebrow::before{width:1.7em;height:1.97em}
.strip-say .eyebrow::before{width:1.72em;height:2em}
.rule,.section-rule{margin-top:-.35rem}
@media(max-width:640px){.eyebrow::before{width:1.8em;height:2.09em}}
.cprompt{
position:fixed;right:clamp(14px,2.2vw,28px);bottom:clamp(14px,2.2vw,28px);
z-index:60;width:min(348px,calc(100vw - 28px));
background:var(--gold);color:var(--forest);border-radius:5px;
padding:20px 22px 18px;box-shadow:0 14px 38px rgba(0,0,0,.34),0 2px 0 rgba(0,0,0,.2);
/* 2 Oct - it arrives from the right rather than rising from below, and
docks in the corner. Nothing collapses to a tab, nothing times out. */
opacity:0;transform:translateX(30px);
transition:opacity .40s ease,transform .44s cubic-bezier(.19,.72,.28,1);
font-family:var(--sans);
}
.cprompt.is-up{opacity:1;transform:none}
.cprompt-mk{position:absolute;right:16px;bottom:14px;height:52px;width:auto;opacity:.16}
.cprompt-e{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:rgba(28,58,48,.66);margin:0 0 .5rem}
.cprompt-h{font-family:var(--disp);font-size:1.16rem;line-height:1.16;margin:0 0 .45rem;
color:var(--forest);max-width:15ch}
.cprompt-s{font-size:.78rem;line-height:1.45;color:rgba(28,58,48,.82);margin:0 0 .95rem;
max-width:30ch}
.cprompt-go{
display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 1.05rem;
background:var(--forest);color:var(--gold);text-decoration:none;border-radius:3px;
font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
transition:transform .12s;
}
.cprompt-go:hover{transform:translateY(-1px);color:var(--gold)}
.cprompt-alt{display:block;margin-top:.8rem;font-size:.71rem;line-height:1.4;
color:rgba(28,58,48,.7);text-decoration:underline;text-underline-offset:2px}
.cprompt-alt:hover{color:var(--forest)}
.cprompt-x{
position:absolute;top:7px;right:8px;width:26px;height:26px;border:0;background:none;
color:rgba(28,58,48,.5);font-size:1.1rem;line-height:1;cursor:pointer;border-radius:3px;
}
.cprompt-x:hover{color:var(--forest);background:rgba(28,58,48,.09)}
@media(max-width:480px){
.cprompt{left:12px;right:12px;bottom:12px;width:auto;padding:17px 18px 15px}
.cprompt-mk{height:42px}
}
@media(prefers-reduced-motion:reduce){
.cprompt{transition:opacity .2s;transform:none}
}
/* 1 -- no synthetic bold, anywhere, on the display face */
h1,h2,.prog .tm,.doorsec .stg,.three .tn,.what-so,.cband h2,.cw-n,.cwhy-so,
.cprompt-h,.diag h3,.doorsec .door h3,.levels .lead b,.prog .tm .lc,
.doors .stg .lc,.doorsec .stg .lc,.clabel b,.hero .only{font-weight:400}
.prog .tm,.doorsec .stg{font-weight:400!important}
/* 2 -- reading copy goes back to the reading serif */
.three .t p,.door p,.doorsec .door p,.cw p,.st-d,.prog .d{
font-family:var(--serif);font-weight:400;
}
.prog .d,.three .t p{font-size:.95rem;line-height:1.66}
/* 6/7 -- one door out of the section, not four */
.doors-go{margin:clamp(24px,3vw,38px) 0 0}
.doors-go .cta{height:44px}
/* 8 -- every pill in the standing panel is gold */
.ecp .cta{background:var(--gold);color:var(--forest);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.ecp .cta:hover{background:var(--gold);color:var(--forest);transform:translateY(-1px);
box-shadow:0 4px 0 rgba(0,0,0,.22)}
.ecp .cta .mki{filter:none}
.ecp--go .cta{background:var(--gold);color:var(--forest)}
/* 5 -- the line section was not reading as its own section. It sits between
two dark grounds, and deep-after-forest is too small a step to register as
a boundary. A gold hairline at the top edge and more air above it, which
costs no height that the section was not already spending. Zed has flagged
this whole section for redesign around the diagnostic, so this is a
boundary fix, not a rebuild. */
.doorsec.band-deep{border-top:1px solid rgba(227,183,51,.3);
padding-top:clamp(58px,6.6vw,92px)}
.bleed{
position:relative;background-color:var(--forest);
background-size:cover;background-position:center right;background-repeat:no-repeat;
padding:clamp(64px,8vw,124px) 0 clamp(52px,6.4vw,96px);
color:var(--bone);overflow:hidden;
}
.bleed--deep{background-color:var(--forest-deep)}
.bleed--tall{padding:clamp(88px,11vw,168px) 0 clamp(72px,8.4vw,124px)}
.bleed .wrap{position:relative;z-index:2}
.bh-in{max-width:46ch}
.bleed h1{
font-family:var(--disp);font-weight:400;color:var(--bone);margin:0;
font-size:clamp(2rem,4.4vw,3.35rem);line-height:1.05;
}
.bleed .eyebrow{color:var(--gold);margin-bottom:1.05rem}
.bh-lede{
font-family:var(--serif);color:#DCD7CB;margin:1.15rem 0 0;max-width:44ch;
font-size:clamp(1.02rem,1.55vw,1.16rem);line-height:1.62;
}
.bh-kick{
font-family:var(--sans);font-weight:600;letter-spacing:.05em;color:var(--gold);
font-size:.82rem;margin:1.1rem 0 0;
}
.bh-cta{margin-top:clamp(24px,3vw,38px);display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:820px){
.bleed{background-position:72% center}
.bh-in{max-width:none}
}
@media(max-width:560px){
.bleed{background-position:64% center}
}
.bleed .pxo .d{display:inline-block}
.bleed .pxo .l{display:none}
.bleed .exch img,.bleed .xm{filter:none}
.hero--air{
background-image:url("img/art-hero-x.jpg");
background-size:cover;background-position:center right;background-repeat:no-repeat;
}
/* THE HERO X ---------------------------------------------------------------
It is not baked into the picture. A cover crop re-frames itself whenever the
viewport aspect changes, which is what made the X wander into the copy. As
its own element it gets a left boundary it cannot cross: the copy column's
own right edge, worked out the way the wrap works it out — half the leftover
width, plus the wrap's padding, plus the column, plus a gutter. Every
property the older .ghostx rules set is restated here, so none of them
reach this hero. */
.hero.hero--air{
/* where the copy column stops and the X's lane begins */
--xlane:calc(max(0px, (100vw - var(--maxw)) / 2) + var(--pad) + 720px + 32px);
}
.hero.hero--air .ghostx{
display:block;position:absolute;z-index:1;pointer-events:none;opacity:1;
top:50%;bottom:auto;right:auto;transform:translateY(-50%);
left:var(--xlane);
/* the width is stated, never left to auto: an absolutely positioned ![]()
with width:auto ignores `right` and renders at its intrinsic size */
/* the stroke runs off the right edge rather than stopping at it: more
presence, and the left boundary is untouched so the copy is unaffected */
width:calc(100vw - var(--xlane) + 6vw);
height:auto;max-height:none;
object-fit:contain;object-position:center;
}
/* Between the two, the copy gives the X a lane rather than the X vanishing. */
@media(max-width:1180px){
.hero--air .inner{max-width:54vw}
.hero.hero--air{--xlane:calc(var(--pad) + 54vw + 40px)}
.hero.hero--air .ghostx{width:calc(100vw - var(--xlane) + 7vw);max-height:none}
}
@media(max-width:820px){
/* a phone crop of a wide picture puts the X behind the words, so narrow
screens get their own composition: a portrait slice of the painting */
.hero--air{
background-image:url("img/art-hero-x-tall.jpg");
background-position:center top;background-size:cover;
padding-bottom:300px; /* a band of its own beneath the button */
}
.hero--air .inner{max-width:none}
/* and the copy keeps its ground */
.hero--air::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(28,58,48,.95) 0%,rgba(28,58,48,.90) 34%,rgba(28,58,48,.52) 54%,rgba(28,58,48,.04) 74%,rgba(28,58,48,0) 100%);
}
.hero--air .wrap{position:relative;z-index:2}
/* the X drops into that band, centred, clear of every word */
.hero.hero--air .ghostx{
top:auto;bottom:26px;left:50%;right:auto;
transform:translateX(-50%);
height:min(248px,64vw);width:auto;max-width:84vw;max-height:none;
}
}
@font-face{
font-family:'Newsreader';
src:url('fonts/newsreader-latin-wght-normal.woff2') format('woff2-variations');
font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
font-family:'Newsreader';
src:url('fonts/newsreader-latin-wght-italic.woff2') format('woff2-variations');
font-weight:200 800;font-style:italic;font-display:swap;
}
.hero--air h1{white-space:nowrap;max-width:none;
font-size:clamp(1.9rem,4.05vw,3.3rem);line-height:1.07}
/* below this the line cannot hold without shrinking past its own dignity,
so it is released to wrap and sized off the viewport instead */
@media(max-width:900px){
.hero--air h1{white-space:normal;font-size:clamp(2rem,7.4vw,2.9rem);line-height:1.04}
}
/* the bridge: definition, then what we do about it. Tighter leading inside
each paragraph, the gap between them left alone -- that gap is what makes
them two beats instead of one block. */
.hero--air .say{line-height:1.44}
.hero--air .say b{color:var(--bone);font-weight:600;font-style:normal}
.hero--air .say .say2{color:inherit;margin-top:.72em}
@media(max-width:640px){.hero--air .say .say2{margin-top:.64em}}
/* the masthead's second descriptor line, as settled 11 Sep */
.lockup--hero .de em{font-style:normal;opacity:.82;letter-spacing:.24em}
@media(max-width:640px){
.lockup--hero .de{letter-spacing:.11em;font-size:.63rem;line-height:1.5;
max-width:none;white-space:normal}
.lockup--hero .de em{letter-spacing:.13em}
.lockup--hero .beats{letter-spacing:.11em;font-size:.6rem}
}
.strip-say .eyebrow{white-space:normal;align-items:flex-start;max-width:100%}
.strip-say .eyebrow::before{margin-top:.14em}
@media(max-width:900px){
.strip-say .eyebrow{align-items:center}
.strip-say .eyebrow::before{margin-top:0}
}
@media(max-width:700px){
.hero--air{
background-color:var(--forest);
background-size:auto 44%;
background-position:right -14% bottom 10%;
}
}
.hero--air{position:relative;overflow:hidden}
.hero--air > .wrap{position:relative;z-index:1}
/* WIDTH, not height, is what has to be controlled: the headline is held on
one line, so the space left for the mark is whatever the sentence does not
use. Sized against the viewport with a hard ceiling, it grows as the window
grows and never reaches the type. */
.hero--air .ghostx{
display:block;position:absolute;z-index:0;pointer-events:none;
right:clamp(-30px,2.4vw,44px);top:50%;transform:translateY(-50%);
width:min(32vw,520px);height:auto;opacity:.30;
}
/* below this the headline wraps to two lines and takes the width with it, so
there is no side space left worth having. The mark drops to the bottom
corner instead -- clear of every line of type, still whole, quieter. */
@media(max-width:1000px){
.hero--air .ghostx{
width:min(44vw,280px);right:-14%;top:auto;bottom:-4%;
transform:none;opacity:.22;
}
}
@media(max-width:520px){
.hero--air .ghostx{width:min(50vw,215px);right:-18%;bottom:-5%;opacity:.20}
}
.site-head{position:relative}
.nav .navgroup{display:flex;align-items:center;gap:clamp(6px,1.5vw,26px)}
.nav a.navq{
font-family:var(--sans);font-weight:500;letter-spacing:0;
font-size:clamp(.82rem,1.18vw,.98rem);color:var(--bone);text-decoration:none;
padding:10px 2px;position:relative;white-space:nowrap;
}
.nav a.navq::after{
content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;
background:var(--gold);transform:scaleX(0);transform-origin:left;
transition:transform .18s ease;
}
.nav a.navq.on::after,.nav a.navq:hover::after,
.nav a.navq:focus-visible::after,.nav a.navq[aria-current]::after{transform:scaleX(1)}
.navpanels{background:var(--deep);border-top:1px solid rgba(227,183,51,.28);
display:none}
.navpanels.is-open{display:block}
.navpanel{max-width:1180px;margin:0 auto;
display:grid;grid-template-columns:1.1fr 1fr 1.15fr;
gap:clamp(20px,3vw,46px);padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,34px)}
.navpanel[hidden]{display:none}
.np-ask{font-family:var(--disp);font-size:clamp(1.05rem,1.9vw,1.34rem);line-height:1.2;
color:var(--bone);margin:0 0 .8rem;text-wrap:balance}
.np-ours{font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--gold);
margin:0;display:flex;flex-direction:column;gap:.22rem}
.np-ours span{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
color:rgba(244,241,234,.5);font-weight:700}
.np-line{margin:0;color:rgba(244,241,234,.86);font-size:.96rem;line-height:1.5;
font-family:var(--serif)}
.np-h{font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;font-weight:700;
text-transform:uppercase;color:rgba(244,241,234,.5);margin:0 0 .3rem}
.np-links{list-style:none;margin:0;padding:0;border-top:1px solid rgba(244,241,234,.14)}
.np-links li{border-bottom:1px solid rgba(244,241,234,.1)}
.np-links a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
padding:9px 0;text-decoration:none}
.np-links a:hover .ln,.np-links a:focus-visible .ln{color:var(--gold)}
.np-links .ln{font-family:var(--sans);font-weight:600;font-size:.88rem;color:var(--bone)}
.np-links .ld{font-family:var(--serif);font-size:.82rem;color:rgba(244,241,234,.55);
text-align:right}
@media(max-width:1040px){
.navpanel{grid-template-columns:1fr;gap:16px;padding:18px 20px 22px}
.nav .navgroup{flex-direction:column;align-items:flex-start;gap:0}
.nav a.navq{width:100%;padding:13px 0;font-size:1rem}
}
@media(max-width:1040px){.navpanels{display:none!important}}
.hero--air .say .exchw{
font-family:var(--sans);text-transform:uppercase;font-weight:600;
letter-spacing:.2em;font-size:.76em;color:var(--bone);
margin-left:.1em;white-space:nowrap;
}
.navpanel{max-width:1180px;margin:0 auto;display:block;
padding:clamp(14px,1.8vw,20px) clamp(20px,3vw,34px)}
.navpanel .np-links{list-style:none;margin:0;padding:0;
display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,44px);align-items:center}
.navpanel .np-links li{margin:0;border:0}
.navpanel .np-links{border-top:0}
.navpanel .np-links a{
font-family:var(--sans);font-weight:500;font-size:.9rem;color:var(--bone);
text-decoration:none;padding:8px 0;display:inline-block;position:relative;
}
.navpanel .np-links a::after{
content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
background:var(--gold);transform:scaleX(0);transform-origin:left;
transition:transform .16s ease;
}
.navpanel .np-links a:hover::after,.navpanel .np-links a:focus-visible::after{transform:scaleX(1)}
@media(max-width:1040px){
.navpanel .np-links{flex-direction:column;align-items:flex-start;gap:0}
}
/* --- Stat boxes: every row lines up across all four --- */
/* Zed, board note on the shift strip: "line up the sources in the boxes for
cleaness." Each box laid itself out independently, so eyebrow, number, copy
and attribution all landed at four different heights. The boxes now share
the parent's rows (subgrid), so the four rows align whatever the copy does.
The flex fallback below keeps the attribution on the floor of the box on
any engine without subgrid. */
.strip-figs .f{display:flex;flex-direction:column;height:100%}
.strip-figs .f .ref{margin-top:auto;padding-top:.55rem}
@supports (grid-template-rows: subgrid){
.strip-figs{grid-template-rows:auto auto 1fr auto}
.strip-figs .f{display:grid;grid-template-rows:subgrid;grid-row:span 4;height:auto}
.strip-figs .f .ref{margin-top:0;align-self:start}
}
/* =====================================================================
DESIGN LAYER v1.1 — 17 Sep 2026
Zed: "coming out of our beautiful green and gold wood and applying
more pop by way of design, graphics and well chosen figurative and
abstract images." Palette unchanged. The pop comes from three things
the site did not have: a second section FORM (copy beside artwork,
so not every band is a full-width stack), original ARTWORK that
carries the argument rather than decorating it, and a wider TYPE
scale so one or two moments on a page are genuinely large.
===================================================================== */
/* --- 1. SPLIT: copy one side, artwork the other ---------------------- */
.split{display:grid;grid-template-columns:1fr minmax(260px,40%);
gap:clamp(28px,5vw,74px);align-items:center}
.split-art{position:relative;line-height:0}
.split-art img,.split-art svg{width:100%;height:auto;display:block}
.split-cap{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold);margin:1.1rem 0 0;line-height:1.7}
.split-cap b{display:block;font-weight:700}
.split-cap span{display:block;font-weight:500;letter-spacing:.06em;
text-transform:none;font-size:.8rem;color:#B9C6BE}
@media(max-width:900px){
.split{grid-template-columns:1fr;gap:34px}
.split-art{max-width:420px}
}
/* --- 2. WAYS IN: the levels of participation, priced in effort ------- */
.ways{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
background:rgba(227,183,51,.22);margin:clamp(30px,4vw,48px) 0 0;
border:1px solid rgba(227,183,51,.22)}
.ways > *{background:var(--forest-deep);padding:20px 18px 22px;
text-decoration:none;display:flex;flex-direction:column;gap:.4rem;
transition:background .18s ease}
.ways a:hover{background:#18332B}
.ways .wn{font-family:var(--disp);font-size:clamp(1.05rem,1.7vw,1.3rem);
color:var(--bone);line-height:1.1}
.ways a:hover .wn{color:var(--gold)}
.ways .wc{font-family:var(--sans);font-size:.72rem;line-height:1.5;
color:#B9C6BE;margin:0}
.ways .wt{font-family:var(--sans);font-size:.6rem;font-weight:700;
letter-spacing:.17em;text-transform:uppercase;color:var(--gold);
margin-top:auto;padding-top:.7rem}
.ways .soon .wn{color:#9DB9AC}
.ways .soon .wt{color:#8FA79B}
@media(max-width:1040px){.ways{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.ways{grid-template-columns:1fr 1fr}}
/* --- 3. TRACK: the four stages as one line, not four boxes ----------
The copy calls it a line and a direction of travel. Four bordered
columns of equal weight said "table", which is the opposite. */
.stgline{--gh:clamp(54px,6.6vw,88px);position:relative;display:grid;
grid-template-columns:repeat(4,1fr);column-gap:clamp(16px,2.4vw,34px);
margin:clamp(30px,4vw,46px) 0 0}
.stgline::before{content:"";position:absolute;left:0;right:0;
top:calc(var(--gh) + 13px);height:1px;background:var(--gold);opacity:.38}
.stgline .tk{position:relative;display:flex;flex-direction:column}
.stgline .tk::after{content:"";position:absolute;left:0;
top:calc(var(--gh) + 8px);width:11px;height:11px;border-radius:50%;
background:var(--gold);box-shadow:0 0 0 5px var(--forest)}
.stgline .tk--end::after{background:var(--bone)}
.stgline .gly{height:var(--gh);display:flex;align-items:flex-end;
font-family:var(--disp);font-size:calc(var(--gh) * .82);line-height:1;
color:var(--bone);margin:0}
.stgline .gly img{height:.8em;width:auto;display:inline-block;
vertical-align:baseline;margin:0 -.05em}
.stgline .gly .lc{color:var(--sage-light);font-size:.7em;line-height:1}
.stgline .gly .tmk{height:.62em}
.stgline .gl{font-family:var(--sans);font-size:.7rem;font-weight:700;
letter-spacing:.17em;text-transform:uppercase;color:var(--gold);
margin:38px 0 .5rem}
.stgline .tk--end .gl{color:var(--bone)}
.stgline .d{font-size:.95rem;line-height:1.62;color:#C8C2B4;margin:0}
@media(max-width:820px){
.stgline{grid-template-columns:1fr;row-gap:26px}
.stgline::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto}
.stgline .tk{padding-left:32px}
.stgline .tk::after{top:calc(var(--gh) * .34);left:0}
.stgline .gly{height:auto;font-size:2.1rem}
.stgline .gl{margin-top:.7rem}
}
/* --- 4. A LARGER TOP NOTE, where a section has to land a point ------- */
.big{font-family:var(--disp);font-weight:400;
font-size:clamp(1.5rem,2.9vw,2.15rem);line-height:1.18;
letter-spacing:-.004em;margin:0 0 1rem;max-width:22ch}
/* separator eyebrow, where a second beat opens inside one section */
.eyebrow--sep{margin-top:clamp(34px,4.4vw,52px);padding-top:clamp(22px,2.6vw,30px);
border-top:1px solid rgba(227,183,51,.24)}
/* the hero's third line carries the link into Your X */
.hero--air .say .sayl{color:var(--gold);text-decoration:none;
border-bottom:1px solid rgba(227,183,51,.45);padding-bottom:1px}
.hero--air .say .sayl:hover{border-bottom-color:var(--gold)}
.hero--air .say .say2 + .say2{margin-top:.5em}
/* the shift strip's headline carries more words now, so the say column
takes a little more of the row and the measure grows to match */
.strip-in{grid-template-columns:minmax(230px,27%) 1fr}
.strip-say h2{max-width:20ch}
/* the artwork beside the copy wants to be seen, and to start level with
the headline rather than float in the middle of the column */
.split{grid-template-columns:1fr minmax(300px,45%);align-items:start}
.split-art{padding-top:.4rem}
.eyebrow--sep{width:100%}
/* the caption belongs to the artwork, so it sits with it */
.split-cap{margin-top:.55rem}
.split-art img{margin-bottom:0}
/* --- 5. MATHFIG: the arithmetic, drawn -------------------------------
Zed on "Stop adding. Start multiplying.": NEEDS A COMPELLING MATCHING
IMAGE/GRAPHIC. The section's whole claim is that four roles added make
four, and four roles crossed make sixteen. So the picture is that
sentence, counted, and every crossing is drawn as the X. */
.mathfig{display:grid;grid-template-columns:1fr 1fr;
gap:clamp(28px,5vw,80px);margin:clamp(36px,4.6vw,58px) 0 0;
padding-top:clamp(26px,3.2vw,38px);border-top:1px solid var(--rule-bone);
max-width:780px}
.mathfig img{width:100%;max-width:236px;height:auto;display:block}
.mfn{font-family:var(--disp);font-size:clamp(2.1rem,4.2vw,3.3rem);line-height:1;
color:var(--forest);margin:1.05rem 0 .35rem}
.mf--x .mfn{color:var(--gold-ink)}
.mfl{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.17em;
text-transform:uppercase;color:var(--gold-ink);margin:0}
.mfl span{display:block;font-weight:500;letter-spacing:.01em;text-transform:none;
font-size:.87rem;color:var(--grey);margin-top:.55rem;line-height:1.56}
@media(max-width:560px){.mathfig{gap:30px}}
/* the two grid overrides above were declared without a breakpoint, which
beat the earlier mobile rules. Restate them at the narrow end. */
@media(max-width:900px){
.split{grid-template-columns:1fr;gap:34px}
.split-art{max-width:420px;width:100%}
}
@media(max-width:820px){
.strip-in{grid-template-columns:1fr;gap:22px}
.strip-say h2{max-width:none}
}
/* five items in a two-column grid leave a hole; the last one takes the row */
@media(max-width:640px){.ways > *:last-child{grid-column:1 / -1}}
/* the crossing paragraphs sit on forest inside .levels, where .dim's warm
grey would be unreadable */
.levels.band-forest .dim,.levels.band-forest .xcross{color:#C6D0C9;max-width:64ch}
.levels.band-forest .xcross strong{color:var(--bone);font-weight:600}
/* the Census instrument now names itself */
.cinst-h{font-family:var(--disp);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.6rem);
line-height:1.1;color:var(--forest);margin:.15rem 0 .35rem}
.cinst-h b{font-weight:400}
.cinst-sub{font-family:var(--serif);font-size:clamp(1rem,1.7vw,1.18rem);
color:var(--grey);margin:0 0 .2rem}
/* --- 6. Five doors on the Exchange page ------------------------------
Zed: "Add boxes for Manifesto (READ) and CENSUS (ADD YOUR X)". Ordered
cheapest commitment first, so the two free ones open the row. */
.tri--5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.tri--5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.tri--5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tri--5{grid-template-columns:1fr}}
.tri--5 .d .verb{white-space:nowrap}
/* --- 7. About: the reach block, folded into the bios ------------------ */
.reachblock{margin-top:clamp(34px,4.2vw,52px);padding-top:clamp(26px,3vw,36px);
border-top:1px solid var(--rule-bone)}
.reach-h{font-family:var(--disp);font-weight:400;
font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.14;color:var(--forest);
margin:.1rem 0 1.4rem}
.reach-so{max-width:66ch;margin-top:clamp(22px,2.6vw,32px)}
/* 1fr floors at min-content, and a nowrap button label set that floor at
252px, so five columns overflowed the wrap. minmax(0,1fr) lets them share. */
.tri--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.tri--5 .d{min-width:0}
.tri--5 .d .cta{width:100%;text-align:center}
.tri--5 .d .becomes{margin-top:auto}
@media(max-width:1100px){.tri--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.tri--5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tri--5{grid-template-columns:minmax(0,1fr)}}
/* the door buttons sit in a 204px column, so they wrap and lose some padding */
.tri--5 .d .cta{padding-left:.7em;padding-right:.7em;font-size:.82rem}
.tri--5 .d .cta .lbl{white-space:normal;text-align:center;line-height:1.25}
/* the five doors read as two groups, which is also the truth of them */
.tri--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){.tri--2{grid-template-columns:minmax(0,1fr)}}
.doorgrp{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.17em;
text-transform:uppercase;color:var(--gold-ink);margin:clamp(26px,3.2vw,38px) 0 .9rem}
.band-forest .doorgrp,.band-deep .doorgrp{color:var(--gold)}
/* the reach block was built for a forest ground and now sits on bone */
.reachblock .reach{margin-top:1.2rem}
.reachblock .reach .city{background:var(--bone);border:1px solid var(--rule-bone);
padding:20px 22px 22px}
.reachblock .reach .who{color:var(--gold-ink)}
.reachblock .reach .nm{color:var(--forest)}
.reachblock .reach .city p:not(.who):not(.nm){color:var(--grey)}
.reachblock .reach .mid{color:var(--gold-ink)}
/* --- 8. MARGINS, justified to the title ------------------------------
Zed on Your X: "Justify margin and all the rest of the sections with
title slide justification. Looks unresolved." Measured, he was right:
the hero's copy started at 206px and every .wrap.narrow section started
at 366px, so the page had two left edges. The narrow measure was worth
keeping, the indent was not: the container now holds the page's own
width and the measure is capped on its children instead. */
.wrap.narrow{max-width:var(--maxw)}
.wrap.narrow > *{max-width:820px}
/* =====================================================================
v46 — the remaining card instructions
===================================================================== */
/* Zed, Your X card 2: "Highlight the last para with the PXO logo perhaps to
the same size of the slogan. This is the point after all." */
.thepoint{font-family:var(--disp);font-weight:400;
font-size:clamp(1.35rem,2.5vw,1.95rem);line-height:1.22;color:var(--forest);
max-width:30ch;margin:1.5rem 0 0}
.thepoint .tp-say{display:block;margin-top:.5rem;font-size:.78em;color:var(--grey)}
.pxo--big img{height:1.5em;vertical-align:-.12em;margin:0 .06em}
.band-forest .thepoint,.band-deep .thepoint{color:var(--bone)}
.band-forest .thepoint .tp-say,.band-deep .thepoint .tp-say{color:#C6D0C9}
@media(max-width:640px){.thepoint{max-width:none}}
/* Zed, Your X page note: "Too much bone background in this section."
The ex section is forest now, so its own copy has to follow. */
#ex.band-forest h2,#ex.band-forest .kick{color:var(--bone)}
#ex.band-forest .dim{color:#C6D0C9}
#ex.band-forest .rule{background:var(--gold)}
#ex.band-forest .eyebrow{color:var(--gold)}
/* Zed, podcast: one live, one coming, no placeholders */
.eps .ep-next{opacity:.85}
.eps .ep-next .num{color:var(--gold)}
.eps .ep-next h3{color:var(--bone)}
/* Zed, manifesto page note: "This page announces the Manifesto in all its
glory." The cover was buried below the fold; it now opens the page. */
.bh-in--cover{display:grid;grid-template-columns:minmax(150px,210px) 1fr;
gap:clamp(26px,3.6vw,52px);align-items:center}
.bh-cover{display:block;line-height:0;text-decoration:none;
box-shadow:0 18px 44px rgba(0,0,0,.42);transition:transform .2s ease}
.bh-cover:hover{transform:translateY(-3px)}
.bh-cover img{width:100%;height:auto;display:block}
@media(max-width:760px){
.bh-in--cover{grid-template-columns:1fr;gap:26px}
.bh-cover{max-width:180px}
}
/* =====================================================================
v47 — the owned door, the census reframed, and the quieter panel
===================================================================== */
/* THE DISPATCH. The only door on the site that is private and a
relationship at the same time: nothing about it shows on a profile. */
.joinus{background:var(--forest-deep);color:var(--bone);
padding:clamp(48px,5.4vw,76px) 0}
.ju{display:grid;grid-template-columns:1fr minmax(280px,38%);
gap:clamp(30px,5vw,72px);align-items:start}
.joinus h2{color:var(--bone);font-size:clamp(1.5rem,2.8vw,2.15rem);max-width:19ch}
.joinus .eyebrow{color:var(--gold)}
.ju-say p{color:#CFC9BC;margin-top:1rem;max-width:46ch}
.ju-note{font-family:var(--sans);font-size:.82rem;line-height:1.5;color:#9DB9AC}
.ju-form{background:rgba(255,255,255,.045);border:1px solid rgba(227,183,51,.24);
padding:clamp(20px,2.4vw,30px)}
.ju-lab{display:block;font-family:var(--sans);font-size:.66rem;font-weight:700;
letter-spacing:.17em;text-transform:uppercase;color:var(--gold);
margin:0 0 .45rem}
.ju-lab + .ju-in{margin-bottom:1.1rem}
.ju-in{width:100%;background:var(--forest);border:1px solid rgba(244,241,234,.22);
color:var(--bone);font-family:var(--serif);font-size:1rem;padding:.72em .85em;
border-radius:2px}
.ju-in::placeholder{color:#8FA79B}
.ju-in:focus{outline:2px solid var(--gold);outline-offset:1px}
select.ju-in{appearance:none;background-image:none}
.ju-go{width:100%;justify-content:center;text-align:center;margin-top:.3rem}
.hp{position:absolute;left:-9999px}
@media(max-width:820px){.ju{grid-template-columns:1fr;gap:28px}}
/* art placeholders sit in the flow of the page, at the width of the copy,
so a reviewer sees where a picture goes rather than a gap */
.slot--art{margin:clamp(22px,2.8vw,34px) 0 0;max-width:62ch}
.hero .slot--art{margin-top:clamp(24px,3vw,36px);max-width:54ch}
/* the hero is forest but is not .band-forest, so the slot's dark-ground
text colours were never applied and it rendered forest on forest */
.hero .slot .what{color:var(--bone)}
.hero .slot .how{color:#C8C2B4}
.hero .slot .tag,.hero .slot .own{color:var(--gold)}
/* PXO THINKING — the argument, published a piece at a time */
.tkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--rule-bone);border:1px solid var(--rule-bone);
margin-top:clamp(26px,3.2vw,40px)}
.tk{background:var(--bone);padding:clamp(20px,2.4vw,30px);display:flex;
flex-direction:column;gap:.5rem}
.tk-n{font-family:var(--sans);font-size:.64rem;font-weight:700;letter-spacing:.2em;
color:var(--gold-ink);margin:0}
.tk h3{font-family:var(--disp);font-weight:400;font-size:clamp(1.1rem,1.8vw,1.35rem);
line-height:1.16;color:var(--forest);margin:0}
.tk-q{font-size:.97rem;line-height:1.55;color:var(--grey);margin:0}
.tk-src{font-family:var(--sans);font-size:.7rem;color:var(--grey-soft);
margin:auto 0 0;padding-top:.7rem}
.tk-src a{color:var(--gold-ink);font-weight:700;text-decoration:none}
.tk-src a:hover{text-decoration:underline}
@media(max-width:1000px){.tkgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tkgrid{grid-template-columns:1fr}}
/* ===================================================================
19 Sep — the figures panel. The numbers are the point of that strip
and they were sitting at a shade under 30px, smaller than a section
heading, in cards with room to spare. They now carry the panel: set
large, tight, with the unit dropped back so the digits read first.
=================================================================== */
.strip-figs .f{padding:clamp(15px,1.5vw,20px) clamp(14px,1.4vw,18px) clamp(13px,1.3vw,16px)}
.strip-figs .n{
font-size:clamp(2.7rem,4.9vw,4.25rem);
line-height:.88;letter-spacing:-.035em;
margin:.34rem 0 .1rem;
font-variant-numeric:lining-nums tabular-nums;
}
/* the unit rides smaller and lighter, so 72 lands before the m does */
.strip-figs .n .u{
font-style:normal;font-size:.42em;letter-spacing:-.01em;
margin-left:.055em;vertical-align:.52em;opacity:.74;
}
/* the label and the sentence each come up a step */
.strip-figs .fe{font-size:.66rem;letter-spacing:.17em}
.strip-figs .f p{font-size:.79rem;line-height:1.42;margin-top:.5rem}
.strip-figs .ref{font-size:.62rem;opacity:.72}
@media(max-width:900px){
.strip-figs .n{font-size:clamp(2.5rem,6.4vw,3.5rem)}
.strip-figs .f p{font-size:.8rem}
}
@media(max-width:560px){
.strip-figs .f{padding:14px 13px 12px}
.strip-figs .n{font-size:clamp(2.2rem,11vw,2.9rem)}
.strip-figs .f p{font-size:.76rem}
.strip-figs .fe{font-size:.6rem;letter-spacing:.12em}
}
/* the unit as a word: it cannot ride as a superior at this length, so it
sits on its own line under the digits, small and letterspaced. The
symbol units (%) keep the raised treatment. */
.strip-figs .n .u--w{
display:block;font-style:normal;font-size:.215em;
letter-spacing:.2em;text-transform:uppercase;
vertical-align:baseline;margin:.42em 0 0;opacity:.72;
font-family:var(--sans);font-weight:600;line-height:1;
}
.strip-figs .n{margin-bottom:.25rem}
@media(max-width:560px){
.strip-figs .n .u--w{font-size:.24em;letter-spacing:.16em;margin-top:.45em}
}
/* the caption is now one plain statement in the title face, no eyebrow,
no kicker: a visitor should be told what the panel is, not hinted at */
.strip-say h2{
max-width:20ch;
font-size:clamp(1.85rem,3.15vw,2.85rem);
line-height:1.06;letter-spacing:-.012em;
}
@media(max-width:900px){.strip-say h2{max-width:26ch;font-size:clamp(1.6rem,4.6vw,2.2rem)}}
/* oversize figures. The cards carry them, so the numbers take the room
and the sentence keeps its air underneath. */
.strip-figs .n{font-size:clamp(3.2rem,6.1vw,5.3rem);letter-spacing:-.045em}
.strip-figs .n .u--w{font-size:.18em;letter-spacing:.21em;margin-top:.5em}
@media(max-width:1180px){
.strip-figs .n{font-size:clamp(2.9rem,5.6vw,4rem)}
.strip-figs .n .u--w{font-size:.2em}
}
@media(max-width:900px){
.strip-figs .n{font-size:clamp(2.8rem,7.4vw,4.1rem)}
.strip-figs .n .u--w{font-size:.21em}
}
@media(max-width:560px){
.strip-figs .n{font-size:clamp(2.4rem,12.5vw,3.3rem)}
.strip-figs .n .u--w{font-size:.23em;letter-spacing:.15em}
}
/* ===================================================================
19 Sep — THE EXCHANGE SECTION. What it is, what it does and the ways
in, merged into one. Bone throughout, so it breaks the run of dark
bands, and the compartments are separated by rule and space rather
than by changing the background three times.
=================================================================== */
.xsec{background:var(--bone);color:var(--ink);padding:0 0 clamp(54px,6vw,88px)}
/* the map bands the top and carries the branding, live over the picture */
.xmap{position:relative;overflow:hidden;background:var(--bone)}
.xmap-img{display:block;width:100%;height:auto}
.xmap .wrap{position:absolute;inset:0;pointer-events:none}
.xmap-tt{position:absolute;left:var(--pad);top:clamp(20px,3.4vw,54px);max-width:52%}
.xmap-lock{display:block;height:clamp(44px,5.2vw,84px);width:auto}
.xmap-say{
margin:clamp(10px,1.3vw,18px) 0 0;font-family:var(--sans);font-weight:600;
font-size:clamp(.72rem,1.32vw,1.18rem);letter-spacing:.17em;
text-transform:uppercase;color:var(--forest);
}
/* the compartments */
.xc{padding-top:clamp(40px,4.6vw,68px)}
.xc + .xc{margin-top:clamp(6px,1vw,14px)}
.xsec .eyebrow--sep{margin-top:0}
.xsec h2{max-width:20ch}
.xsec .lead{max-width:62ch}
.xlead{color:var(--gold-ink);font-weight:600}
.xdoes{
font-family:var(--serif);font-weight:400;
font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.1;
letter-spacing:-.01em;margin:.5rem 0 clamp(20px,2.4vw,32px);max-width:24ch;
}
.xsec .three{margin-top:0}
.xsec .what-so{margin-top:clamp(20px,2.4vw,32px)}
.xsec .ways{margin-top:clamp(14px,1.8vw,24px)}
@media(max-width:820px){
.xmap-tt{max-width:76%;top:16px}
.xmap-lock{height:38px}
.xmap-say{font-size:.66rem;letter-spacing:.13em}
}
@media(max-width:480px){
.xmap-tt{top:12px}
.xmap-lock{height:30px}
.xmap-say{font-size:.58rem;margin-top:8px}
}
/* the brushstroke X set inline in the hero's closing line, and the line
itself repointed at the Exchange rather than at another explainer */
.hero--air .say2 .xm{height:.94em;width:auto;vertical-align:-.16em;margin:0 -.1em}
.hero--air .sayl .xm{height:.92em;vertical-align:-.15em;margin:0 -.08em}
/* ---- 19 Sep, second pass. The first version was a field of bone with the
lockup sitting on the picture and the argument split across two headed
compartments, which made the page longer, not shorter. Now: a light map
band, one block of copy on forest so the section has contrast inside it,
and the ways in back on light. No lockup on the art. ---- */
.xsec{background:var(--forest);padding:0}
.xmap{background:var(--bone);line-height:0}
.xmap-img{display:block;width:100%;height:auto}
.xsay{background:var(--forest);color:var(--bone);
padding:clamp(40px,4.6vw,66px) 0 clamp(34px,3.8vw,54px)}
.xsay .eyebrow{color:var(--gold)}
.xsay h2{color:var(--bone);max-width:22ch;margin-top:.35rem}
.xsay .xlead{
font-family:var(--serif);color:var(--gold);
font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.25;
margin:.85rem 0 .55rem;max-width:40ch;
}
.xsay .lead{color:var(--bone-dim);max-width:66ch;margin-top:0}
.xsay .three{margin-top:clamp(26px,3vw,40px)}
.xsay .three .t{border-top:2px solid var(--gold-rule)}
.xsay .three .tn{color:var(--gold)}
.xsay .three p{color:#D5D0C3}
.xsay .what-so{color:var(--bone);margin-top:clamp(22px,2.6vw,34px)}
.xways{background:var(--bone);padding:clamp(34px,4vw,54px) 0 clamp(44px,5vw,70px)}
.xways .eyebrow{color:var(--gold-ink)}
.xways .ways{margin-top:clamp(14px,1.8vw,22px)}
@media(max-width:820px){
.xsay{padding-top:34px}
}
/* the labels were losing to `.three .t p.tn`, which sets forest — invisible
on a forest ground — and the PXO mark needs its dark-ground variant here */
.xsay .three .t p.tn{color:var(--gold)}
.xsay .pxo .d{display:inline-block}
.xsay .pxo .l{display:none}
/* ---- the headline moves onto the left of the map, under a full lockup.
Only possible because both grounds there are light: forest type reads on
the bone ocean and on the gold land alike, so no plate is needed. ---- */
.xmap{position:relative}
.xmap .wrap{position:absolute;inset:0;display:flex;align-items:center}
.xmap-tt{width:min(44%,560px)}
.xmap-lock{display:block;height:clamp(52px,6vw,96px);width:auto}
.xmap-rule{border:0;height:2px;background:var(--gold-rule);
width:clamp(64px,7vw,110px);margin:clamp(14px,1.6vw,22px) 0 clamp(12px,1.4vw,18px)}
.xmap .eyebrow{color:var(--gold-ink);margin:0}
.xmap h2{color:var(--forest);margin:.45rem 0 0;max-width:none;
font-size:clamp(1.5rem,3.1vw,2.7rem);line-height:1.04}
.xmap .xlead{
font-family:var(--serif);color:var(--gold-ink);font-weight:600;
font-size:clamp(.95rem,1.45vw,1.25rem);line-height:1.3;margin:.85rem 0 0;
}
.xsay{padding-top:clamp(34px,3.8vw,52px)}
.xsay .lead{margin-top:0}
/* on a phone the map cannot carry type: the band stands alone and the
headline drops beneath it, on the forest */
@media(max-width:820px){
.xmap .wrap{position:static;display:block}
.xmap-tt{width:auto;padding:clamp(22px,5vw,30px) 0 clamp(4px,1vw,10px)}
.xmap-lock{height:44px}
.xmap h2{font-size:clamp(1.55rem,6.2vw,2.1rem)}
.xmap h2 br,.xmap .xlead br{display:none}
}
/* ---- 20 Sep, the amended note. On the map, in order: lockup, eyebrow,
headline, line. Then the body. Then Entry as its own section, as plain
links rather than tiles. ---- */
.xmap .eyebrow--plain::before{content:none}
.xmap .eyebrow--plain{padding-left:0}
.xmap .xlead{
font-family:var(--serif);color:var(--gold-ink);font-weight:600;
font-size:clamp(1rem,1.6vw,1.4rem);line-height:1.25;margin:.9rem 0 0;
}
.xbig{
font-family:var(--serif);font-weight:400;color:var(--bone);
font-size:clamp(1.35rem,2.35vw,2.05rem);line-height:1.18;
letter-spacing:-.008em;margin:.5rem 0 0;max-width:34ch;
}
.xbig b{font-weight:700;color:var(--gold)}
.xgives{
font-family:var(--serif);color:var(--gold);
font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.3;
margin:clamp(14px,1.6vw,20px) 0 0;max-width:34ch;
}
/* Entry: five plain rows, the whole row a link */
.xentry{background:var(--bone);color:var(--ink);
padding:clamp(46px,5.2vw,78px) 0 clamp(52px,6vw,88px)}
.xentry .eyebrow{color:var(--gold-ink)}
.xentry h2{max-width:30ch;margin:.5rem 0 clamp(24px,3vw,40px)}
.entry{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-bone)}
.entry li{border-bottom:1px solid var(--rule-bone)}
.entry a{
display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2.6fr) minmax(150px,.9fr);
gap:clamp(14px,2.4vw,40px);align-items:baseline;
padding:clamp(16px,1.9vw,26px) 0;text-decoration:none;color:inherit;
}
.entry a:hover{background:var(--bone-2)}
.entry .en{
font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.7rem);
line-height:1.05;color:var(--forest);
}
.entry a:hover .en{color:var(--gold-ink)}
.entry .ec{font-family:var(--sans);font-size:.92rem;line-height:1.5;color:var(--grey)}
.entry .em{
font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold-ink);
}
@media(max-width:820px){
.entry a{grid-template-columns:1fr;gap:.4rem;padding:18px 0}
.xentry h2{max-width:none}
}
/* the map block had no vertical rhythm: the lockup, eyebrow and headline
were landing on top of each other */
.xmap-tt > *{margin-left:0;margin-right:0}
.xmap-lock{margin:0 0 clamp(16px,1.9vw,26px)}
.xmap .eyebrow--plain{margin:0 0 clamp(10px,1.2vw,16px);display:block}
.xmap h2{margin:0}
.xmap .xlead{margin:clamp(12px,1.5vw,20px) 0 0}
/* the entry rows were splitting mid-sentence: the spans are grid items, so
their own children were being blockified along with them */
.entry .en,.entry .ec,.entry .em{display:block}
.entry .ec b,.entry .ec strong{display:inline}
/* the copy is copy: three paragraphs, not a three-column grid with invented
labels over it. Two columns keeps the measure readable without adding depth */
.xcopy{columns:2;column-gap:clamp(30px,4vw,64px);margin-top:clamp(20px,2.4vw,32px)}
.xcopy p{font-family:var(--serif);color:var(--bone-dim);
font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.56;
margin:0 0 1rem;break-inside:avoid}
.xcopy p:last-child{margin-bottom:0}
@media(max-width:820px){.xcopy{columns:1}}
/* the map's left half was dead space. The opening copy moves onto it and
closes on Share. Solve. Become.; the forest block then opens on what the
Exchange gives you, which stands on its own */
.xmap-lead{
font-family:var(--serif);color:var(--forest);
font-size:clamp(.92rem,1.12vw,1.06rem);line-height:1.55;
letter-spacing:0;text-transform:none;font-weight:400;
margin:clamp(16px,2vw,26px) 0 0;max-width:38ch;
}
.xmap-lead b{font-weight:700;color:var(--gold-ink)}
.xmap-tt{width:min(46%,600px)}
.xsay .xbig{max-width:30ch}
@media(max-width:820px){
.xmap-lead{max-width:none;font-size:1rem}
}
/* ============================================================
20 Sep — the map copy, legibility
Three levers, none of them destructive to the art:
1. the kicker comes out of all capitals and goes to forest,
which is both what Zed asked for and the worst of the
legibility problems solved, since it was thin letterspaced
gold running straight over the Canadian cluster;
2. the body copy goes forest rather than gold ink, so it holds
on the gold land as well as on the bone sea;
3. a soft bone wash from the left edge, gone by just past
half width. Enough to lift type off the paint, not enough
to flatten the map.
The marks themselves are left alone for now.
============================================================ */
.xmap::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to right,
rgba(244,241,234,.66) 0%,
rgba(244,241,234,.58) 20%,
rgba(244,241,234,.32) 40%,
rgba(244,241,234,0) 56%);
}
.xmap .wrap{z-index:2}
/* 1. the kicker */
.xmap .eyebrow--plain{
font-family:var(--serif);
text-transform:none;
letter-spacing:.005em;
font-weight:400;
font-style:italic;
font-size:clamp(.95rem,1.28vw,1.2rem);
color:var(--gold-ink);
opacity:1;
margin:0 0 clamp(10px,1.3vw,18px);
}
.xmap .eyebrow--plain b{font-style:normal;font-weight:700;letter-spacing:.01em}
/* 2. the headline and the lines under it */
.xmap h2{
font-size:clamp(1.6rem,3.25vw,2.85rem);
line-height:1.03;
letter-spacing:-.012em;
}
.xmap .xlead{
color:var(--gold-ink);
font-weight:700;
font-size:clamp(1.02rem,1.62vw,1.42rem);
margin:clamp(13px,1.6vw,21px) 0 0;
}
.xmap-lead{
color:var(--forest);
font-size:clamp(.95rem,1.15vw,1.1rem);
line-height:1.5;
max-width:36ch;
margin:clamp(15px,1.9vw,25px) 0 0;
}
.xmap-lead b{color:var(--gold-ink);font-weight:700}
@media(max-width:820px){
.xmap::after{
background:linear-gradient(to bottom,
rgba(244,241,234,0) 0%,
rgba(244,241,234,0) 55%,
rgba(244,241,234,.55) 100%);
}
.xmap .eyebrow--plain{font-size:1.02rem}
}
/* ============================================================
20 Sep — the map panel, deeper
The plate is the same art in the same framing; the asset now
carries more sea around it, so the panel earns the space it is
asking for. On narrow screens the image is held to a minimum
depth so it is not out-weighed by the figures panel above it.
============================================================ */
.xmap-img{display:block;width:100%;height:auto;object-fit:cover;object-position:center}
@media(max-width:820px){
.xmap-img{height:clamp(300px,66vw,460px)}
}
/* the copy centres in the deeper panel rather than sitting at the top of it,
so the extra depth is shared above and below the words instead of all
landing as dead sea at the bottom left */
@media(min-width:821px){
.xmap-tt{top:50%;transform:translateY(-50%);bottom:auto}
}
/* narrow screens: the map gets its own deeper plate, so it is not out-weighed
by the figures panel above it, and the copy flows underneath it rather than
being clipped by the image's new fixed height */
.xmap picture{display:block;line-height:0}
@media(max-width:820px){
.xmap-img{height:auto;object-fit:fill}
.xmap-tt{position:static;transform:none;width:auto;max-width:none;
padding:clamp(22px,5vw,30px) 0 clamp(6px,1.4vw,12px)}
.xmap .wrap{position:static;display:block;pointer-events:auto}
}
/* the wash is a device for lifting copy off the map, which on narrow screens
the copy no longer sits on. Leaving it there only greys the words. */
@media(max-width:820px){
.xmap::after{content:none}
}
/* the copy runs the full column once it is beneath the map */
@media(max-width:820px){
.xmap-lead{max-width:none}
}
/* ============================================================
20 Sep — one panel
The forest slab goes. The statement moves into the ocean the
copy block leaves empty, the eyebrow above it goes altogether,
and what remains of the body sits on bone directly beneath the
map, so the Exchange reads as a single panel rather than a map
with a section bolted under it.
============================================================ */
.xsec{background:var(--bone)}
.xsay{background:transparent;color:var(--ink);
padding:clamp(30px,3.6vw,52px) 0 clamp(46px,5.4vw,80px)}
@media(min-width:821px){
/* the words go back to the top of the panel; the statement takes the foot */
.xmap-tt{top:clamp(26px,3.6vw,56px);transform:none;bottom:auto}
.xsec .xbig{
position:absolute;left:var(--pad);bottom:clamp(26px,3.4vw,54px);
width:min(52%,640px);margin:0;
}
}
.xsec .xbig{
font-family:var(--serif);font-weight:400;color:var(--forest);
font-size:clamp(1.3rem,2.15vw,1.95rem);line-height:1.16;
letter-spacing:-.008em;max-width:26ch;
}
/* the body, on bone */
.xsay .xcopy{columns:2;column-gap:clamp(30px,4vw,64px);margin:0}
.xsay .xcopy p{font-family:var(--serif);color:var(--grey);
font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.58;margin:0 0 1rem;
break-inside:avoid}
.xsay .what-so{font-family:var(--serif);color:var(--forest);
font-size:clamp(1.02rem,1.45vw,1.3rem);line-height:1.34;max-width:30ch;
margin:clamp(22px,2.6vw,36px) 0 0}
.xsay .pxo .d{display:none}
.xsay .pxo .l{display:inline-block}
@media(max-width:820px){
.xsec .xbig{position:static;width:auto;max-width:none;
margin:clamp(18px,3vw,26px) 0 0;font-size:clamp(1.22rem,4.6vw,1.6rem)}
.xsay .xcopy{columns:1}
}
/* ------------------------------------------------------------
the statement, placed off Antarctica rather than across it,
and the seam between the map's sea and the bone under it
softened so the panel reads as one ground.
------------------------------------------------------------ */
@media(min-width:1101px){
.xsec .xbig{top:auto;bottom:23%;}
}
@media(max-width:1100px){
/* short panel: the statement leads the body copy instead */
.xsec .xbig{position:static;width:auto;max-width:34ch;
margin:0 0 clamp(20px,2.6vw,30px)}
.xsay{padding-top:clamp(34px,4.2vw,56px)}
}
.xmap-img{
-webkit-mask-image:linear-gradient(to bottom,#000 86%,rgba(0,0,0,0) 100%);
mask-image:linear-gradient(to bottom,#000 86%,rgba(0,0,0,0) 100%);
}
.xsay .what-so{max-width:44ch}
/* the mask fade already supplies the air above the body copy */
@media(min-width:1101px){
.xsay{padding-top:clamp(4px,1vw,16px)}
}
/* the statement needs air off the paragraph above it when it is in the flow,
or the two read as one run of copy */
@media(max-width:1100px){
.xsec .xbig{margin:clamp(26px,3.4vw,38px) 0 clamp(20px,2.6vw,30px)}
}
/* ============================================================
20 Sep — the Exchange as a single map panel
Everything now sits on the map: there is no block beneath it.
The panel is driven by the copy, with the plate behind it
covering whatever height that comes to, so the map never has
to letterbox and the copy never has to fit an image's shape.
============================================================ */
.xsec{background:var(--bone);padding:0}
.xmap{position:relative;background:var(--bone);line-height:normal}
.xmap picture{position:absolute;inset:0;display:block;z-index:0}
.xmap-img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;
-webkit-mask-image:none;mask-image:none;
}
.xmap::after{z-index:1}
.xmap > .wrap{
position:relative;z-index:2;
padding:clamp(40px,4.6vw,76px) var(--pad) clamp(34px,3.8vw,60px);
}
/* the column of words, over the quiet half of the map */
.xmap-tt{
position:static;transform:none;width:min(52%,760px);max-width:none;
padding:0;
}
/* 1. the kicker, back to the site convention: caps, no X */
.xmap .eyebrow--plain{
font-family:var(--sans);font-style:normal;font-weight:600;
text-transform:uppercase;letter-spacing:.18em;
font-size:clamp(.66rem,.92vw,.82rem);
color:var(--gold-ink);
margin:0 0 clamp(12px,1.5vw,20px);
}
.xmap .eyebrow--plain b{font-weight:700;font-style:normal}
/* 2. Share. Solve. Become. never breaks */
.xmap-lead .nb{white-space:nowrap}
/* 3. the statement, in the Everywhere. Every stage. treatment */
.xsub{
font-family:var(--serif);font-weight:700;color:var(--gold-ink);
font-size:clamp(1.02rem,1.62vw,1.42rem);line-height:1.22;
letter-spacing:0;max-width:30ch;
margin:clamp(26px,3vw,42px) 0 0;
}
/* 4. the body */
.xmap-tt .xcopy{columns:1;margin:clamp(16px,1.9vw,26px) 0 0}
.xmap-tt .xcopy p{
font-family:var(--serif);color:var(--forest);
font-size:clamp(.95rem,1.1vw,1.04rem);line-height:1.52;
margin:0 0 .85rem;max-width:46ch;
}
/* 5. the footer line, across the foot */
.xsec .what-so{
position:relative;z-index:2;
font-family:var(--serif);color:var(--forest);
font-size:clamp(1.05rem,1.5vw,1.38rem);line-height:1.3;
max-width:52ch;
margin:clamp(30px,3.4vw,50px) 0 0;
padding-top:clamp(16px,1.8vw,24px);
border-top:2px solid var(--gold-rule);
}
.xsec .pxo .d{display:none}
.xsec .pxo .l{display:inline-block}
/* the wash covers the column and eases out before the busy half */
.xmap::after{
background:linear-gradient(to right,
rgba(244,241,234,.72) 0%,
rgba(244,241,234,.66) 30%,
rgba(244,241,234,.42) 48%,
rgba(244,241,234,0) 64%);
}
@media(max-width:900px){
.xmap-tt{width:auto}
.xmap > .wrap{padding-top:clamp(30px,5vw,44px)}
.xmap::after{
background:linear-gradient(to right,
rgba(244,241,234,.86) 0%,
rgba(244,241,234,.80) 55%,
rgba(244,241,234,.62) 100%);
content:"";
}
.xsub{max-width:none}
.xmap-tt .xcopy p{max-width:none}
.xsec .what-so{max-width:none}
}
/* the wrap is a plain block now: the column, then the closing line under it */
.xmap > .wrap{display:block;align-items:initial;pointer-events:auto}
.xsec .what-so{display:block;clear:both}
/* ------------------------------------------------------------
narrow screens: the copy cannot sit on the map without the
map having to crop to a sliver to fit behind it, which loses
the world altogether. So it goes back to a band of art with
the words beneath it, and the wash comes off.
------------------------------------------------------------ */
@media(max-width:900px){
.xmap picture{position:static;display:block;line-height:0}
.xmap-img{position:static;width:100%;height:auto;object-fit:fill}
.xmap > .wrap{padding:clamp(26px,5vw,38px) var(--pad) clamp(34px,6vw,48px)}
.xmap::after{content:none}
}
/* ============================================================
20 Sep — the figures panel, tightened
The numbers keep their size; everything around them gives
ground. The copy column narrows so each card is wider, which
takes the descriptors from three lines to two, and that is
where most of the depth was.
============================================================ */
.strip{padding:clamp(22px,2.7vw,36px) 0}
@media(min-width:721px){.strip-in{grid-template-columns:minmax(150px,20%) 1fr;gap:clamp(18px,3vw,44px)}}
.strip-say h2{max-width:15ch}
.strip-figs{gap:clamp(12px,1.5vw,20px)}
.strip-figs .f{padding:clamp(12px,1.2vw,16px) clamp(11px,1.15vw,15px) clamp(10px,1vw,13px)}
.strip-figs .fe{letter-spacing:.11em;font-size:clamp(.58rem,.74vw,.64rem);line-height:1.3}
.strip-figs .n{margin-bottom:.1rem}
.strip-figs .n .u--w{margin-top:.34em}
.strip-figs .f p{margin-top:.42rem;line-height:1.36}
.strip-figs .ref{margin-top:.38rem;line-height:1.35}
/* the headline was setting the depth once its column narrowed; it comes down
a notch and gets its width back, and the card kickers hold one line */
@media(min-width:900px){.strip-in{grid-template-columns:minmax(190px,22%) 1fr}}
.strip-say h2{max-width:18ch;font-size:clamp(1.18rem,1.85vw,1.58rem);line-height:1.16}
@media(min-width:1024px){
.strip-figs .fe{white-space:nowrap;letter-spacing:.08em}
}
/* the caption keeps its weight: it was only shrunk to fit a column that has
since been given its width back */
.strip-say h2{font-size:clamp(1.3rem,2.15vw,1.82rem);line-height:1.14;max-width:19ch}
/* ============================================================
20 Sep — the closing line, and PXO set as the mark
============================================================ */
/* the rule goes: the footer already carries the weight, and a line
between it and the copy above broke the run */
.xsec .what-so{
border-top:0;padding-top:0;
font-family:var(--serif);font-weight:700;color:var(--gold-ink);
font-size:clamp(1.02rem,1.62vw,1.42rem);line-height:1.22;letter-spacing:0;
max-width:54ch;
margin:clamp(26px,3vw,42px) 0 0;
}
.xsec .what-so .pxo img{height:.92em;width:auto;vertical-align:-.13em;margin:0 .04em}
/* PXO in the kicker, set as the mark rather than as letters */
.pxo--eb{display:inline-block;vertical-align:baseline}
.pxo--eb img{height:1.62em;width:auto;vertical-align:-.42em;margin:0 .1em 0 .06em}
/* ============================================================
20 Sep — the copy as a band, not a column
1. the measures come off: the paragraphs were capped at 46ch
inside a 535px column, which is why the copy looked like a
narrow strip with the Atlantic empty beside it. They now
run the full width, and the block runs east to the African
coast.
2. the type goes up to the hero's size, which is what lets
the scrim come down: bigger type needs less help.
3. the scrim comes down accordingly.
============================================================ */
@media(min-width:901px){
.xmap-tt{width:min(58%,660px)}
.xmap-lead{font-size:clamp(1rem,1.28vw,1.16rem);line-height:1.5;max-width:none}
.xmap-tt .xcopy p{font-size:clamp(1rem,1.28vw,1.16rem);line-height:1.5;max-width:none}
.xsub{max-width:none;font-size:clamp(1.08rem,1.72vw,1.52rem)}
.xsec .what-so{max-width:none;font-size:clamp(1.08rem,1.72vw,1.52rem)}
/* lighter, now the type can carry itself */
.xmap::after{
background:linear-gradient(to right,
rgba(244,241,234,.46) 0%,
rgba(244,241,234,.40) 30%,
rgba(244,241,234,.24) 48%,
rgba(244,241,234,0) 62%);
}
/* the closing line sits clear of the foot of the map */
.xmap > .wrap{padding-bottom:clamp(54px,6vw,104px)}
}
/* narrow screens: the plate is the deeper projection too, and the band is
given a real depth so the art is not demoted below the figures above it */
@media(max-width:900px){
.xmap-img{height:clamp(290px,74vw,470px);object-fit:cover;object-position:center}
}
/* the column tightens so the closing line clears the Antarctic band, and the
line keeps to the band rather than running out into unwashed map */
@media(min-width:901px){
.xmap > .wrap{padding-top:clamp(32px,3.6vw,58px)}
.xmap-lock{margin:0 0 clamp(12px,1.3vw,18px)}
.xmap-lead{margin:clamp(12px,1.4vw,19px) 0 0}
.xsub{margin:clamp(20px,2.2vw,30px) 0 0}
.xmap-tt .xcopy{margin:clamp(13px,1.5vw,20px) 0 0}
.xmap-tt .xcopy p{margin:0 0 .72rem}
.xsec .what-so{margin:clamp(20px,2.2vw,30px) 0 0;max-width:42ch}
}
/* ============================================================
20 Sep — the figures hold their panel shape
The four were breaking to a 2x2 at 1024, which between there
and 820 left a square lump sitting beside the caption rather
than a panel. They now hold one row of four wherever the
caption is alongside them, with the numbers stepped down just
enough to fit, and only drop to 2x2 once the caption goes
above — where a 2x2 reads as a panel in its own right.
============================================================ */
@media(min-width:701px){
.strip-figs{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:701px) and (max-width:1100px){
.strip-figs{gap:clamp(9px,1.1vw,14px)}
.strip-figs .f{padding:clamp(10px,1.1vw,13px) clamp(9px,1vw,12px) clamp(9px,1vw,11px)}
.strip-figs .n{font-size:clamp(2.1rem,4.2vw,2.9rem)}
.strip-figs .n .u--w{font-size:.23em;letter-spacing:.15em;margin-top:.4em}
.strip-figs .fe{white-space:normal;font-size:.56rem;letter-spacing:.09em}
.strip-figs .f p{font-size:.74rem;line-height:1.34}
.strip-figs .ref{font-size:.58rem}
.strip-say h2{font-size:clamp(1.08rem,1.9vw,1.36rem)}
}
@media(min-width:821px) and (max-width:1100px){
.strip-in{grid-template-columns:minmax(140px,17%) 1fr;gap:clamp(16px,2vw,28px)}
}
/* ============================================================
20 Sep — prominence: the lockup, the kicker, the closing mark
============================================================ */
.xmap-lock{height:clamp(62px,7.4vw,118px);margin:0 0 clamp(14px,1.6vw,22px)}
.xmap .eyebrow--plain{
font-size:clamp(.74rem,1.02vw,.94rem);
letter-spacing:.2em;font-weight:700;
margin:0 0 clamp(14px,1.6vw,22px);
}
.xmap .eyebrow--plain .pxo--eb img{height:1.55em;vertical-align:-.4em}
.xsec .what-so .pxo img{height:1.36em;vertical-align:-.32em;margin:0 .09em}
@media(max-width:900px){
.xmap-lock{height:clamp(46px,11vw,72px)}
.xmap .eyebrow--plain{font-size:.78rem}
}
/* ============================================================
20 Sep — THE ARC, and the consolidated start panel
The home page now carries one stage vocabulary: CXO, eX, X,
Xer, with Xing as the present tense and PXO as the
destination. It replaces the four doors and the census
stages. Entry and the Dispatch are folded into the panel.
============================================================ */
.arc{padding:clamp(56px,6.4vw,96px) 0 clamp(56px,6.4vw,92px)}
.arc h2{margin:.5rem 0 0;font-size:clamp(1.5rem,2.9vw,2.5rem);line-height:1.06;
letter-spacing:-.012em;max-width:22ch}
.arc .lead{font-family:var(--serif);color:var(--gold-leaf,#E8C55A);
font-size:clamp(1.02rem,1.5vw,1.3rem);margin:clamp(12px,1.5vw,20px) 0 0}
/* the four frames */
.arcline{list-style:none;margin:clamp(30px,3.6vw,52px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,38px)}
.af{border-top:2px solid var(--gold-rule,#C09A3C);padding-top:clamp(16px,1.8vw,24px);
display:flex;flex-direction:column}
/* the glyph: one shape, the affix changing */
.ag{display:flex;align-items:center;justify-content:flex-start;gap:.02em;
margin:0 0 clamp(12px,1.4vw,18px);line-height:1;height:clamp(44px,4.4vw,64px)}
.ag img{height:clamp(40px,4vw,58px);width:auto;display:block}
.ag .pre,.ag .suf{font-family:var(--serif);color:var(--bone);
font-size:clamp(2.1rem,3.4vw,3.1rem);line-height:1;font-weight:400;
letter-spacing:-.02em}
.ag .pre--lc,.ag .suf--lc{font-size:clamp(1.5rem,2.3vw,2.1rem);align-self:flex-end;
padding-bottom:.12em}
.ag .pre{margin-right:-.1em}
.ag .suf{margin-left:-.08em}
.ast{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold);margin:0 0 .5rem}
.af h3{font-family:var(--serif);font-weight:400;color:var(--bone);
font-size:clamp(1.02rem,1.42vw,1.28rem);line-height:1.16;margin:0 0 .6rem}
.ad{font-family:var(--serif);color:var(--bone-dim);
font-size:clamp(.88rem,1.02vw,.98rem);line-height:1.5;margin:0}
.ago{margin:auto 0 0;padding-top:clamp(12px,1.4vw,18px)}
.ago a{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:var(--gold);text-decoration:none;
border-bottom:1px solid rgba(254,202,54,.38);padding-bottom:2px}
.ago a:hover{border-bottom-color:var(--gold)}
/* the verb that runs under all four */
.xingq{font-family:var(--serif);color:var(--bone);
font-size:clamp(1.15rem,1.9vw,1.68rem);line-height:1.22;
margin:clamp(34px,4vw,56px) 0 0;max-width:40ch}
.xingq b{color:var(--gold);font-weight:700}
.xw{font-style:italic}
.xingd{font-family:var(--serif);color:var(--bone-dim);
font-size:clamp(.92rem,1.08vw,1.04rem);line-height:1.54;
margin:clamp(10px,1.2vw,16px) 0 0;max-width:62ch}
/* the destination */
.arrival{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);
margin:clamp(30px,3.4vw,48px) 0 0;padding:clamp(18px,2.2vw,30px) 0 0;
border-top:1px solid var(--rule-forest)}
.arr-mk img{height:clamp(40px,4.6vw,66px);width:auto;display:block}
.arrival p{font-family:var(--serif);color:var(--bone);margin:0;
font-size:clamp(1rem,1.38vw,1.26rem);line-height:1.34}
.arrival .xw{color:var(--gold);font-style:normal}
@media(max-width:1000px){
.arcline{grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,32px)}
}
@media(max-width:600px){
.arcline{grid-template-columns:1fr;gap:22px}
.arrival{flex-direction:column;align-items:flex-start;gap:14px}
.arc h2{max-width:none}
}
/* ---------------------------------------- the start panel, six doors */
.ec-opts--6{grid-template-columns:repeat(6,1fr)}
@media(max-width:1180px){.ec-opts--6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.ec-opts--6{grid-template-columns:repeat(2,1fr)}}
.endcta--home .ecp .cta{font-size:.68rem;padding:0 .6rem}
.endcta--home .ecp-n{font-size:.7rem}
/* ---------------------------------------- the Dispatch, folded in */
.disp{margin-top:clamp(36px,4.4vw,64px);padding-top:clamp(26px,3vw,40px);
border-top:1px solid var(--rule-bone);
display:grid;grid-template-columns:1fr minmax(280px,36%);
gap:clamp(24px,3.4vw,54px);align-items:start}
.disp-say .eyebrow--plain{color:var(--gold-ink);font-family:var(--sans);
font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
margin:0 0 .7rem;padding-left:0}
.disp-say .eyebrow--plain::before{content:none}
.disp-say h3{font-family:var(--serif);font-weight:400;color:var(--ink);
font-size:clamp(1.18rem,1.8vw,1.6rem);line-height:1.12;margin:0;max-width:22ch}
.disp-say p{font-family:var(--serif);color:var(--grey);
font-size:clamp(.92rem,1.05vw,1rem);line-height:1.54;margin:.9rem 0 0;max-width:54ch}
.disp-form{background:#fff;border:1px solid var(--rule-bone);border-radius:6px;
padding:clamp(18px,2vw,26px)}
.disp-form .ju-lab{color:var(--gold-ink)}
.disp-form .ju-in{background:var(--bone);border:1px solid var(--rule-bone);color:var(--ink)}
.disp-form .ju-in::placeholder{color:var(--grey-soft)}
@media(max-width:820px){
.disp{grid-template-columns:1fr;gap:22px}
}
/* six doors need the full width: the caption goes above them rather than
stealing a quarter of the row and squeezing the labels to nothing */
.endcta--home .ec{display:block}
.endcta--home .ec-say{margin:0 0 clamp(22px,2.6vw,34px)}
.endcta--home .ec-say h2{max-width:none}
.endcta--home .ec-opts{margin:0}
.endcta--home .ecp .cta{font-size:.7rem;height:44px;padding:0 .7rem;letter-spacing:.06em}
.endcta--home .ecp .cta .lbl{white-space:nowrap}
.endcta--home .ecp .cta .mki{height:14px}
.endcta--home .ecp-n{font-size:.72rem;line-height:1.3}
@media(max-width:1180px){
.endcta--home .ecp .cta{font-size:.72rem}
}
/* the closing question wants to break on its own terms */
.xingq{max-width:52ch}
/* the arc completes: PXO takes its place in the row, so the letterform rhyme
is visible — C_O becomes e_ becomes _ becomes _er becomes P_O. It is set
apart, because it is the destination rather than a fifth thing to be. */
.arcline{grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.9vw,30px)}
.af--end{border-top-color:var(--gold)}
.af--end .ag .agm{height:clamp(42px,4.2vw,60px);width:auto}
.af--end .ast{color:var(--gold)}
.af--end h3{color:var(--gold-leaf,#E8C55A)}
.af--end .ad{color:var(--bone)}
.af--end .xw{color:var(--gold);font-style:normal}
.af--end{position:relative}
.af--end::after{content:"";position:absolute;inset:-14px -14px -14px -14px;
background:rgba(254,202,54,.045);border-radius:4px;z-index:-1;pointer-events:none}
@media(max-width:1180px){
.arcline{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
.arcline{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.arcline{grid-template-columns:1fr}
}
/* ============================================================
20 Sep — THE X CHECK
The diagnostic gets the loudest panel on the page, because it
is the thing that places the reader on the arc above it. Gold
ground on forest: the brand's strongest move, spent once.
============================================================ */
.xcheck{
margin:clamp(38px,4.4vw,64px) 0 0;
background:var(--gold);color:var(--forest);
border-radius:6px;
padding:clamp(24px,3vw,44px) clamp(22px,2.8vw,44px);
display:grid;grid-template-columns:1fr minmax(260px,34%);
gap:clamp(24px,3.4vw,54px);align-items:start;
box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.xc-eb{font-family:var(--sans);font-size:clamp(.68rem,.92vw,.8rem);font-weight:700;
letter-spacing:.22em;text-transform:uppercase;color:var(--forest);
margin:0 0 clamp(10px,1.2vw,16px);opacity:.78}
.xc-eb b{font-weight:800;opacity:1}
.xc-say h3{font-family:var(--serif);font-weight:400;color:var(--forest);
font-size:clamp(1.3rem,2.35vw,2.05rem);line-height:1.08;letter-spacing:-.01em;
margin:0}
.xc-out{list-style:none;margin:clamp(16px,2vw,26px) 0 0;padding:0}
.xc-out li{font-family:var(--serif);color:var(--forest);
font-size:clamp(.95rem,1.12vw,1.06rem);line-height:1.46;
margin:0 0 .6rem;padding-left:1.5em;position:relative}
.xc-out li::before{content:"";position:absolute;left:0;top:.52em;
width:.62em;height:2px;background:var(--forest);opacity:.55}
.xc-out .xw{font-style:italic;font-weight:700}
.xc-x{display:inline-block;height:.86em;width:auto;vertical-align:-.11em;margin:0 .08em;
filter:brightness(0) saturate(100%) invert(14%) sepia(18%) saturate(1400%) hue-rotate(110deg)}
.xc-note{font-family:var(--sans);font-size:clamp(.74rem,.88vw,.82rem);line-height:1.5;
color:var(--forest);opacity:.74;margin:clamp(14px,1.6vw,22px) 0 0;max-width:46ch}
.xc-form{background:rgba(19,39,32,.07);border:1px solid rgba(19,39,32,.18);
border-radius:5px;padding:clamp(16px,1.9vw,24px)}
.xc-when{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--forest);opacity:.7;margin:0 0 .9rem}
.xc-lab{display:block;font-family:var(--sans);font-size:.66rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--forest);opacity:.8;
margin:0 0 .4rem}
.xc-in{width:100%;background:rgba(255,255,255,.72);
border:1px solid rgba(19,39,32,.24);border-radius:4px;
padding:.72rem .8rem;font-family:var(--sans);font-size:.92rem;color:var(--forest)}
.xc-in::placeholder{color:rgba(19,39,32,.45)}
.xc-in:focus{outline:2px solid var(--forest);outline-offset:1px}
.xc-go{width:100%;justify-content:center;text-align:center;margin-top:.9rem;
background:var(--forest);color:var(--bone);border:0;box-shadow:none}
.xc-go:hover{background:var(--forest-deep,#132720);color:var(--gold)}
.xc-small{font-family:var(--sans);font-size:.68rem;line-height:1.4;
color:var(--forest);opacity:.66;margin:.7rem 0 0;text-align:center}
@media(max-width:820px){
.xcheck{grid-template-columns:1fr;gap:22px}
}
/* ---------------------------------------- the three on LinkedIn, inline */
.ecp-n--3 a{color:var(--gold-ink);text-decoration:none;
border-bottom:1px solid rgba(126,96,35,.35)}
.ecp-n--3 a:hover{border-bottom-color:var(--gold-ink)}
/* the close of the argument, lifted off the retired Exchange page */
.worth{padding:clamp(52px,6vw,90px) 0 clamp(52px,6vw,88px)}
.worth h2{font-size:clamp(1.5rem,2.75vw,2.35rem);line-height:1.06;margin:.6rem 0 0;
letter-spacing:-.012em}
.worth .dim{font-family:var(--serif);font-size:clamp(.98rem,1.15vw,1.1rem);
line-height:1.58;margin:clamp(16px,1.9vw,26px) 0 0}
.worth .kick{margin-top:clamp(20px,2.4vw,32px);
font-size:clamp(1.05rem,1.55vw,1.4rem)}
.worth .pxo img{height:.96em;width:auto;vertical-align:-.14em;margin:0 .05em}
.worth .pxo .d{display:inline-block}
.worth .pxo .l{display:none}
/* the lowercase affixes sit up and tuck in, so eX and Xer read as one mark
rather than a letter standing next to a brushstroke */
.ag .pre--lc,.ag .suf--lc{
font-size:clamp(1.9rem,3vw,2.72rem);
align-self:flex-end;padding-bottom:.1em;
}
.ag .pre--lc{margin-right:-.19em}
.ag .suf--lc{margin-left:-.16em}
/* and the capitals tuck in too, so CXO carries the same rhythm as the PXO
lockup it is rhyming with at the other end of the row */
.ag .pre{margin-right:-.2em}
.ag .suf{margin-left:-.17em}
/* ============================================================
20 Sep — the Census carries the long form of the arc
Five frames, not four: CXO joins it, so the page that
explains the X publishes the same arc the home page does.
============================================================ */
.stgline--5{grid-template-columns:repeat(5,1fr);column-gap:clamp(12px,1.9vw,26px)}
.stgline--5 .gly .uc{color:var(--bone);font-size:.9em;line-height:1}
.stgline--5 .gly .uc{margin-right:-.17em}
.stgline--5 .gly .uc--suf{margin-left:-.15em;margin-right:0}
.stgline--5 .gly .lc{font-size:.84em;color:var(--sage-light);margin-right:-.17em}
.stgline--5 .gly .lc--suf{margin-left:-.15em;margin-right:0}
.stgline--5 .d{font-size:.9rem;line-height:1.56}
@media(max-width:1080px){
.stgline--5{grid-template-columns:repeat(3,1fr);row-gap:clamp(24px,3vw,36px)}
.stgline--5::before{content:none}
.stgline--5 .tk::after{content:none}
}
@media(max-width:820px){
.stgline--5{grid-template-columns:1fr;row-gap:26px}
}
/* the eX section says which frame it is expanding */
.exf{font-family:var(--sans);font-size:clamp(.66rem,.9vw,.78rem);font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);
margin:0 0 .9rem;padding-left:0;display:flex;align-items:center;gap:.5em}
.exf::before{content:none}
.exg{display:inline-flex;align-items:flex-end;line-height:1;
font-family:var(--serif);text-transform:none;letter-spacing:0;
font-size:1.9em;font-weight:400;color:var(--forest)}
.exg .lc{font-size:.8em;margin-right:-.18em;line-height:1}
.exg img{height:.86em;width:auto}
/* a generic .tk card rule from the ticker grid was bleeding into the arc's
frames and giving them a bone ground with bone type on it — invisible.
The arc's frames sit on the section, not in cards. */
.stgline .tk{background:none;padding:0;gap:0}
.stgline .d{color:#C8C2B4}
.stgline--5 .gly .uc{color:var(--bone)}
.stgline--5 .gly .lc{color:var(--sage-light)}
/* ============================================================
20 Sep — the About page
The opening and "Both at thirty-nine" were one point made
twice, so they are one section. The photography starts at
the bios, where a face belongs, and takes the ZED home page
treatment: image covering the section, a scrim running out
from the copy side, words on the dark end.
============================================================ */
.phero-more{margin-top:clamp(26px,3vw,42px);max-width:62ch}
.phero-more .dim{color:#C8C2B4;font-size:clamp(.98rem,1.1vw,1.06rem);
line-height:1.6;margin:0 0 1rem}
.phero-more .kick{margin-top:clamp(18px,2.2vw,28px)}
/* ---------------------------------------------------- the bleed bios */
.biob{
position:relative;overflow:hidden;
min-height:clamp(480px,46vw,660px);
display:flex;align-items:center;
padding:clamp(56px,6vw,92px) 0;
background:var(--forest-deep);
}
.biob-img{position:absolute;inset:0;z-index:0;
background-repeat:no-repeat;background-size:cover;
filter:saturate(1.06) contrast(1.04)}
.biob-ov{position:absolute;inset:0;z-index:1}
.biob .wrap{position:relative;z-index:2;width:100%}
.biob-copy{max-width:min(48%,580px)}
.biob--zed .biob-img{background-image:url('img/about-hero.jpg');
background-position:66% 24%}
.biob--zed .biob-ov{background:linear-gradient(90deg,
rgba(19,39,32,.96) 0%, rgba(19,39,32,.88) 30%,
rgba(19,39,32,.54) 56%, rgba(19,39,32,.16) 82%,
rgba(19,39,32,.06) 100%)}
/* Mike's is the same frame, mirrored, so the pair reads as one system */
.biob--mike{background:var(--forest)}
.biob--mike .biob-ov{background:linear-gradient(270deg,
rgba(28,58,48,.96) 0%, rgba(28,58,48,.88) 30%,
rgba(28,58,48,.58) 58%, rgba(28,58,48,.30) 100%)}
.biob--mike .wrap{display:flex;justify-content:flex-end}
.biob--mike .biob-copy{text-align:left}
.biob-need{position:absolute;left:var(--pad);bottom:clamp(22px,3vw,40px);z-index:3;
font-family:var(--sans);font-size:clamp(.64rem,.8vw,.72rem);letter-spacing:.09em;
text-transform:uppercase;color:var(--sage-light);max-width:26ch;line-height:1.55;
margin:0;padding-left:1.1em;border-left:2px solid var(--gold);opacity:.9}
.biob .rl{font-family:var(--sans);font-size:clamp(.62rem,.78vw,.72rem);font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0}
.biob h3{font-family:var(--serif);font-weight:400;color:var(--bone);
font-size:clamp(1.7rem,3.1vw,2.5rem);line-height:1.04;letter-spacing:-.014em;
margin:.55rem 0 0}
.biob .tag{font-family:var(--serif);color:var(--gold-leaf,#E8C55A);font-weight:700;
font-size:clamp(1rem,1.35vw,1.2rem);margin:.5rem 0 0}
.biob p:not(.rl):not(.tag):not(.place){font-family:var(--serif);color:var(--bone-dim);
font-size:clamp(.95rem,1.08vw,1.03rem);line-height:1.56;
margin:clamp(14px,1.7vw,22px) 0 0}
.biob .place{font-family:var(--sans);font-size:clamp(.66rem,.8vw,.74rem);
letter-spacing:.09em;text-transform:uppercase;color:var(--sage-light);
margin:clamp(20px,2.4vw,30px) 0 0;line-height:1.55;opacity:.88}
@media(max-width:900px){
.biob-copy{max-width:min(66%,520px)}
.biob--zed .biob-img{background-position:72% 20%}
}
@media(max-width:700px){
/* a tall section with a cover image crops the photograph to a vertical
sliver and blows the face up under the copy. On a phone the image is a
band at the top instead, and the words sit on solid ground below it. */
.biob{min-height:auto;align-items:flex-start;display:block;
padding:calc(clamp(230px,62vw,330px) + clamp(22px,5vw,32px)) 0 clamp(34px,7vw,48px)}
.biob-img{inset:0 0 auto 0;height:clamp(230px,62vw,330px)}
.biob-ov{inset:0 0 auto 0;height:clamp(230px,62vw,330px)}
.biob-copy,.biob--mike .biob-copy{max-width:none}
.biob--mike .wrap{display:block}
.biob--zed .biob-img{background-position:72% 14%}
.biob--zed .biob-ov{background:linear-gradient(180deg,
rgba(19,39,32,.20) 0%, rgba(19,39,32,.08) 42%,
rgba(19,39,32,.55) 78%, rgba(19,39,32,1) 100%)}
/* Mike now has a photograph, so his frame takes the same band as Zed's
and the copy sits below it rather than over his face. */
.biob--mike .biob-img,.biob--mike .biob-ov{display:block}
.biob--mike .biob-img{inset:0 0 auto 0;height:clamp(230px,62vw,330px);
background-position:42% 48%}
.biob--mike .biob-ov{inset:0 0 auto 0;height:clamp(230px,62vw,330px);
background:linear-gradient(180deg,
rgba(28,58,48,.10) 0%, rgba(28,58,48,.34) 62%, rgba(28,58,48,.92) 100%)}
.biob-need{position:static;margin:clamp(22px,5vw,30px) 0 0}
}
.phero .kick{color:var(--gold-leaf,#E8C55A)}
.phero-more .kick{font-size:clamp(1.05rem,1.55vw,1.38rem);line-height:1.3}
/* ============================================================
21 Sep — THE NAVIGATION, rebuilt
Seven destinations in the order Zed set, each with a plain
vertical dropdown of that page's own contents. No mega
panel, no HOME item: the mark is the way home, which is what
everyone reaches for anyway.
============================================================ */
.site-head{position:sticky;top:0;z-index:60;background:var(--forest-deep);
border-bottom:1px solid rgba(254,202,54,.16)}
.site-head > .wrap{display:flex;align-items:center;gap:clamp(14px,2vw,30px);
padding-top:clamp(10px,1.1vw,16px);padding-bottom:clamp(10px,1.1vw,16px)}
.brand{flex:0 0 auto;display:block;line-height:0}
.site-head .logo{height:clamp(38px,3.4vw,52px);width:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(6px,1.1vw,18px)}
.nvi{position:relative}
.nvl{
display:block;position:relative;
font-family:var(--sans);font-size:clamp(.62rem,.78vw,.72rem);font-weight:700;
letter-spacing:.15em;text-transform:uppercase;
color:var(--bone);text-decoration:none;white-space:nowrap;
padding:.85rem .1rem;
}
.nvl::after{content:"";position:absolute;left:0;right:100%;bottom:.45rem;height:2px;
background:var(--gold);transition:right .22s ease}
.nvi:hover .nvl::after,.nvl:focus-visible::after,.nvl.is-here::after{right:0}
.nvl.is-here{color:var(--gold)}
.nvl:hover{color:var(--gold-leaf,#E8C55A)}
.nvd{
position:absolute;top:100%;left:50%;transform:translateX(-50%);
min-width:250px;max-width:320px;
background:var(--forest);border:1px solid rgba(254,202,54,.22);
border-top:2px solid var(--gold);
border-radius:0 0 4px 4px;
box-shadow:0 18px 40px rgba(0,0,0,.34);
padding:clamp(14px,1.3vw,18px) clamp(14px,1.3vw,18px) clamp(12px,1.1vw,16px);
z-index:61;
}
.nvi:last-of-type .nvd{left:auto;right:0;transform:none}
.nvd-t{font-family:var(--serif);color:var(--gold-leaf,#E8C55A);font-weight:700;
font-size:.92rem;line-height:1.2;margin:0 0 .7rem;
padding-bottom:.6rem;border-bottom:1px solid rgba(244,241,234,.14)}
.nvd ul{list-style:none;margin:0;padding:0}
.nvd li + li{margin-top:.1rem}
.nvd a{display:block;font-family:var(--serif);color:var(--bone-dim);
font-size:.92rem;line-height:1.34;text-decoration:none;
padding:.4rem .5rem .4rem .78rem;border-radius:3px;position:relative}
.nvd a::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;
margin-top:-2px;border-radius:50%;background:var(--gold);opacity:0;transition:opacity .16s}
.nvd a:hover{color:var(--bone);background:rgba(254,202,54,.08)}
.nvd a:hover::before{opacity:1}
.navcta{flex:0 0 auto;margin-left:clamp(6px,1vw,14px)}
@media(max-width:1300px){
.nvl{letter-spacing:.11em;font-size:.66rem}
.nav{gap:clamp(5px,.9vw,13px)}
}
/* ---------------------------------------------------- the phone menu */
.navtoggle{display:none}
@media(max-width:1040px){
.navtoggle{
display:block;margin-left:auto;background:none;border:1px solid rgba(254,202,54,.4);
color:var(--gold);font-family:var(--sans);font-size:.66rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;border-radius:3px;
padding:.62rem .9rem;cursor:pointer}
.nav{
position:absolute;left:0;right:0;top:100%;margin:0;
display:none;flex-direction:column;align-items:stretch;gap:0;
background:var(--forest-deep);border-top:1px solid rgba(254,202,54,.18);
border-bottom:1px solid rgba(254,202,54,.18);
padding:clamp(8px,2vw,14px) var(--pad) clamp(20px,4vw,28px);
max-height:calc(100vh - 74px);overflow-y:auto}
.nav.open{display:flex}
.nvi{border-top:1px solid rgba(244,241,234,.09)}
.nvi:first-child{border-top:0}
.nvl{padding:.95rem 0 .55rem;font-size:.74rem;letter-spacing:.16em}
.nvl::after{display:none}
/* on a phone the page's contents are simply listed under its name */
.nvd{position:static;transform:none;display:block!important;
min-width:0;max-width:none;background:none;border:0;box-shadow:none;
padding:0 0 .7rem}
.nvd[hidden]{display:block!important}
.nvd-t{display:none}
.nvd a{font-size:.9rem;padding:.34rem 0 .34rem .8rem;color:var(--sage-light)}
.nvd a::before{opacity:.5}
.navcta{margin:clamp(16px,3vw,22px) 0 0;align-self:flex-start}
}
/* ---------------------------------------------------------------------
21 Sep — the map copy carries more ink
It was forest at 400 on a light wash and going soft. The body drops to
the deep forest, the gold lines to a deeper gold ink, and the wash comes
up a little under the column only. The map itself is untouched.
--------------------------------------------------------------------- */
@media(min-width:901px){
.xmap::after{
background:linear-gradient(to right,
rgba(244,241,234,.58) 0%,
rgba(244,241,234,.52) 30%,
rgba(244,241,234,.30) 50%,
rgba(244,241,234,0) 66%);
}
}
.xmap-lead,.xmap-tt .xcopy p{color:var(--forest-deep)}
.xmap .eyebrow--plain{color:#6B5018}
.xmap .xlead,.xsub,.xsec .what-so{color:#6B5018}
.xmap-lead b,.xsec .what-so b{color:#6B5018}
.xmap h2{color:var(--forest-deep)}
/* the bar rides the scroll, and sits a little deeper */
.site-head{
position:-webkit-sticky;position:sticky;top:0;z-index:60;
box-shadow:0 10px 26px rgba(0,0,0,.16);
}
.site-head > .wrap{padding-top:clamp(14px,1.6vw,23px);padding-bottom:clamp(14px,1.6vw,23px)}
.site-head .logo{height:clamp(42px,3.8vw,60px)}
html,body{overflow-x:clip}
@media(max-width:1040px){
/* older mobile-nav rules were drawing a rule under every link; the group
dividers do that job */
.nav a{border-bottom:0!important}
.nvd li,.nvd li + li{margin-top:0;border:0}
.nvd a{border:0}
.nvi{border-top:1px solid rgba(244,241,234,.12)}
}
/* ============================================================
21 Sep — the map plate, resolved
Gold marks with a shadow, so the people on the land are the
same stroke as the logo. Minimum wash, so the Americas keep
their paint. The lockup leaves the copy column for the ocean,
which lets the kicker back in at the top to do real work.
============================================================ */
/* the PXO mark set into the statement */
.pxo--sub{display:inline-block;vertical-align:baseline}
.pxo--sub img{height:1.16em;width:auto;vertical-align:-.26em;margin:0 .06em}
@media(min-width:901px){
/* the wash, down to a quarter: enough to take the strain off the copy,
not enough to read as a veil */
.xmap::after{
background:linear-gradient(to right,
rgba(244,241,234,.24) 0%,
rgba(244,241,234,.20) 32%,
rgba(244,241,234,.11) 52%,
rgba(244,241,234,0) 62%);
}
/* the lockup goes to the ocean */
.xmap-tt > .xmap-lock{display:none}
.xmap-cart{
position:absolute;right:clamp(10px,1.6vw,28px);
bottom:clamp(58px,7.4vw,118px);z-index:3;
display:flex;flex-direction:column;align-items:center;text-align:center;
pointer-events:none;
}
.xmap-cart img{display:block;height:clamp(64px,7.2vw,116px);width:auto}
.xmap-cart .cline{
font-family:var(--sans);font-size:clamp(.55rem,.70vw,.64rem);font-weight:700;
letter-spacing:.20em;text-transform:uppercase;color:#6B5018;
margin:clamp(10px,1.2vw,16px) 0 0;opacity:.88;
}
/* the line it carries is said once, here, so it comes out of the column */
.xmap .xlead{display:none}
.xmap h2{margin-bottom:clamp(6px,.8vw,12px)}
}
/* narrow screens keep the lockup in the flow above the words, where there is
no ocean to put it in */
@media(max-width:900px){
.xmap-cart{display:none}
}
/* ============================================================
21 Sep — the figures read as a strip, not a section
A 1fr row in the card grid was absorbing slack and stretching
every card to a fixed depth. The rows now size to their own
content, the section padding comes in, and the internal
spacing tightens. The numbers keep their size.
============================================================ */
.strip{padding:clamp(16px,1.9vw,26px) 0}
.strip-in{align-items:start}
.strip-figs{grid-template-rows:auto auto auto auto}
.strip-figs .f{align-content:start}
.strip-figs .f p{margin-top:.32rem}
.strip-figs .ref{margin-top:.5rem}
.strip-figs .n{margin-bottom:0}
.strip-figs .n .u--w{margin-top:.3em}
/* the row gap was stacking on top of the elements' own margins, so every
join inside a card was spaced twice */
.strip-figs{row-gap:0}
.strip-figs .fe{margin:0 0 .35rem}
.strip-figs .n{margin:0}
.strip-figs .f p{margin-top:.42rem}
.strip-figs .ref{margin:.6rem 0 0}
@media(min-width:1101px){
.strip-figs .n{font-size:clamp(3.2rem,5.1vw,4.4rem);line-height:.9}
.strip-figs .n .u--w{font-size:.21em;margin-top:.34em}
}
/* 21 Sep — the arc's second line holds one line, and the tagline lands it */
.arc h2{max-width:34ch}
.xingx{
font-family:var(--serif);font-weight:400;color:var(--gold);
font-size:clamp(1.3rem,2.3vw,2rem);line-height:1.12;letter-spacing:-.01em;
margin:clamp(16px,1.9vw,26px) 0 0;
}
.xingx .xmk{display:inline-block;height:.94em;width:auto;vertical-align:-.12em;margin:0 .04em}
/* =====================================================================
YOUR X — section 2 new treatment, per Zed's document · 21 Sep 2026
Three-line hero lede · the two pills · the portfolio equation ·
the configuration list.
===================================================================== */
/* the hero lede now runs as three lines, not one block */
.bh-lede + .bh-lede{margin-top:.5rem}
/* the two pills, on a light ground, mid-page */
.pillpair{
margin-top:clamp(22px,2.6vw,34px);
display:flex;gap:clamp(14px,1.8vw,24px);flex-wrap:wrap;
}
.pillpair .pp{display:flex;flex-direction:column;gap:.5rem;min-width:170px}
.pillpair .pp .cta{
width:100%;min-width:0;height:44px;padding:0 1rem;font-size:.74rem;
background:var(--forest);color:var(--bone);
}
.pillpair .pp .cta:hover{background:var(--gold);color:var(--forest);transform:translateY(-1px)}
.pillpair .pp .cta .mki{height:15px}
.pillpair .pp-n{
font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--grey-soft);margin:0;text-align:center;
}
@media(max-width:480px){.pillpair .pp{min-width:0;flex:1 1 100%}}
/* the equation itself — set, not written */
.eqn{
font-family:var(--serif);font-weight:700;color:var(--forest);
font-size:clamp(1.02rem,1.7vw,1.24rem);line-height:1.5;
margin:.9rem 0 1.35rem;padding:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,22px);
background:var(--bone);border-left:3px solid var(--gold);
}
.eqn i{font-style:normal;color:var(--gold-ink);padding:0 .1em}
.eqn .eqs{color:var(--gold-ink);padding:0 .22em}
.eqn b{font-weight:700;white-space:nowrap}
/* the worked configuration */
.conf{
list-style:none;margin:.85rem 0 0;padding:0;
display:flex;flex-direction:column;gap:.7rem;
}
.conf li{
position:relative;padding-left:1.6rem;color:var(--grey);
font-size:1rem;line-height:1.6;
}
.conf li::before{
content:"\00D7";position:absolute;left:0;top:-.04em;
font-family:var(--serif);font-weight:700;font-size:1.12rem;color:var(--gold-deep);
}
.kick--sm{font-size:clamp(1.12rem,2.2vw,1.42rem);margin-top:1.2rem}
@media(min-width:861px){ .g2--bal{align-items:center} }
/* =====================================================================
ABOUT — locations carry the story · 21 Sep 2026
Mike's placeholder is gone (his frame now waits silently). The London
and Los Angeles copy has come up out of "One conversation" and into the
bios, where the place sits under the name and does real work.
===================================================================== */
.biob .loc{
display:flex;align-items:baseline;gap:clamp(12px,1.4vw,20px);flex-wrap:wrap;
margin:clamp(14px,1.7vw,22px) 0 clamp(16px,2vw,26px);
padding-top:clamp(12px,1.5vw,18px);
border-top:1px solid rgba(244,241,234,.20);
}
.biob .loc b{
font-family:var(--serif);font-weight:400;color:var(--bone);
font-size:clamp(1.28rem,2.1vw,1.72rem);line-height:1;letter-spacing:-.012em;
flex:0 0 auto;
}
.biob .loc span{
font-family:var(--sans);font-size:clamp(.72rem,.86vw,.8rem);line-height:1.55;
color:var(--sage-light);max-width:34ch;
}
/* the .loc paragraph must not inherit the body-copy rule below it */
.biob p.loc{margin-top:clamp(14px,1.7vw,22px)}
/* One conversation, stripped: the two cities and the crossing, nothing else */
.reachblock .reach .city{text-align:center}
.reachblock .reach .nm{
font-family:var(--serif);font-weight:400;letter-spacing:-.012em;
font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.05;margin:.3rem 0 0;
}
.reachblock .reach .who{
font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;margin:0;
}
/* Mike's photograph, 21 Sep: his headshot cut in on the LA evening.
The frame is the mirror of Zed's, so he stands left and the scrim
runs in from the right where the copy sits. */
.biob--mike .biob-img{background-image:url('img/mike-hero.jpg');
background-position:42% 62%}
@media(max-width:900px){
.biob--mike .biob-img{background-position:34% 22%}
}
/* =====================================================================
THE X CHECK DEVICE — in situ · 21 Sep 2026
Replaces the email capture in the gold panel. The device IS the link:
no button beside it, because a button would file it with the ordinary
CTAs and this is the flagship offer.
The roundel is FILLED on every ground so it reads as an object rather
than a wireframe, which means the interior never changes: dark disc,
gold paint, bone lockup. Only the bezel and the ring answer the ground.
The four stage lockups are .ag from the arc section, lifted wholesale.
===================================================================== */
.xcdev{
display:grid;place-items:center;text-decoration:none;
padding:clamp(6px,1vw,14px) 0;
/* on the gold panel — the disc is forest, not near-black, so the device
reads as a green object on gold rather than a hole punched in it */
--disc:var(--forest); --paint:var(--gold); --ring:#8A6B22; --mk:var(--bone);
--bez:rgba(19,39,32,.72); --bezt:var(--forest-deep); --qk:var(--forest-deep);
--lbl:#DCD7CB; --lblx:var(--gold-deep); --cue:var(--forest-deep);
}
.xcdev .dv{position:relative;width:1em;height:1em;display:block;
font-size:clamp(190px,23vw,300px);cursor:pointer}
.xcdev .bez{position:absolute;inset:0;width:100%;height:100%;
transform-origin:50% 50%;animation:xcturn 48s linear infinite}
@keyframes xcturn{to{transform:rotate(360deg)}}
.xcdev:hover .bez,.xcdev:focus-visible .bez{animation-duration:14s}
.xcdev .band{fill:none;stroke:var(--bez);stroke-width:1.2;opacity:.85}
.xcdev .tk{stroke:var(--bez);stroke-linecap:butt}
.xcdev .bq{fill:var(--qk);
-webkit-mask-image:url('img/pxo-x-real.png');mask-image:url('img/pxo-x-real.png');
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center}
.xcdev .lg{fill:var(--bezt);font-family:var(--sans);
font-size:11.4px;font-weight:700;letter-spacing:3.6px}
.xcdev .rnd{position:absolute;left:50%;top:50%;width:.775em;height:.775em;
transform:translate(-50%,-50%);color:var(--ring)}
.xcdev .rnd-disc{position:absolute;inset:0;border-radius:50%;background:var(--disc);
border:.012em solid var(--ring);
box-shadow:inset 0 0 .10em rgba(0,0,0,.35), 0 .012em .04em rgba(0,0,0,.28);
transition:filter .25s}
.xcdev:hover .rnd-disc{filter:brightness(1.12)}
.xcdev .bx,.xcdev .bm{
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-position:center;mask-position:center;display:block}
.xcdev .bx{-webkit-mask-image:url('img/pxo-x-real.png');mask-image:url('img/pxo-x-real.png');
background-color:var(--paint)}
.xcdev .bm{-webkit-mask-image:url('img/pxo-mark-solid-forest.png');
mask-image:url('img/pxo-mark-solid-forest.png');background-color:var(--mk)}
.xcdev .rnd-x{position:absolute;left:50%;top:50%;width:.695em;height:.588em;
transform:translate(-50%,-50%)}
.xcdev .rnd-c{position:absolute;left:50%;top:50%;width:.235em;height:.142em;
transform:translate(-50%,-50%)}
.xcdev .rl{position:absolute;width:0;height:0;line-height:0;display:flex;
align-items:center;justify-content:center;transform:translate(-50%,-50%)}
.xcdev .rl-n{left:51.5%;top:11%}
.xcdev .rl-e{left:81%;top:50%}
.xcdev .rl-s{left:50%;top:87%}
.xcdev .rl-w{left:19%;top:50%}
/* the stage lockups — .ag from the arc, in em so they hold at any size */
.xcdev .lb{font-size:.105em;font-family:var(--serif);white-space:nowrap;line-height:1;
display:inline-flex;align-items:center;gap:.02em;color:var(--lbl)}
/* 2 Oct - Zed: the brush X carries more weight everywhere. In the stage
lockups it was reading as a hairline beside the serif caps. */
.xcdev .lb .bxi{display:block;height:1.34em;width:1.583em;flex:0 0 auto;
background-color:var(--lblx)}
.xcdev .lb .pre,.xcdev .lb .suf{font-family:var(--serif);font-size:.855em;line-height:1;
font-weight:400;letter-spacing:-.02em;color:inherit}
.xcdev .lb .pre{margin-right:-.30em}
.xcdev .lb .suf{margin-left:-.26em}
.xcdev .lb .pre--lc,.xcdev .lb .suf--lc{font-size:.75em;align-self:flex-end;
padding-bottom:.1em}
.xcdev .lb .pre--lc{margin-right:-.28em}
.xcdev .lb .suf--lc{margin-left:-.25em}
/* it is a control, so it says so */
.xcdev .cue{position:absolute;left:50%;bottom:-2.2em;transform:translateX(-50%);
font-family:var(--sans);font-size:.05em;font-weight:700;letter-spacing:.24em;
text-transform:uppercase;color:var(--cue);opacity:0;white-space:nowrap;
transition:opacity .28s,transform .28s}
.xcdev:hover .cue,.xcdev:focus-visible .cue{opacity:1;transform:translateX(-50%) translateY(-.5em)}
.xcdev:focus-visible{outline:2px solid var(--forest-deep);outline-offset:6px;border-radius:50%}
@media(max-width:700px){
.xcdev .dv{font-size:min(300px,62vw)}
}
@media(prefers-reduced-motion:reduce){ .xcdev .bez{animation:none} }
/* the panel's name is a title now, not an eyebrow, and it carries the paint */
.xc-title{
font-family:var(--serif);font-weight:400;color:var(--forest);
font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1;letter-spacing:-.018em;
margin:0 0 clamp(10px,1.2vw,16px);display:flex;align-items:center;gap:.14em;
}
.xc-tx{height:1.24em;width:auto;display:inline-block;margin:0 -.06em;
filter:brightness(0) saturate(100%) invert(14%) sepia(18%) saturate(1180%)
hue-rotate(112deg) brightness(95%) contrast(92%)}
.xcheck .xc-say h3{margin-top:0}
/* =====================================================================
THE X CHECK PAGE — x-check.html · 21 Sep 2026
The flow: device → seven questions → ungated result → the report,
which is the only thing that asks for an email.
===================================================================== */
.xq{padding:clamp(48px,6.5vw,92px) 0}
.xq-open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);
gap:clamp(28px,4.5vw,64px);align-items:center}
.xq-say h1{font-size:clamp(2.1rem,5vw,3.4rem);color:var(--bone);margin:0}
.xq-say .eyebrow b{color:var(--gold);font-weight:700}
.xq-lead{font-family:var(--serif);color:var(--bone-dim);
font-size:clamp(1.02rem,1.5vw,1.18rem);margin:clamp(14px,1.8vw,22px) 0 0;max-width:44ch}
.xq-out{list-style:none;margin:clamp(16px,2vw,26px) 0 0;padding:0;
display:flex;flex-direction:column;gap:.7rem;max-width:48ch}
.xq-out li{position:relative;padding-left:1.7rem;color:var(--bone-dim);
font-size:1rem;line-height:1.55}
.xq-out li::before{content:"";position:absolute;left:0;top:.56em;
width:.6rem;height:2px;background:var(--gold)}
.xq-out .xw{font-style:italic;font-weight:700;color:var(--bone)}
.xq-free{font-family:var(--sans);font-size:.74rem;letter-spacing:.09em;
text-transform:uppercase;color:var(--sage);margin:clamp(20px,2.4vw,30px) 0 0;
line-height:1.6}
.xq-free b{color:var(--bone)}
.xq-dev{display:grid;place-items:center}
/* the device on the deep ground, as a button */
.xcdev--btn{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.xcdev--btn,.xcdev--res{
--disc:#22493C; --paint:var(--gold); --ring:#8A6B22; --mk:var(--bone);
--bez:#7E6023; --bezt:var(--sage-light); --qk:var(--gold);
--lbl:#DCD7CB; --lblx:var(--gold-deep); --cue:var(--sage-light);
}
.xcdev--btn:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:50%}
.xq-dev .xcdev .dv{font-size:clamp(200px,26vw,340px)}
.xq-dev--res .xcdev .dv{font-size:clamp(170px,22vw,280px)}
/* the lit stage */
.xcdev .rl.on .lb{color:var(--gold);transform:scale(1.2);
filter:drop-shadow(0 0 .3em rgba(254,202,54,.55))}
.xcdev .rl.on .lb .bxi{background-color:var(--gold)}
.xcdev.is-pxo .rnd-c{filter:drop-shadow(0 0 .06em rgba(254,202,54,.9))}
/* the questions */
.xq-run{max-width:780px}
.xq-bar{height:3px;background:rgba(244,241,234,.16);margin-bottom:1.5rem;position:relative}
.xq-bar i{position:absolute;inset:0 auto 0 0;background:var(--gold);width:0;
transition:width .35s ease}
.xq-n{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--sage);margin:0 0 .9rem}
.xq-t{font-family:var(--serif);font-weight:400;color:var(--bone);
font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.14;margin:0 0 1.4rem;max-width:26ch}
.xq-opts{display:flex;flex-direction:column;gap:.6rem}
.xq-opt{text-align:left;background:rgba(244,241,234,.05);border:1px solid var(--rule-forest);
border-radius:2px;padding:.95rem 1.15rem;color:var(--bone-dim);font-size:1rem;
font-family:var(--serif);line-height:1.45;cursor:pointer;transition:.16s}
.xq-opt:hover,.xq-opt:focus-visible{background:rgba(254,202,54,.12);border-color:var(--gold);
color:var(--bone);outline:none}
.xq-opt.is-on{border-color:var(--gold);color:var(--bone)}
.xq-back{margin-top:1.3rem;background:none;border:0;padding:0;cursor:pointer;
font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--sage);text-decoration:underline;
text-underline-offset:4px}
.xq-back:hover{color:var(--gold)}
/* the result */
.xq-res-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38%);
gap:clamp(26px,4vw,56px);align-items:center}
.xq-stage{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold);margin:0 0 .8rem}
.xq-res h2{font-family:var(--serif);font-weight:400;color:var(--bone);
font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.08;margin:0}
.xq-body{font-family:var(--serif);color:var(--bone-dim);margin:1.1rem 0 0;
font-size:1.03rem;line-height:1.6;max-width:46ch}
.xq-xing{font-family:var(--serif);color:var(--bone-dim);margin:1rem 0 0;
font-size:1.03rem;line-height:1.6;max-width:46ch}
.xq-xing b{color:var(--gold);font-weight:700}
.xq-next{margin:clamp(18px,2.2vw,28px) 0 0;padding-top:clamp(14px,1.8vw,22px);
border-top:1px solid var(--rule-forest);font-family:var(--serif);
color:var(--bone-dim);font-size:1.02rem;line-height:1.6;max-width:46ch}
.xq-next b{display:block;font-family:var(--sans);font-size:.66rem;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin-bottom:.5rem}
.xq-gate{margin:clamp(30px,4vw,52px) 0 0;padding:clamp(22px,2.8vw,34px);
background:rgba(244,241,234,.05);border:1px solid var(--rule-forest);border-radius:3px}
.xq-gate-t{font-family:var(--serif);color:var(--bone-dim);max-width:62ch;
font-size:1.02rem;line-height:1.6;margin:0}
.xq-gate-t b{color:var(--bone)}
.xq-lab{display:block;font-family:var(--sans);font-size:.66rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin:1.2rem 0 .5rem}
.xq-row{display:flex;gap:10px;flex-wrap:wrap}
.xq-in{flex:1 1 240px;height:52px;padding:0 1rem;border:1px solid var(--rule-forest);
background:rgba(244,241,234,.07);color:var(--bone);font-family:var(--sans);
font-size:.95rem;border-radius:2px}
.xq-in::placeholder{color:var(--sage)}
.xq-in:focus{outline:2px solid var(--gold);outline-offset:1px}
.xq-row .cta{flex:0 0 auto;height:52px}
.xq-small{font-family:var(--sans);font-size:.7rem;line-height:1.5;color:var(--sage);
margin:.9rem 0 0;max-width:52ch}
.xq-again{margin-top:1.6rem;background:none;border:0;padding:0;cursor:pointer;
font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--sage);text-decoration:underline;
text-underline-offset:4px}
.xq-again:hover{color:var(--gold)}
@media(max-width:860px){
.xq-open,.xq-res-in{grid-template-columns:1fr}
.xq-dev{order:-1}
.xq-dev .xcdev .dv{font-size:min(300px,64vw)}
}
/* the panel title, reversed for the dark X Check page */
.xc-title--dk{color:var(--bone)}
.xc-tx--dk{filter:none}
/* the two halves of the read, side by side under the result */
.xq-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:clamp(20px,3vw,40px);margin:clamp(22px,2.8vw,34px) 0 0}
.xq-two .xq-next{margin:0;max-width:none}
@media(max-width:860px){.xq-two{gap:20px}}
/* the report handover on the thank-you page — only appears when somebody
has just finished the X Check and asked for their report */
.xrep{
margin:clamp(24px,3vw,36px) 0 0;padding:clamp(20px,2.6vw,30px);
background:rgba(254,202,54,.10);border:1px solid rgba(192,154,60,.45);
border-radius:3px;max-width:56ch;
}
.xrep-e{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold-ink);margin:0}
.xrep-h{font-family:var(--serif);font-weight:400;color:var(--forest);
font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.1;margin:.6rem 0 0}
.xrep-s{font-family:var(--serif);color:var(--grey);font-size:.98rem;line-height:1.55;
margin:.7rem 0 1.2rem}
/* =====================================================================
X CHECK — Zed's notes doc, 22 Sep
The landing carries the second line of the promise; the bullets are the
paint; the result names itself and shows ONE moniker on the roundel.
===================================================================== */
.xq-say h1 .u{color:var(--gold)}
.xq-only{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--sage);margin:clamp(20px,2.4vw,28px) 0 .9rem}
.xq-out--x li{padding-left:2.1rem}
.xq-out--x li::before{display:none}
.xq-bx{position:absolute;left:0;top:.14em;height:1.05em;width:auto;display:block}
/* the result names itself */
.xc-title--sm{font-size:clamp(1.15rem,2.1vw,1.5rem);margin-bottom:clamp(14px,1.8vw,20px)}
.xq-eb{margin:0 0 .7rem}
/* one moniker only, so the answer cannot be misread */
.xcdev .rl{transition:opacity .45s ease}
.xcdev .rl.off{opacity:0}
.xcdev.is-answer .rl.on .lb{transform:scale(1.34)}
@media(prefers-reduced-motion:reduce){.xcdev .rl{transition:none}}
/* .xc-x is filtered to forest for the gold panel; on the dark page it has to
stay gold or it disappears into the ground */
.band-deep .xc-x,.xq .xc-x{filter:none}
/* =====================================================================
THE STANDING X CHECK DOOR — 22 Sep
The miniature roundel, in the left column of the CTA panel rather than
in the row of pills, because the flagship must not file itself with the
ordinary CTAs. On bone, so the disc stays dark and the paint stays gold.
===================================================================== */
.ec-say h2 .ecx-h{height:.78em;width:auto;display:inline-block;vertical-align:-.04em;
margin:0 -.02em}
.ecx{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);text-decoration:none;
margin:clamp(20px,2.4vw,30px) 0 0;padding-top:clamp(16px,2vw,24px);
border-top:1px solid var(--rule-bone);max-width:20rem}
.ecx-w{display:flex;flex-direction:column;gap:2px;min-width:0}
.ecx-w b{font-family:var(--serif);font-weight:400;color:var(--forest);
font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.05;letter-spacing:-.012em;
display:flex;align-items:center;gap:.16em}
.ecx-x{height:1.08em;width:auto;display:inline-block;vertical-align:-.18em}
.ecx-w small{font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--grey-soft)}
.ecx:hover .ecx-w b{color:var(--gold-ink)}
.xcdev--mini{
--disc:var(--forest); --paint:var(--gold); --ring:#8A6B22; --mk:var(--bone);
--bez:#8A6B22; --bezt:var(--forest); --qk:var(--gold-ink);
--lbl:#DCD7CB; --lblx:var(--gold-deep); --cue:var(--forest);
}
.xcdev--mini .dv{font-size:clamp(66px,7vw,88px)}
.xcdev--mini .lg{font-size:13.5px;letter-spacing:3.9px}
.xcdev--mini .cue{display:none}
/* at this size the monikers are mush, so the mini uses the stripped version
agreed for small sizes: disc, paint, lockup, bezel. The legend stays and
becomes texture, which is correct — it is a watch, not a label */
.xcdev--mini .rl{display:none}
/* =====================================================================
X CHECK — Zed's second pass, 22 Sep
The painted X in the bezel legend; the Xs in copy sized as marks rather
than bullets; the answer state where the reader's own glyph takes the
middle of the roundel; the gate given a title and a plainer promise.
===================================================================== */
/* the X in the bezel name is the brushstroke, like every other X on the site */
.xcdev .lgx{fill:var(--qk);
-webkit-mask-image:url('img/pxo-x-real.png');mask-image:url('img/pxo-x-real.png');
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center}
/* an X set in running copy is a mark, not a bullet: it sits up to the caps */
.xq .xc-x,.band-deep .xc-x{height:1.52em;vertical-align:-.40em;margin:0 .03em}
.xq-bx{height:1.46em;top:.1em}
.xc-title .xc-tx{height:1.34em}
.xq-lead .u{color:var(--gold);font-weight:400}
/* the pulsing invitation under the roundel */
.xq-take{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--sage-light);margin:clamp(14px,1.8vw,22px) 0 0;
text-align:center;display:flex;align-items:center;justify-content:center;gap:.4em;
animation:xqpulse 3.2s ease-in-out infinite}
.xq-takex{height:1.35em;width:auto;display:inline-block}
@keyframes xqpulse{0%,100%{opacity:.5}50%{opacity:1}}
.xq-dev:hover .xq-take{animation:none;opacity:1;color:var(--gold)}
/* ---------- the answer ---------- */
.xq-ansttl{font-family:var(--serif);font-weight:400;color:var(--bone);
font-size:clamp(1.45rem,2.9vw,2.1rem);line-height:1;letter-spacing:-.015em;
margin:0 0 clamp(20px,2.6vw,32px);display:flex;align-items:center;gap:.16em}
.xq-desc{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.22em;
text-transform:uppercase;color:var(--gold);margin:0 0 .8rem}
.xq-res h2{margin-bottom:.4rem}
/* the sage headings are gone: the two reads now run on from the copy in gold,
the way the practice line already did */
.xq-body .ld{color:var(--gold);font-weight:700}
.xq-res .xq-body{margin-top:1rem}
/* the answer roundel: the reader's glyph in the middle, nothing else */
.xcdev.is-answer .rl,
.xcdev.is-answer .rnd-c,
.xcdev.is-answer .rnd-x{opacity:0;visibility:hidden}
.ans{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
display:none;flex-direction:column;align-items:center;gap:.06em;
width:100%;pointer-events:none}
.xcdev.is-answer .ans{display:flex}
.ansg{display:flex;align-items:center;justify-content:center;line-height:1}
.ansg .lb{font-size:.52em;color:var(--gold)}
.ansg .lb .bxi{background-color:var(--gold)}
.ansg .lb--mk .bmk{display:block;height:1em;width:1.654em;background-color:var(--gold);
-webkit-mask-image:url('img/pxo-mark-solid-forest.png');
mask-image:url('img/pxo-mark-solid-forest.png');
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center}
.ansd{font-family:var(--sans);font-size:.056em;font-weight:700;letter-spacing:.24em;
text-transform:uppercase;color:var(--bone);margin-top:.9em}
/* the result drops in from the intro rather than appearing */
.xq-res{animation:xqdrop .52s cubic-bezier(.16,.84,.3,1) both}
@keyframes xqdrop{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
/* ---------- the gate ---------- */
.xq-gate-e{font-family:var(--serif);font-weight:400;color:var(--gold);
font-size:clamp(1.15rem,2.1vw,1.55rem);line-height:1;letter-spacing:-.014em;
margin:0 0 .9rem;display:flex;align-items:center;gap:.14em}
.xq-gate-e .xc-tx{height:1.32em}
@media(prefers-reduced-motion:reduce){
.xq-take{animation:none;opacity:1}
.xq-res{animation:none}
}
/* the X in a headline is the paint, at cap height */
.xq-say h1 .h1x{height:.86em;width:auto;display:inline-block;vertical-align:-.04em;
margin:0 .01em 0 .04em}
/* =====================================================================
THE HEADING SYSTEM — 22 Sep
Audited across eleven pages: H1 was already consistent, H2 was not.
On light grounds some H2s were inheriting the body's warm black
(#17130F) and others were taking the brand forest (#1C3A30). Two
near-blacks doing the same job is drift, not design, so headings now
take a colour rather than inheriting one.
Dark grounds already set bone explicitly and are untouched.
===================================================================== */
.band-bone2 h2,.band-bone2 h3,
main > section:not([class]) h2,main > section:not([class]) h3,
.cinst h2,.cinst h3,.xsec h2{color:var(--forest)}
/* the X Check page was set in the body face; display headings belong to
Instrument Serif like every other heading on the site */
.xq-say h1,.xq-res h2,.xq-t,.xq-ansttl,.xq-gate-e,.xc-title{font-family:var(--disp)}
.xq-res h2{color:var(--bone)}
/* H3 in the display face, like every other heading. The four exceptions
were all recent work of mine — the arc frames, the X Check panel, the
bios and the dispatch block were set in Newsreader, which is the body
face. The site's convention is Instrument Serif and it wins. */
.af h3,.disp-say h3,.xc-say h3,.biob h3{font-family:var(--disp)}
/* card and frame headings are one size, whatever the page */
.af h3,.tk h3,.diag h3{font-size:clamp(1.12rem,1.62vw,1.28rem)}
/* the Dispatch heading was the last one inheriting the body's warm black */
.disp-say h3{color:var(--forest)}
/* =====================================================================
X CHECK — third pass, 22 Sep
The bezel loses its four quarter Xs (the monikers already make the five
argument) and the graduations run up to the lettering. Xing takes the
paint. The answer roundel matches the one on the intro, and the copy
column leads with the moniker at headline size rather than an eyebrow.
===================================================================== */
/* Xing is a mark, not a word with an X in it */
.xw{font-style:normal;font-weight:700}
.xwx{height:1.06em;width:auto;display:inline-block;vertical-align:-.19em;
margin:0 -.02em 0 0}
.xq-out .xw,.xq-xing .xw{color:inherit}
/* the answer roundel is the same size as the one on the intro */
.xq-dev--res .xcdev .dv{font-size:clamp(200px,26vw,340px)}
.ansg .lb{font-size:.52em}
.ansd{font-size:.05em;margin-top:.75em;color:var(--gold)}
/* the glyph carries the weight, so the pair sits a touch high of true centre
and the descriptor hangs under it rather than balancing against it */
.ans{transform:translate(-50%,-50%) translateY(-.02em)}
/* the copy column leads with the moniker, at headline size */
.xq-mono{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);
margin:0 0 clamp(10px,1.2vw,16px)}
.xq-monog{display:flex;align-items:center;line-height:1}
.xq-monog .lb{font-size:clamp(2rem,3.4vw,2.9rem);color:var(--gold)}
.xq-monog .lb .bxi{background-color:var(--gold)}
.xq-monog .lb--mk .bmk{display:block;height:1em;width:1.654em;background-color:var(--gold);
-webkit-mask-image:url('img/pxo-mark-solid-forest.png');
mask-image:url('img/pxo-mark-solid-forest.png');
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center}
.xq-monod{font-family:var(--disp);font-weight:400;color:var(--gold);
font-size:clamp(1.35rem,2.4vw,1.95rem);line-height:1;letter-spacing:-.012em}
/* the answer title needs air, and has to clear the sticky header when the
result scrolls itself into view */
.xq-res{scroll-margin-top:clamp(84px,9vw,124px)}
.xq-ansttl{margin-top:clamp(10px,1.6vw,22px)}
.xq{padding-top:clamp(56px,7vw,104px)}
/* the moniker in the copy column sits outside .xcdev, so it needs the
lockup rules in its own right rather than inheriting the device's */
.xq-monog .lb{display:inline-flex;align-items:center;gap:.02em;line-height:1;
white-space:nowrap;font-family:var(--serif)}
.xq-monog .lb .bxi{display:block;height:1em;width:1.181em;flex:0 0 auto;
background-color:var(--gold);
-webkit-mask-image:url('img/pxo-x-real.png');mask-image:url('img/pxo-x-real.png');
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center}
.xq-monog .lb .pre,.xq-monog .lb .suf{font-family:var(--serif);font-size:.855em;
line-height:1;font-weight:400;letter-spacing:-.02em;color:var(--gold)}
.xq-monog .lb .pre{margin-right:-.2em}
.xq-monog .lb .suf{margin-left:-.17em}
.xq-monog .lb .pre--lc,.xq-monog .lb .suf--lc{font-size:.75em;align-self:flex-end;
padding-bottom:.1em}
.xq-monog .lb .pre--lc{margin-right:-.19em}
.xq-monog .lb .suf--lc{margin-left:-.16em}
/* the descriptor hangs closer under the glyph in the roundel */
.ansd{margin-top:.5em}
/* the door's promise reads on two clean lines rather than orphaning a middot */
.ecx{max-width:25rem}
.ecx-w small{letter-spacing:.13em;line-height:1.5;text-wrap:balance}
/* ------------------------------------------------------------------
22 Sep — the page lockup
Inner pages open with a reduced version of the home lockup: the full
logo, the gold rule, the standing line. No pitch, no beats — those
belong to the home hero only. Sized just under the home mark so the
two read as the same family without competing.
------------------------------------------------------------------ */
.pglock{display:flex;align-items:stretch;gap:clamp(15px,2vw,24px);
margin:0 0 clamp(36px,5vw,56px)}
.pglock-mk{height:clamp(70px,8.6vw,108px);width:auto;flex:0 0 auto;
align-self:center;display:block}
.pglock-bar{width:3px;background:var(--gold-leaf);border-radius:2px;
flex:0 0 auto;margin:6px 0}
.pglock-w{display:flex;flex-direction:column;justify-content:center;min-width:0}
/* the hero gives back what the lockup takes, so the band holds its depth */
.bleed--tall.has-pglock{padding-top:clamp(52px,6.4vw,96px)}
@media(max-width:760px){
.pglock{gap:13px;margin-bottom:24px}
.pglock-mk{height:62px}
}
/* ------------------------------------------------------------------
22 Sep — one gold in the descriptor
The second line was set at 82% opacity, which on a dark ground reads
as a second, duller gold sitting under the first. Same hex, different
colour to the eye. Both lines now carry the leaf at full strength,
track identically, and take a little more weight so the block holds
its own against the mark beside it. Home and page lockups together.
------------------------------------------------------------------ */
.lockup--hero .de,.pglock .de{
font-family:var(--sans);font-weight:600;color:var(--gold-leaf);
font-size:clamp(.72rem,1.28vw,1.02rem);letter-spacing:.22em;line-height:1.42;
text-transform:uppercase;white-space:nowrap;max-width:none}
.lockup--hero .de em,.pglock .de em{
font-style:normal;opacity:1;letter-spacing:.22em;color:var(--gold-leaf);
display:block;margin-top:.4em}
@media(max-width:760px){
.lockup--hero .de,.pglock .de{white-space:normal;max-width:16ch}
}
@media(max-width:640px){
.lockup--hero .de,.pglock .de{letter-spacing:.12em;font-size:.68rem;line-height:1.5;
max-width:none;white-space:normal}
.lockup--hero .de em,.pglock .de em{letter-spacing:.12em}
}
/* ------------------------------------------------------------------
22 Sep — the home X Check panel, brought level with the tool
The panel was still carrying the first draft's words while the tool
page had moved on. Same copy now, same order, same painted bullets.
Two things do NOT carry over: the highlight and the bullet colour.
On the dark page the lit words go gold; on this gold panel gold is
nothing, so the lit words go darker and denser instead — the rule we
settled for the roundel, applied to type.
------------------------------------------------------------------ */
.xcheck{grid-template-columns:1fr minmax(240px,32%)}
.xc-say h3 .u{color:var(--forest-deep);font-weight:600}
.xc-hx{height:1.04em;width:auto;display:inline-block;vertical-align:-.19em;
margin:0 -.07em 0 -.05em;
filter:brightness(0) saturate(100%) invert(9%) sepia(22%) saturate(1500%)
hue-rotate(124deg) brightness(94%) contrast(96%)}
.xc-lead{font-family:var(--serif);color:var(--forest);
font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.4;
margin:clamp(13px,1.6vw,20px) 0 0;max-width:44ch}
.xc-lead .u{color:var(--forest-deep);font-weight:700}
.xc-only{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--forest);opacity:.62;margin:.7rem 0 0}
/* the painted X replaces the dash, at reading size rather than bullet size */
.xc-out--x li{padding-left:2.1rem}
.xc-out--x li::before{display:none}
.xc-bx{position:absolute;left:0;top:.1em;height:1.12em;width:auto;display:block;
filter:brightness(0) saturate(100%) invert(14%) sepia(18%) saturate(1400%)
hue-rotate(110deg)}
.xcheck .xw{font-style:italic;font-weight:700;color:var(--forest-deep)}
.xcheck .xw .xwx{height:.92em;width:auto;vertical-align:-.1em;margin:0 -.06em;
filter:brightness(0) saturate(100%) invert(9%) sepia(22%) saturate(1500%)
hue-rotate(124deg)}
.xc-note b{opacity:1;font-weight:700}
/* the device column: roundel, then the standing invitation under it */
.xc-dev{display:grid;place-items:center;align-content:center}
.xc-take{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--forest);margin:clamp(14px,1.8vw,22px) 0 0;
text-align:center;display:flex;align-items:center;justify-content:center;gap:.4em;
animation:xqpulse 3.2s ease-in-out infinite}
.xc-takex{height:1.35em;width:auto;display:inline-block;
filter:brightness(0) saturate(100%) invert(14%) sepia(18%) saturate(1400%)
hue-rotate(110deg)}
.xc-dev:hover .xc-take{animation:none;opacity:1;color:var(--forest-deep)}
@media(prefers-reduced-motion:reduce){.xc-take{animation:none;opacity:1}}
@media(max-width:820px){
.xcheck{grid-template-columns:1fr}
.xc-dev{margin-top:6px}
}
/* .band-deep clears the filter so the X stays gold on the dark ground. The
gold panel is a light island inside that dark band, so it has to claw the
forest filter back — gold on gold is nothing. */
.band-deep .xcheck .xc-x,.band-deep .xcheck .xc-bx,.band-deep .xcheck .xc-takex{
filter:brightness(0) saturate(100%) invert(14%) sepia(18%) saturate(1400%)
hue-rotate(110deg)}
.band-deep .xcheck .xc-hx,.band-deep .xcheck .xw .xwx{
filter:brightness(0) saturate(100%) invert(9%) sepia(22%) saturate(1500%)
hue-rotate(124deg)}
.band-deep .xcheck .xc-x{height:1.06em;vertical-align:-.18em;margin:0 .06em}
/* ------------------------------------------------------------------
22 Sep — treatment C on every page hero
The first eyebrow on each page was repeating that page's own nav
label, four of them word for word, and the lockup now sits in that
slot as well. So the eyebrow goes and the home page's two-tier
opening takes over everywhere: subject in bone as the H1, argument
in gold underneath. Body-section eyebrows are untouched — those
label something new rather than repeating the address bar.
------------------------------------------------------------------ */
.hero--air .resolve,.phero .resolve,.bh-in .resolve{
font-family:var(--disp);font-weight:400;color:var(--gold-leaf);
font-size:clamp(1.42rem,2.9vw,2.28rem);line-height:1.08;letter-spacing:-.01em;
margin:.5rem 0 0;max-width:46ch}
.phero .lead,.bh-in .bh-lede{margin-top:1.25rem}
/* the painted X, at headline and at gold-line size */
.resolve .rsx{display:inline-block;height:.9em;width:auto;vertical-align:-.16em;
margin:0 -.06em}
h1 .h1x{display:inline-block;height:.86em;width:auto;vertical-align:-.13em;
margin:0 -.05em}
/* the hero gives back what the lockup takes, so no band gets deeper */
.phero.has-pglock{padding-top:clamp(34px,4.4vw,58px)}
@media(max-width:760px){
.hero--air .resolve,.phero .resolve,.bh-in .resolve{max-width:none}
}
/* The cover grid was inheriting .bh-in's 46ch cap. With a two-word headline
nobody noticed; with a real sentence the text column collapses to one word
a line and the band grows to 1155px. The cover takes a column, so the block
needs the width of two. */
.bh-in--cover{max-width:min(760px,100%)}
.bh-in--cover .resolve{max-width:none}
/* an X sitting inside a line of body prose */
.xin{display:inline-block;height:.92em;width:auto;vertical-align:-.13em;margin:0 -.04em}
/* ------------------------------------------------------------------
22 Sep — the art comes back, and the pills stop going black
Two faults on the same page. The section X was being knocked to 8.5%
opacity on every light band, which on bone is a ghost of a ghost, so
the page below the hero had no picture in it at all. And .pillpair
was filling the CTA with forest and only going gold on hover, which
is a black button by any other name. Gold is the button. Forest is
the hover.
------------------------------------------------------------------ */
.pillpair .pp .cta{background:var(--gold);color:var(--forest)}
.pillpair .pp .cta:hover{background:var(--forest);color:var(--bone)}
/* the oversize painted X, gold, on a light band. It is the picture on
the page, so it is allowed to be seen. */
section:not(.band-forest):not(.band-deep):not(.hero) .sec-x--gold{opacity:.3}
.sec-x--gold{height:min(190%,1120px);opacity:.34}
/* bottom right, bleeding off the corner, clear of the text column */
.sec-x--br{bottom:-34%;right:-14%;left:auto;top:auto}
@media(max-width:820px){
.sec-x--gold,section:not(.band-forest):not(.band-deep):not(.hero) .sec-x--gold{
height:min(112%,620px);opacity:.2}
.sec-x--br{bottom:-12%;right:-42%}
}
/* ------------------------------------------------------------------
22 Sep — the portfolio equation, proprietised
The copy says the multiplication sign is not decoration, it is the
business model. It was set in the typeface's own times glyph, which
is exactly the decoration it claims not to be. Every multiplication
sign in this section is now the painted mark, so the equation reads
as ours and nobody else's. The two diagrams go with it: four inert
strokes against a gold lattice with a mark at all sixteen crossings.
------------------------------------------------------------------ */
.eqn{padding:clamp(18px,2.1vw,26px) clamp(18px,2.1vw,26px);border-left-width:4px}
.eqn i{padding:0 .16em;display:inline-block}
.eqx{display:inline-block;height:1.02em;width:auto;vertical-align:-.2em;margin:0 -.02em}
.eqx-i{font-style:normal;padding:0 .1em;display:inline-block}
.eqx--sm{height:.94em;vertical-align:-.17em}
.pxoeq{white-space:nowrap}
/* the repainted plates carry their own weight, so they run larger */
.mathfig img{max-width:300px}
.mathfig{max-width:840px}
/* the equation plate: full width, the centrepiece of the section rather
than a note in a column. The terms never break away from their signs. */
.eq-in{max-width:56ch;margin-top:1rem}
.eqplate{margin:clamp(24px,3vw,38px) 0 clamp(26px,3.2vw,42px)}
.eqsec .eqn{
display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
gap:0 .1em;max-width:none;margin:0;
font-size:clamp(1.12rem,2.05vw,1.62rem);line-height:1.9;
background:var(--bone);border-left:5px solid var(--gold);
padding:clamp(22px,2.6vw,34px) clamp(22px,2.6vw,36px)}
.eqsec .eqn .eqt{white-space:nowrap}
.eqsec .eqn i{padding:0 .3em;display:inline-flex;align-items:center}
.eqsec .eqn .eqx{height:1.18em;vertical-align:baseline;margin:0}
.eqsec .eqn .eqs{color:var(--gold-ink);padding:0 .42em;font-weight:400}
.eqsec .eqn b{white-space:nowrap;color:var(--forest)}
/* the bullets take the mark too — a grey times sign was the whole problem */
.conf--x li{padding-left:2.1rem}
.conf--x li::before{
content:"";position:absolute;left:0;top:.2em;width:1.05em;height:1.05em;
background:none;border:0;
-webkit-mask-image:url('img/pxo-x-real.png');mask-image:url('img/pxo-x-real.png');
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
background-color:var(--gold-ink)}
/* the oversize X in this band comes in from the top left, behind the plate */
.sec-x--tl{top:-22%;left:-16%;right:auto;bottom:auto}
@media(max-width:820px){
.sec-x--tl{top:-6%;left:-38%}
.eqsec .eqn{line-height:2.1}
}
/* .mathfig img was grabbing the inline mark in the caption and blowing it
up to plate size. Only the two plates are plates. */
.mathfig .mf > img{width:100%;max-width:300px;height:auto;display:block}
.mathfig .mfl img,.mathfig .mfl .xin{width:auto;max-width:none;display:inline-block;
height:.92em;vertical-align:-.13em}
/* the equation resolves on its own line, which is what an equation does */
.eqsec .eqn .eqres{flex:0 0 100%;display:flex;align-items:center;margin-top:.15em}
.eqsec .eqn .eqres .eqs{padding:0 .42em 0 0}
/* the oversize mark sits clear of the opening lines */
.eqsec .sec-x--tl{top:-34%;left:-24%}
/* ------------------------------------------------------------------
22 Sep — one third tier across every hero
The audit found three treatments for the same job: .say on home at
18px/#E7E2D6 with a bold opening; .lead at 22px on four pages; and
.bh-lede at 19px in a dimmer bone on three more. Three sizes, two
bones, and the bold opening only on home. One treatment now, taken
from home: the opening block carries the weight and the full bone,
everything after it settles back.
------------------------------------------------------------------ */
.phero .lead,.bh-in .bh-lede,.hero--air .say{
font-family:var(--serif);font-weight:400;color:var(--bone-dim);
font-size:clamp(1.04rem,1.34vw,1.19rem);line-height:1.62;margin-top:1.2rem}
/* the opening block is the claim, so it takes the weight and the light */
.phero .lead.hl,.bh-in .bh-lede.hl,.hero--air .say b{
font-weight:600;color:var(--bone)}
.phero .lead + .lead,.bh-in .bh-lede + .bh-lede{margin-top:.85rem}
/* the offer terms stay gold: they are the price, not the pitch */
.bh-kick{color:var(--gold-leaf)}
/* ------------------------------------------------------------------
22 Sep — the two equations
The argument is a comparison, so the art has to be one. Addition is
set small, grey and flat, the way a pile looks. Multiplication is set
on forest at display size with the painted mark as the operator, the
way a business model looks. The contrast in scale and ground carries
the whole point before a word of the prose is read.
------------------------------------------------------------------ */
.eqcmp{margin:clamp(22px,2.8vw,34px) 0 clamp(26px,3.2vw,40px);max-width:920px}
/* --- addition: corporate math, inert --- */
.eqcmp-lab{font-family:var(--sans);font-size:.64rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--forest);opacity:.5;margin:0 0 .55rem}
.eqadd{font-family:var(--serif);font-weight:400;color:#8C8F86;
font-size:clamp(.98rem,1.3vw,1.14rem);line-height:1.5;margin:0;letter-spacing:.01em}
.eqadd s{text-decoration:none;color:#A9ACA2;padding:0 .3em}
.eqadd em{font-style:normal;color:#A9ACA2;padding:0 .3em}
.eqadd b{font-weight:400;color:#8C8F86}
/* --- the turn --- */
.eqcmp-turn{font-family:var(--disp);color:var(--forest);
font-size:clamp(1.12rem,1.7vw,1.38rem);line-height:1.2;
margin:clamp(18px,2.2vw,26px) 0 clamp(14px,1.7vw,20px)}
/* --- multiplication: the PXO Equation, on its own ground --- */
.eqcmp-mul{position:relative;overflow:hidden;border-radius:6px;
background:var(--forest);color:var(--bone);
padding:clamp(26px,3.2vw,44px) clamp(24px,3vw,42px);
box-shadow:0 14px 38px rgba(0,0,0,.2)}
.eqmul-gx{position:absolute;right:-7%;top:50%;transform:translateY(-50%);
height:230%;width:auto;opacity:.09;pointer-events:none}
.eqcmp-mul > *{position:relative;z-index:2}
.eqcmp-lab--lit{color:var(--gold-leaf);opacity:1;display:flex;align-items:center;gap:.5em;
margin-bottom:clamp(14px,1.7vw,20px)}
.eqcmp-lab--lit .pxo{height:1.5em}
.eqcmp-lab--lit .pxo img{height:1.5em;width:auto;display:block}
.eqmul{display:flex;flex-wrap:wrap;align-items:center;gap:0 .06em;margin:0;
font-family:var(--disp);font-weight:400;color:var(--bone);
font-size:clamp(1.32rem,2.85vw,2.32rem);line-height:1.5;letter-spacing:-.005em}
.eqmul .eqt{white-space:nowrap}
.eqmul i{padding:0 .26em;display:inline-flex;align-items:center}
.eqmul .eqx{height:.82em;width:auto;display:block;margin:0}
.eqmul .eqres{flex:0 0 100%;display:flex;align-items:center;margin-top:.3em}
.eqmul .eqres em{font-style:normal;color:var(--gold-leaf);padding:0 .42em 0 0}
.eqmul .eqres b{font-weight:400;color:var(--gold-leaf);white-space:nowrap}
@media(max-width:700px){
.eqmul{font-size:1.24rem;line-height:1.75}
.eqmul-gx{right:-30%;height:150%}
}
/* the ghost was a direct child, so the stacking rule pulled it into flow
and the panel grew to 230% of the artwork. Only the type gets lifted. */
.eqcmp-mul > .eqcmp-lab,.eqcmp-mul > .eqmul{position:relative;z-index:2}
.eqcmp-mul > .eqmul-gx{position:absolute;z-index:1}
/* an operator never starts a line: it travels with the term it multiplies */
.eqmul .eqg{display:inline-flex;align-items:center;white-space:nowrap}
.eqmul{font-size:clamp(1.3rem,2.6vw,2.1rem)}
.eqlabx{height:1.15em;width:auto;display:inline-block;vertical-align:-.24em;margin:0 -.04em}
.eqcmp-lab--lit .pxo--lab{display:inline-block;height:1.35em;vertical-align:-.3em;margin:0 .1em}
.eqcmp-lab--lit .pxo--lab img{height:1.35em;width:auto;display:block}
.eqcmp-lab--lit .pxo--lab .l{display:none}
/* ------------------------------------------------------------------
22 Sep — one plate, two equations, one of them cancelled
The comparison only lands if both are in front of you at once and
the wrong one is visibly struck out. Corporate math is set first,
in stone, with a painted line drawn through it. Portfolio math sits
under it at display size with the mark as the operator. Same plate,
same ground, so the eye compares rather than scrolls.
------------------------------------------------------------------ */
.eqcmp{position:relative;overflow:hidden;border-radius:6px;max-width:940px;
background:var(--forest);color:var(--bone);
padding:clamp(26px,3.2vw,44px) clamp(24px,3vw,42px);
box-shadow:0 14px 38px rgba(0,0,0,.2);
margin:clamp(22px,2.8vw,34px) 0 clamp(26px,3.2vw,40px)}
.eqcmp-gx{position:absolute;z-index:1;right:-8%;top:50%;transform:translateY(-50%);
height:210%;width:auto;opacity:.085;pointer-events:none}
.eqrow{position:relative;z-index:2}
.eqrow--in{margin-top:clamp(24px,3vw,38px);
padding-top:clamp(22px,2.6vw,32px);border-top:1px solid rgba(244,241,234,.14)}
.eqcmp-lab{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--sage-light);opacity:.62;margin:0 0 .7rem}
.eqcmp-lab--lit{color:var(--gold-leaf);opacity:1;display:flex;align-items:center;
flex-wrap:wrap;gap:.7em;margin-bottom:clamp(12px,1.5vw,18px)}
.eqcmp-tag{display:inline-flex;align-items:center;gap:.4em;opacity:.7}
.eqcmp-tag .pxo--lab{display:inline-block;height:1.25em}
.eqcmp-tag .pxo--lab img{height:1.25em;width:auto;display:block}
.eqcmp-tag .pxo--lab .l{display:none}
.eqline{display:flex;flex-wrap:wrap;align-items:center;gap:0 .06em;margin:0;
font-family:var(--disp);font-weight:400;line-height:1.45;letter-spacing:-.005em}
.eqline .eqt{white-space:nowrap}
.eqline .eqg{display:inline-flex;align-items:center;white-space:nowrap}
.eqline i{padding:0 .26em;display:inline-flex;align-items:center;font-style:normal}
.eqline .eqres{display:inline-flex;align-items:center}
.eqline .eqres em{font-style:normal;padding:0 .38em}
/* corporate math: small, grey, and struck through */
.eqline--out{position:relative;display:inline-flex;color:#7E8A82;
font-size:clamp(.98rem,1.45vw,1.22rem)}
.eqline--out i.op{color:#66736B;padding:0 .3em}
.eqline--out .eqres em,.eqline--out .eqres b{color:#7E8A82;font-weight:400}
.eqcancel{position:absolute;left:-.4%;right:-.4%;top:52%;height:3px;border-radius:2px;
background:var(--gold);opacity:.9;transform:rotate(-1.1deg);transform-origin:left center;
box-shadow:0 0 0 .5px rgba(227,183,51,.35)}
/* portfolio math: the equation, at size */
.eqline--in{color:var(--bone);font-size:clamp(1.3rem,2.6vw,2.1rem)}
.eqline--in .eqx{height:.82em;width:auto;display:block;margin:0}
.eqline--in .eqres{flex:0 0 100%;margin-top:.28em}
.eqline--in .eqres em,.eqline--in .eqres b{color:var(--gold-leaf);font-weight:400}
.eqline--in .eqres b{white-space:nowrap}
.eqline--in .eqres em{padding:0 .4em 0 0}
@media(max-width:700px){
.eqline--in{font-size:1.2rem;line-height:1.7}
.eqline--out{font-size:.95rem}
.eqcmp-gx{right:-32%;height:140%}
}
/* ---- the merged section reads as one argument, not two stapled together ---- */
.subsec{margin-top:clamp(34px,4.4vw,56px);position:relative}
.subsec::before{content:"";display:block;width:52px;height:2px;
background:var(--gold);opacity:.55;margin:0 0 clamp(18px,2.2vw,26px)}
.subh{font-family:var(--disp);font-weight:400;color:var(--forest);
font-size:clamp(1.42rem,2.5vw,2.05rem);line-height:1.12;letter-spacing:-.01em;
margin:0 0 .9rem}
.pillpair--end{margin-top:clamp(30px,3.8vw,46px)}
.pp-x{height:1.05em;width:auto;vertical-align:-.16em;display:inline-block;margin:0 -.03em;
filter:brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(420%) hue-rotate(96deg)}
/* ------------------------------------------------------------------
22 Sep — one slogan
The audit found .kick running four ways: 22px gold on home and about,
31px gold on census, 31px forest on your-x, all in Newsreader at 700,
while .thepoint said the same kind of thing at the same 31px in
Instrument Serif at 400. Two sizes, two faces, no rule.
One treatment now. The display face, because a slogan is a display
line and Newsreader is the body face. One size, pitched clearly
between the H2 and the body so it is never mistaken for either. And
the colour is decided by the ground it sits on, not by the page:
forest on light, gold on dark. That part was already right; it is
simply written down now.
------------------------------------------------------------------ */
.kick,.thepoint{
font-family:var(--disp);font-weight:400;letter-spacing:-.008em;
font-size:clamp(1.34rem,2.2vw,1.82rem);line-height:1.22;color:var(--forest)}
.kick--sm,.tp-say{font-size:clamp(1.12rem,1.62vw,1.32rem)}
.band-forest .kick,.band-deep .kick,.phero .kick,.hero .kick,
.bleed--forest .kick,.bleed--deep .kick,.endcta .kick{color:var(--gold-leaf)}
/* two local overrides predated the system and were holding .kick at 22px on
home and about while every other page ran it at 29. Size is the system's
to set; these keep only their spacing. */
.worth .kick,.phero-more .kick{
font-size:clamp(1.34rem,2.2vw,1.82rem);line-height:1.22}
/* the band is taller now the two arguments are one, so the oversize mark has
to sit further out to stay off the text column */
#defined .sec-x--br{bottom:-18%;right:-26%;height:min(120%,900px)}
@media(max-width:820px){#defined .sec-x--br{bottom:-8%;right:-46%;height:min(70%,480px)}}
/* ------------------------------------------------------------------
22 Sep — the equation spells its own name
Zed, over lunch: the initials of the terms are P, P, X, X, O, O.
So the art is not a picture of the equation, it is the equation
noticing itself. The initials are picked out in the line, then
lifted underneath and resolved into the mark. Algebraic, and it
needs no illustration at all.
Two terms moved to make it true: Network became Exchange, which is
what a network is once value changes hands, and Businesses became
Ownership, which is what a portfolio professional actually holds.
------------------------------------------------------------------ */
.eqline--in .ini{font-weight:400;color:var(--gold-leaf)}
.eqinit{display:flex;flex-wrap:wrap;align-items:center;gap:.34em;
margin:clamp(20px,2.4vw,30px) 0 0;
padding-top:clamp(16px,2vw,24px);border-top:1px solid rgba(244,241,234,.14)}
.eqi{font-family:var(--disp);font-weight:400;color:var(--bone);
font-size:clamp(1.12rem,1.9vw,1.55rem);line-height:1;
width:1.5em;height:1.5em;display:inline-flex;align-items:center;justify-content:center;
border:1px solid rgba(244,241,234,.28);border-radius:3px}
.eqi--x{color:var(--gold-leaf);border-color:rgba(227,183,51,.5)}
.eqi-eq{font-family:var(--disp);color:var(--sage-light);opacity:.7;
font-size:clamp(1.12rem,1.9vw,1.55rem);padding:0 .3em}
.pxo--eq{display:inline-block;height:1.9em}
.pxo--eq img{height:1.9em;width:auto;display:block}
.pxo--eq .l{display:none}
@media(max-width:700px){
.eqinit{gap:.26em}
.eqi,.eqi-eq{font-size:1rem}
.pxo--eq,.pxo--eq img{height:1.5em}
}
/* the plate is a forest island inside a bone band, so the band's own rule was
showing the forest mark on forest. Force the light one. */
.eqinit .pxo--eq .d{display:block!important}
.eqinit .pxo--eq .l{display:none!important}
/* ==================================================================
22 Sep — chalk and paint
Zed: the corporate equation belongs on somebody else's blackboard,
the portfolio one belongs to you. So the contrast is not old versus
digital, which dates in a year and belongs to everyone. It is
CHALKED versus PAINTED, which is the Manifesto's own line: a career
you paint, not climb. Erasable versus permanent. Taught versus made.
No wooden frames, no screen chrome. The roughness is an SVG
turbulence displacement on real type, so it reads as a hand rather
than a texture pasted on.
================================================================== */
.fxdefs{position:absolute;width:0;height:0;overflow:hidden}
.eqpair{margin:clamp(24px,3vw,38px) 0 clamp(26px,3.2vw,42px);
display:grid;gap:clamp(18px,2.2vw,28px);max-width:960px}
/* ---------- the board ---------- */
.board{margin:0;position:relative;border-radius:5px;overflow:hidden;
background:#232825;
padding:clamp(22px,2.7vw,34px) clamp(22px,2.7vw,36px) clamp(18px,2.2vw,26px);
box-shadow:inset 0 0 90px rgba(0,0,0,.55),0 8px 22px rgba(0,0,0,.14)}
/* old chalk never quite comes off */
.board::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
background:
radial-gradient(60% 40% at 18% 22%,rgba(232,228,216,.055),transparent 70%),
radial-gradient(48% 34% at 74% 68%,rgba(232,228,216,.045),transparent 72%),
radial-gradient(40% 26% at 42% 88%,rgba(232,228,216,.035),transparent 74%)}
.board > *{position:relative;z-index:2}
.board-lab{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:#CFCBBD;opacity:.5;margin:0 0 clamp(14px,1.7vw,20px)}
.chalk{position:relative}
.chalk-l{font-family:var(--disp);font-weight:400;color:#E3DFD2;opacity:.9;
font-size:clamp(1.06rem,1.85vw,1.5rem);line-height:1.6;margin:0;letter-spacing:.012em;
filter:url(#chalkedge)}
.chalk-l--sum{opacity:.62;font-size:clamp(.96rem,1.55vw,1.24rem);margin-top:.25em}
.chalk-strike{position:absolute;left:-1%;right:-1%;top:0;width:102%;height:100%;
filter:url(#chalkline);pointer-events:none}
.chalk-strike path{fill:none;stroke:#EFEBDE;stroke-width:3.2;stroke-linecap:round;opacity:.72}
.board-note{font-family:var(--serif);font-style:italic;color:#CFCBBD;opacity:.48;
font-size:clamp(.88rem,1.15vw,.98rem);margin:clamp(14px,1.8vw,22px) 0 0}
/* ---------- the canvas ---------- */
.canvas{margin:0;position:relative;overflow:hidden;border-radius:5px;
background:var(--forest);color:var(--bone);
padding:clamp(26px,3.2vw,44px) clamp(24px,3vw,42px) clamp(20px,2.5vw,30px);
box-shadow:0 14px 38px rgba(0,0,0,.2)}
.canvas-gx{position:absolute;z-index:1;right:-9%;top:50%;transform:translateY(-50%);
height:215%;width:auto;opacity:.085;pointer-events:none}
.canvas > *{position:relative;z-index:2}
.canvas-lab{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold-leaf);margin:0 0 clamp(13px,1.6vw,19px)}
.canvas-note{font-family:var(--serif);font-style:italic;color:var(--sage-light);opacity:.72;
font-size:clamp(.88rem,1.15vw,.98rem);margin:clamp(16px,2vw,24px) 0 0}
/* the proof line: the same six, as letters, resolving into the mark squared */
.eqproof{display:flex;flex-wrap:wrap;align-items:center;gap:0 .06em;
margin:clamp(18px,2.2vw,26px) 0 0;
padding-top:clamp(15px,1.9vw,22px);border-top:1px solid rgba(244,241,234,.14);
font-family:var(--disp);font-weight:400;color:var(--bone);
font-size:clamp(1.18rem,2.1vw,1.68rem);line-height:1.4}
.eqproof .pt{display:inline-block;min-width:.7em;text-align:center}
.eqproof .pt--x{color:var(--gold-leaf)}
.eqproof .eqg{display:inline-flex;align-items:center}
.eqproof i{padding:0 .26em;display:inline-flex;align-items:center;font-style:normal}
.eqproof .eqx{height:.78em;width:auto;display:block;margin:0}
.eqproof .eqres{display:inline-flex;align-items:center;margin-left:.1em}
.eqproof .eqres em{font-style:normal;color:var(--gold-leaf);padding:0 .42em}
.eqproof .sq{font-weight:400;color:var(--gold-leaf);display:inline-flex;align-items:center}
.eqproof .sq sup{font-size:.56em;vertical-align:super;line-height:1;margin-left:.04em}
.eqproof .pxo--eq{display:inline-block;height:1.06em;margin:0 .04em}
.eqproof .pxo--eq img{height:1.06em;width:auto;display:block}
.eqproof .pxo--eq .d{display:block!important}
.eqproof .pxo--eq .l{display:none!important}
.eq-kick{margin:.55rem 0 0}
@media(max-width:700px){
.chalk-l{font-size:1.02rem;line-height:1.75}
.eqproof{font-size:1.1rem}
.canvas-gx{right:-34%;height:140%}
}
/* the strike belongs to the line, not to the board */
.chalk-l{display:block}
.chalk-l .ck{position:relative;display:inline-block}
.chalk-strike{position:absolute;left:-1.5%;top:0;width:103%;height:100%;
filter:url(#chalkline);pointer-events:none;overflow:visible}
.chalk-strike--b path{stroke-width:2.6;opacity:.6}
/* and the ghost is absolute — .canvas > * was dragging it into flow, the same
fault the earlier plate had under a different class name */
.canvas > .canvas-gx{position:absolute;z-index:1}
/* one strike, and it stays readable underneath — cancelled, not obliterated */
.chalk-strike path{stroke-width:2.8;opacity:.6}
.chalk-l--sum{opacity:.72}
/* the result reads (P✗O) squared, so the mark carries the line and the two lifts */
.eqproof .sq{font-size:1.08em}
.eqproof .pxo--eq{height:1.24em;margin:0 .06em}
.eqproof .pxo--eq img{height:1.24em}
.eqproof .sq sup{font-size:.52em;line-height:1;align-self:flex-start;
margin:.12em 0 0 .06em;color:var(--gold-leaf)}
/* ------------------------------------------------------------------
22 Sep — the hero pill
Zed: a separate pill in the hero where the content demands one, and
it carries the roundel. On the Census that demand is obvious — you
have just been asked what you call yourself, and the next honest
question is which stage you are at. The standing panel at the foot
still does the general job; this catches the reader at the moment
the question occurs to them.
------------------------------------------------------------------ */
.hpill{display:inline-flex;align-items:center;gap:clamp(13px,1.5vw,18px);
margin-top:clamp(24px,3vw,36px);text-decoration:none;
padding:clamp(10px,1.2vw,14px) clamp(18px,1.9vw,24px) clamp(10px,1.2vw,14px)
clamp(12px,1.3vw,15px);
border:1px solid rgba(227,183,51,.34);border-radius:999px;
background:rgba(244,241,234,.035);
transition:border-color .18s ease,background .18s ease,transform .18s ease}
.hpill:hover{border-color:rgba(227,183,51,.7);background:rgba(244,241,234,.07);
transform:translateY(-1px)}
.xcdev--pill{flex:0 0 auto;display:block;line-height:0}
.xcdev--pill .dv{font-size:clamp(62px,6.2vw,78px)}
.xcdev--pill .cue,.xcdev--pill .rl,.xcdev--pill .lg,.xcdev--pill .lgx{display:none}
.hpill-w{display:flex;flex-direction:column;gap:.24em;min-width:0}
.hpill-w b{font-family:var(--sans);font-weight:600;color:var(--bone);
font-size:clamp(.82rem,1.02vw,.92rem);letter-spacing:.005em;line-height:1.3}
.hpill-w small{font-family:var(--sans);font-weight:500;color:var(--gold-leaf);
font-size:clamp(.66rem,.8vw,.73rem);letter-spacing:.11em;text-transform:uppercase;
line-height:1.45;display:flex;align-items:center;flex-wrap:wrap;gap:.1em}
.hpill-x{height:1.25em;width:auto;display:inline-block;margin:0 .04em}
@media(max-width:560px){
.hpill{gap:11px;padding:10px 16px 10px 11px}
.hpill-w small{letter-spacing:.07em}
}
/* the pill sits on a busy hero, so it needs its own ground and one clean line */
.hpill{background:rgba(19,39,32,.62);border-color:rgba(227,183,51,.42);
backdrop-filter:blur(2px)}
.hpill:hover{background:rgba(19,39,32,.78)}
.hpill-w b,.hpill-w small{white-space:nowrap}
.hpill-w small .hpill-x{height:1.3em}
@media(max-width:640px){
.hpill{align-items:flex-start}
.hpill-w b,.hpill-w small{white-space:normal}
}
/* small was a flex container, so nowrap never applied and the text nodes
broke around the mark. Plain block, mark inline. */
.hpill-w small{display:block;white-space:nowrap}
.hpill-w small .hpill-x{display:inline-block;vertical-align:-.26em;margin:0 .06em}
/* the five stages are named here but chosen in the tool, so the section
hands the reader across rather than leaving the promise open */
.xlink{color:var(--gold-leaf);text-decoration:none;
border-bottom:1px solid rgba(227,183,51,.45);padding-bottom:.06em;
white-space:nowrap;transition:border-color .18s ease}
.xlink:hover{border-bottom-color:var(--gold-leaf)}
.xlink .xin{height:1.02em;vertical-align:-.16em;margin:0 .02em}
/* ==================================================================
22 Sep — the slab
Zed: the art was floating. So the two equations stop being two boxes
and become one object, sitting on the painted ground the rest of the
site is made from. Corporate is chalked at the same size as the
portfolio line and struck through, so the comparison is like for
like. The brackets do the real work: six terms become three factors,
and three factors spell the name. No square needed and no licence
taken — a bracket IS a letter.
================================================================== */
.eqslab{position:relative;margin:clamp(24px,3vw,38px) 0 clamp(26px,3.2vw,42px);
max-width:980px;overflow:hidden;border-radius:6px;
background:var(--forest-deep) url('img/art-paint.jpg') center/cover no-repeat;
box-shadow:0 18px 46px rgba(0,0,0,.26)}
.eqslab::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(104deg,rgba(19,39,32,.955) 0%,rgba(19,39,32,.9) 52%,
rgba(19,39,32,.8) 100%)}
.eqslab-gx{position:absolute;z-index:2;right:-8%;top:50%;transform:translateY(-50%);
height:200%;width:auto;opacity:.1;pointer-events:none}
.eqslab-in{position:relative;z-index:3;
padding:clamp(28px,3.4vw,48px) clamp(26px,3.2vw,46px) clamp(24px,2.9vw,38px)}
.eqslab-lab{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:#CFCBBD;opacity:.5;margin:0 0 clamp(12px,1.5vw,17px)}
.eqslab-lab--lit{color:var(--gold-leaf);opacity:1;
margin-top:clamp(26px,3.2vw,40px);padding-top:clamp(22px,2.6vw,32px);
border-top:1px solid rgba(244,241,234,.16)}
/* corporate, at the same size as the equation, and struck */
.eqslab .chalk-l{font-family:var(--disp);font-weight:400;color:#DEDACD;opacity:.82;
font-size:clamp(1.24rem,2.4vw,1.96rem);line-height:1.4;margin:0;letter-spacing:.008em;
filter:url(#chalkedge)}
.eqslab .chalk-strike path{stroke-width:2.6;opacity:.62}
/* the equation, in three brackets */
.eqbr{display:flex;flex-wrap:wrap;align-items:center;gap:0 .04em;margin:0;
font-family:var(--disp);font-weight:400;color:var(--bone);
font-size:clamp(1.24rem,2.4vw,1.96rem);line-height:1.5;letter-spacing:-.004em}
.eqbr .brk{display:inline-flex;align-items:center;white-space:nowrap}
.eqbr .bk{color:var(--gold-leaf);opacity:.66;padding:0 .1em;font-size:1.14em;
transform:translateY(-.02em)}
.eqbr .eqt{white-space:nowrap}
.eqbr .ini{font-weight:400;color:var(--gold-leaf)}
.eqbr i{padding:0 .22em;display:inline-flex;align-items:center;font-style:normal}
.eqbr i.mid{padding:0 .3em}
.eqbr .eqx{height:.76em;width:auto;display:block;margin:0}
.eqbr--res{margin-top:.45em;align-items:center}
.eqbr--res .eqeq{color:var(--gold-leaf);padding:0 .42em 0 .12em}
.eqbr--res .pxo--eq{display:inline-block;height:1.5em}
.eqbr--res .pxo--eq img{height:1.5em;width:auto;display:block}
.eqbr--res .pxo--eq .d{display:block!important}
.eqbr--res .pxo--eq .l{display:none!important}
.eqslab-note{font-family:var(--serif);font-style:italic;color:var(--sage-light);opacity:.78;
font-size:clamp(.92rem,1.2vw,1.04rem);margin:clamp(18px,2.2vw,26px) 0 0}
/* the green and gold pairing holds on bone as well as on dark: the heading
stays forest, the slogan under it takes the ink gold that reads on light */
.band-bone2 .kick,.band-bone .kick,.strip .kick,
main > section:not([class]) .kick{color:var(--gold-ink)}
.eqsec .eq-kick{color:var(--gold-ink)}
@media(max-width:700px){
.eqslab .chalk-l,.eqbr{font-size:1.14rem;line-height:1.7}
.eqslab-gx{right:-34%;height:130%}
}
/* the divider under the corporate line must span the slab, not the label text */
.eqslab-lab{width:100%;max-width:none;display:block}
.eqslab .chalk-strike path{stroke-width:2.4;opacity:.56}
/* ==================================================================
22 Sep — the painted X gets a floor
Zed: the marks vanish in small type. The audit says why. Every X is
sized as a ratio of its font size, so a 11px caption gets an 11px
brushstroke and the painting is gone. Worse, two of them were set
BELOW 1em — the CTA panel's "Start solving for your X" at 0.78 and
"The X Check" at 0.80 — so the mark was smaller than the letters
beside it. A brush has taper: its visual mass sits in the middle,
so it has to run LARGER than cap height to read as equal weight.
Every mark now takes max(floor, ratio): a ratio for big type, an
absolute floor so small type never loses the hand.
================================================================== */
.ecx-h{height:max(30px,1.16em);vertical-align:-.2em;margin:0 -.02em}
.ecx-x{height:max(30px,1.7em);vertical-align:-.42em;margin:0 -.02em}
.pp-x{height:max(18px,1.45em);vertical-align:-.32em}
.hpill-x{height:max(19px,1.5em);vertical-align:-.34em}
.xc-takex,.xq-takex{height:max(20px,1.62em);vertical-align:-.36em}
.xin{height:max(21px,1.18em);vertical-align:-.21em}
.xwx{height:max(19px,1.14em);vertical-align:-.18em}
.xm{height:max(21px,1.12em);vertical-align:-.19em}
.xc-x{height:max(21px,1.2em);vertical-align:-.22em}
.tx{height:max(22px,1.04em)}
.rsx{height:max(26px,1.0em);vertical-align:-.19em}
.eqx-i .eqx{height:max(20px,1.15em);vertical-align:-.2em}
.eyebrow::before,.eyebrow .ebx{min-height:15px}
/* the older per-context rules are more specific, so the floor has to match
their reach. Same intent, applied where it actually lands. */
.ec-say h2 .ecx-h{height:max(30px,1.14em);vertical-align:-.19em;margin:0 -.02em}
.xcheck .xw .xwx{height:max(19px,1.14em);vertical-align:-.19em;margin:0 -.05em}
.xq .xc-x,.band-deep .xc-x{height:max(21px,1.22em);vertical-align:-.26em;margin:0 .05em}
.band-deep .xcheck .xc-x{height:max(21px,1.2em);vertical-align:-.24em;margin:0 .05em}
.hero--air .say2 .xm,.hero--air .sayl .xm{height:max(21px,1.1em);vertical-align:-.2em;
margin:0 -.08em}
.lockup--hero .lk .tl .tx{height:max(22px,1.04em);vertical-align:-.19em;
margin:0 -.13em 0 -.1em}
.xlink .xin{height:max(21px,1.18em);vertical-align:-.21em;margin:0 .02em}
.hpill-w small .hpill-x{height:max(19px,1.5em);vertical-align:-.34em}
/* ------------------------------------------------------------------
22 Sep — the reader's route, not the site map's
Zed, standing principle: put the call where the reader's question
arises, not only where the template keeps one. The footer panel
still exists; it is not an argument for making somebody scroll past
the moment they wanted to act. The five-stage section raises "which
one am I" and answers it on the spot.
------------------------------------------------------------------ */
.hpill--sec{margin-top:clamp(26px,3.2vw,40px)}
/* the oversize mark on a dark band keeps its own weight */
#stages .sec-x--gold{opacity:.26;height:min(150%,980px);bottom:-26%;right:-18%}
@media(max-width:820px){#stages .sec-x--gold{opacity:.16;height:min(78%,520px);right:-44%;bottom:-8%}}
/* ------------------------------------------------------------------
22 Sep — the roundel does the asking
Zed killed the banner pill, rightly: a bordered lozenge is generic
furniture and this site has an instrument. The five-stage section
raises "which one am I" and the device answers it, as the device
always has — it is the link, there is no separate button. It is also
the brand art the section was short of, so one object does both jobs.
------------------------------------------------------------------ */
.stg2{display:grid;grid-template-columns:1fr minmax(240px,32%);
gap:clamp(30px,4.4vw,72px);align-items:center}
.stg2-say{min-width:0}
.stg2-dev{display:grid;place-items:center;align-content:center}
.stg2-take{font-family:var(--disp);font-weight:400;color:var(--bone);
font-size:clamp(1.24rem,2.1vw,1.68rem);line-height:1.16;text-align:center;
margin:clamp(16px,2vw,24px) 0 0}
.stg2-take em{font-style:italic;color:var(--gold-leaf)}
.stg2-note{font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.15em;
text-transform:uppercase;color:var(--sage-light);opacity:.8;text-align:center;
margin:.7rem 0 0;line-height:1.5}
/* on a forest band the disc goes darker and denser than the ground, and the
ring carries the gold, so the instrument reads as an object rather than a
hole cut in the band */
.xcdev--dark{
--disc:var(--forest-deep); --paint:var(--gold); --ring:var(--gold-deep);
--mk:var(--bone); --bez:rgba(227,183,51,.5); --bezt:var(--gold-leaf);
--qk:var(--gold-deep); --lbl:#DCD7CB; --lblx:var(--gold-deep);
--cue:var(--gold-leaf);
}
.xcdev--dark .dv{font-size:clamp(190px,20vw,270px)}
@media(max-width:860px){
.stg2{grid-template-columns:1fr;gap:34px}
.stg2-dev{margin-top:6px}
.xcdev--dark .dv{font-size:min(230px,58vw)}
}
.stg2-note{max-width:22ch;margin-left:auto;margin-right:auto;text-wrap:balance}
/* the oversize mark frames the instrument rather than sitting under it */
#stages .sec-x--gold{opacity:.2;height:min(128%,860px);bottom:-30%;right:-24%}
@media(max-width:860px){#stages .sec-x--gold{opacity:.14;height:min(70%,460px);right:-48%;bottom:-6%}}
/* ------------------------------------------------------------------
22 Sep — the census, completed
The thanks page served four forms and could not tell them apart, so
it hedged: "if it was a message... if it was the census". Each form
now hands over what it was, and the census hands over the answer
itself, so the page can say a person's own words back to them. All
sessionStorage, no back end — the same handover the X Check report
already used on this page.
------------------------------------------------------------------ */
.cecho{margin:clamp(26px,3.2vw,40px) 0 0;padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,32px);
border-left:4px solid var(--gold);background:rgba(244,241,234,.045);border-radius:4px;
max-width:36rem}
.cecho-l{font-family:var(--sans);font-size:.64rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold-leaf);margin:0 0 .5rem}
.cecho-a{font-family:var(--disp);font-weight:400;color:var(--bone);
font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.1;margin:0;letter-spacing:-.012em}
.cecho-n{font-family:var(--serif);font-style:italic;color:var(--sage-light);opacity:.8;
font-size:clamp(.9rem,1.15vw,1rem);margin:.8rem 0 0}
.tknext{margin:clamp(32px,4vw,54px) 0 0;padding-top:clamp(26px,3.2vw,40px);
border-top:1px solid rgba(244,241,234,.16);
display:grid;grid-template-columns:minmax(150px,210px) 1fr;
gap:clamp(24px,3.2vw,48px);align-items:center;max-width:46rem}
.tknext-dev{display:block}
.tknext-dev .dv{font-size:clamp(130px,15vw,196px)}
.tknext-dev .cue{display:none}
.tknext-h{font-family:var(--disp);font-weight:400;color:var(--bone);
font-size:clamp(1.3rem,2.3vw,1.78rem);line-height:1.18;margin:0;letter-spacing:-.008em}
.tknext-h em{font-style:italic;color:var(--gold-leaf)}
.tknext-s{font-family:var(--serif);color:var(--bone-dim);
font-size:clamp(.95rem,1.2vw,1.04rem);line-height:1.6;margin:.8rem 0 0;max-width:42ch}
.tknext-s .xw{font-style:italic;font-weight:700;color:var(--bone)}
@media(max-width:700px){
.tknext{grid-template-columns:1fr;gap:22px;justify-items:start}
.tknext-dev .dv{font-size:min(170px,44vw)}
}
/* ------------------------------------------------------------------
22 Sep — the Census form, made to look like one answer
Zed: it read as pick-one-from-each because four headed groups in a
row is what a multi-part form looks like. The fix belongs in the
instruction, not in more warnings on the form. Five numbered routes
to one answer, with the write-in as route five rather than an
afterthought below the fold. The card also loses the flat white,
which is not in the palette, and the section gets the mark it was
short of. And PXO is set as the mark, not as three letters.
------------------------------------------------------------------ */
.cinst-form{background:var(--bone);border:1px solid rgba(28,58,48,.14);
box-shadow:0 10px 30px rgba(28,58,48,.07)}
.cinst-h .pxo--h{display:inline-block;height:.9em;vertical-align:-.08em;margin:0 .04em}
.cinst-h .pxo--h img{height:.9em;width:auto;display:block}
.cinst-h .pxo--h .l{display:none}
.cinst-help{max-width:56ch;line-height:1.55}
.cinst-help b{color:var(--forest);font-weight:700}
/* the route number carries the one-answer idea without nagging */
.cgrp-t,.cown-l{display:flex;align-items:center;gap:.6em}
.cgrp-n{font-family:var(--disp);font-style:normal;font-weight:400;
font-size:1.5em;line-height:1;color:var(--gold-ink);
width:1.5em;height:1.5em;flex:0 0 auto;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid rgba(126,96,35,.35);border-radius:50%}
.cown-l{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
color:var(--gold-ink);margin-bottom:.6rem}
/* route five sits level with the other four, not below the fold */
.cinst-own{margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--rule-bone)}
.addmine{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(12px,1.6vw,20px)}
.addmine .fld{flex:1 1 16rem;min-width:0}
/* the standing Census pill never changes. The instruction goes under it. */
.cgo{display:flex;flex-direction:column;gap:.5rem;align-items:center;flex:0 0 auto}
.cgo .cta{width:100%}
.cgo .pp-n{margin:0;text-align:center}
/* the oversize mark, kept off the card */
.cinst .sec-x--gold{opacity:.16;height:min(120%,760px);bottom:-30%;left:-20%}
@media(max-width:820px){
.cinst .sec-x--gold{opacity:.1;height:min(64%,420px);left:-44%;bottom:-6%}
.cgo,.cgo .cta{width:100%}
}
/* on a light card the mark has to be the forest one — the bone version was
leaving a gold X floating with no P and no O. Same fault class as the
gold-on-gold X this morning, inverted. */
.cinst-h .pxo--h .d{display:none}
.cinst-h .pxo--h .l{display:block}
/* the caption under the pill follows the standing pill caption, not the body */
.cgo .pp-n{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold-ink);line-height:1.4}
/* the chips take the palette, not flat white */
.cinst .vote label{background:var(--bone-2);border-color:rgba(28,58,48,.16)}
.cinst .vote label:hover{background:#fff;border-color:var(--gold-deep)}
.cinst .fld{background:var(--bone-2);border-color:rgba(28,58,48,.18)}
.cinst .fld:focus{background:#fff}
/* ------------------------------------------------------------------
22 Sep — the wallpaper carries through, and two arguments become one
Zed: the census form should sit on the hero's art rather than on a
flat bone band, so the top of the page reads as one continuous
surface with the form laid on it like a sheet. And "Why we are
counting" and the eX stage were the same argument arriving twice —
the labels fail you, and leaving is not a subtraction — so the
second is now a subhead inside the first.
------------------------------------------------------------------ */
.cinst--art{position:relative;overflow:hidden;background-color:var(--forest);
background-size:cover;background-position:center right;background-repeat:no-repeat;
padding:clamp(48px,6vw,86px) 0 clamp(52px,6.4vw,92px)}
.cinst--art::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(19,39,32,.74) 0%,rgba(19,39,32,.56) 42%,
rgba(19,39,32,.8) 100%)}
.cinst--art > .wrap{position:relative;z-index:2}
/* the card is a sheet laid on the wallpaper, so it earns a real shadow */
.cinst--art .cinst-form{box-shadow:0 26px 60px rgba(0,0,0,.34);
border-color:rgba(28,58,48,.2)}
/* the eX argument, folded in on a dark band */
.subsec--dk{margin-top:clamp(34px,4.4vw,56px);position:relative}
.subsec--dk::before{content:"";display:block;width:52px;height:2px;
background:var(--gold);opacity:.7;margin:0 0 clamp(18px,2.2vw,26px)}
.subsec--dk .subh{color:var(--bone)}
.subsec--dk .dim{color:var(--bone-dim)}
.subsec--dk .dim strong{color:var(--bone)}
.subsec--dk .kick{color:var(--gold-leaf)}
.subsec--dk .exf{color:var(--gold-leaf);margin-bottom:.9rem}
/* ==================================================================
22 Sep — the type scale, standardised
An audit of every heading, eyebrow and body class across twelve
pages found the roles were right but the sizes had drifted badly:
H2 running at EIGHT different sizes (26/29/32/34/38/40/42/46),
H3 at six, the eyebrow at five, and body .dim at four. One H3 was
in Newsreader 700 — the body face wearing a display hat, the same
fault the slogans had.
The dominant value in each case was already the right one, so this
is not a redesign. It collapses the drift onto the value the site
was mostly using, and keeps exactly one deliberate second step:
a panel is quieter than a section.
THE SCALE — display is Instrument Serif, body Newsreader, labels
Instrument Sans, and nothing crosses over.
H1 53 section headline
H2 42 section heading
H2 panel 29 inside a panel or a card
.subh 33 a subhead that carries its own argument
slogan 29 .kick, .thepoint, .cwhy-so, .stg2-take
H3 20 card and tile headings
lead 21 section standfirst (hero standfirst stays 19)
body 18 .dim
eyebrow 14
================================================================== */
/* --- H2: one section size, one panel size --- */
main h2{font-family:var(--disp);font-weight:400;
font-size:clamp(1.62rem,3.1vw,2.62rem);line-height:1.05;letter-spacing:-.012em}
.endcta h2,.joinus h2,.strip h2,.xq h2.xq-t,.arc .card h2{
font-size:clamp(1.28rem,2.1vw,1.82rem);line-height:1.12}
.cwhy h2,.worth h2,.arc > .wrap > h2,.xsec h2,.levels h2,.cinst-h{
font-size:clamp(1.62rem,3.1vw,2.62rem)}
/* --- H3: one card size, one subhead size, no body face --- */
main h3{font-family:var(--disp);font-weight:400;line-height:1.16;
font-size:clamp(1.06rem,1.45vw,1.28rem)}
.xsec .xsub,.reach-h{font-family:var(--disp);font-weight:400;
font-size:clamp(1.06rem,1.45vw,1.28rem);line-height:1.16}
.subh{font-size:clamp(1.42rem,2.5vw,2.05rem);line-height:1.12}
.endcta h3{font-size:clamp(1.06rem,1.45vw,1.28rem)}
/* --- the eyebrow is one size everywhere --- */
main .eyebrow,main .eyebrow--plain{font-size:clamp(.72rem,.94vw,.88rem)}
/* --- body and standfirst --- */
main .dim{font-size:clamp(.98rem,1.24vw,1.12rem);line-height:1.62}
main .dim.small{font-size:clamp(.86rem,1.02vw,.94rem)}
main .lead{font-size:clamp(1.06rem,1.46vw,1.32rem);line-height:1.58}
.phero .lead,.bh-in .bh-lede{font-size:clamp(1.04rem,1.34vw,1.19rem);line-height:1.62}
/* --- the two slogans that never joined the system --- */
.cwhy-so,.stg2-take{font-family:var(--disp);font-weight:400;
font-size:clamp(1.34rem,2.2vw,1.82rem);line-height:1.22;letter-spacing:-.008em}
.cwhy-so{color:var(--gold-leaf)}
/* a card label is a label, so it takes the label face */
.cw-n{font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--gold-leaf);opacity:.85}
/* the eX argument is no longer a second section with its own label — it is the
sharpest instance of the one this section is already making, so it runs on
in the same voice and the section resolves on it */
.cwhy-x{max-width:62ch;margin-top:clamp(26px,3.2vw,40px)}
.cwhy-x em{font-style:italic;color:var(--bone)}
.cwhy-x strong{color:var(--gold-leaf);font-weight:400}
.cwhy-so{margin-top:clamp(22px,2.6vw,32px);max-width:24ch}
.cwhy-so em{font-style:italic}
/* the close sits on the same three columns as the cards above it, so the
section holds one grid instead of dissolving into a narrow column with
half the band empty beside it */
.cwhy-close{display:grid;grid-template-columns:2fr 1fr;
gap:clamp(26px,3.4vw,54px);align-items:start;
margin-top:clamp(30px,3.8vw,48px);padding-top:clamp(26px,3.2vw,38px);
border-top:1px solid rgba(244,241,234,.14)}
.cwhy-close .cwhy-x{margin:0;max-width:none}
.cwhy-close .cwhy-so{margin:0;max-width:none;align-self:center}
@media(max-width:820px){.cwhy-close{grid-template-columns:1fr;gap:24px}}
/* the card label is a label. Two older rules were holding the eyebrow and the
card label in the body face at their own sizes; the scale reaches them now. */
.cwhy .cw-n,.cwhy-g .cw-n{font-family:var(--sans);font-weight:700;font-size:.68rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold-leaf);opacity:.85;
line-height:1.45}
main .card .eyebrow,main .cgroup .eyebrow,main .xmap .eyebrow--plain,
main .endcta .eyebrow,main .xsec .eyebrow{font-size:clamp(.72rem,.94vw,.88rem)}
main .worth .dim,main .phero .dim{font-size:clamp(.98rem,1.24vw,1.12rem);line-height:1.62}
/* the About bio names were the one heading larger than any H2 on the site —
40px against the 42px section heading, so a person's name was competing
with the argument. They take the subhead tier, which is what they are. */
.biob h3{font-family:var(--disp);font-weight:400;
font-size:clamp(1.42rem,2.5vw,2.05rem);line-height:1.12}
/* and the last of the drift */
.band-forest h3,.band-deep h3{font-size:clamp(1.06rem,1.45vw,1.28rem)}
.band-forest .subh,.band-deep .subh,.cwhy .subh{font-size:clamp(1.42rem,2.5vw,2.05rem)}
/* the sandwich, completed: the hero carries the art, the form sits on it as a
sheet, and the section beneath closes it. Three bands, one surface. The wash
goes deeper below the form so the page settles as it descends. */
.cwhy--art{position:relative;overflow:hidden;
background-size:cover;background-position:center right;background-repeat:no-repeat}
.cwhy--art::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(19,39,32,.7) 0%,rgba(19,39,32,.6) 55%,
rgba(19,39,32,.82) 100%)}
.cwhy--art > .wrap{position:relative;z-index:2}
/* var(--bone2) was a phantom — the token is --bone-2. Eleven rules were
resolving to nothing, so every surface meant to sit a shade below bone was
rendering transparent: the strip, the census band, the doors, the end-panel
card, and on the census form the text input itself, which is why the box you
are meant to type in had no box. Nine of the eleven predate today. */
/* ------------------------------------------------------------------
22 Sep — the equation sits on the page's own wallpaper
Zed: the hero art was staring at us. The slab was carrying a copy of
art-paint.jpg inside itself, which meant the painting was trapped in
the box rather than the box sitting on the painting. Now the section
takes the hero's wallpaper under a bone wash, and the slab goes solid
forest on top of it — the same relationship the Census form has with
its own hero art, inverted for a dark object on a light ground.
------------------------------------------------------------------ */
.eqsec--art{position:relative;overflow:hidden;
background-color:var(--forest-deep);color:var(--bone);
background-size:cover;background-position:center right;background-repeat:no-repeat;
padding:clamp(58px,6.8vw,100px) 0}
/* light enough that the gold strokes still read as paint, dark enough to carry
type. The artwork is made for a dark ground — washed pale it goes to mud. */
.eqsec--art::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(168deg,rgba(19,39,32,.62) 0%,rgba(19,39,32,.5) 44%,
rgba(19,39,32,.72) 100%)}
.eqsec--art > .wrap{position:relative;z-index:2}
/* on a dark ground the heading and slogan take the hero's treatment */
.eqsec--art h2{color:var(--bone)}
.eqsec--art .eq-kick{color:var(--gold-leaf)}
.eqsec--art .eyebrow{color:var(--gold-leaf)}
.eqsec--art .rule{background:var(--gold)}
.eqsec--art .dim{color:var(--bone-dim)}
.eqsec--art .kick{color:var(--gold-leaf)}
.eqsec--art .conf--x li{color:var(--bone-dim)}
.eqsec--art .conf--x li::before{background-color:var(--gold-leaf)}
.eqsec--art .pxoeq,.eqsec--art .dim strong{color:var(--bone)}
/* the slab is a plaque on the painted wall: denser than the ground it sits on,
with a hairline of gold so its edge is read rather than guessed */
.eqsec--art .eqslab{background-image:none;background-color:#0F1F19;
border:1px solid rgba(227,183,51,.22);
box-shadow:0 26px 64px rgba(0,0,0,.5)}
.eqsec--art .eqslab::before{background:none}
.eqsec--art .eqslab-gx{opacity:.06}
/* Zed: the panel was only muting the painting behind it. The equations sit
straight on the wall now — nothing between the brushwork and the type. */
.eqsec--art .eqslab{background:none;border:0;box-shadow:none;border-radius:0;
max-width:none;margin-top:clamp(30px,3.6vw,46px);overflow:visible}
.eqsec--art .eqslab-in{padding:0}
.eqsec--art .eqslab-gx{display:none}
.eqsec--art .eqslab-lab--lit{border-top-color:rgba(244,241,234,.22)}
/* with no box to fit inside, both equations run at full display size */
.eqsec--art .chalk-l,.eqsec--art .eqbr{font-size:clamp(1.34rem,2.7vw,2.18rem)}
/* the hr was showing its default border on a dark ground and reading as a slab */
.eqsec--art .rule{border:0;height:3px;width:58px;background:var(--gold);
margin:0 0 1.35rem}
/* ------------------------------------------------------------------
22 Sep — the two labels carry the argument, so they stop whispering
Zed: the point was getting lost. These are the signposts that tell
you which maths you are looking at, and they were set at .62rem and
half opacity — quieter than the caption underneath them. They now
run at the eyebrow's own size, the discredited one in chalk and the
ours one in gold with the mark in it, so the contrast is legible
before a single term is read.
------------------------------------------------------------------ */
.eqsec--art .eqslab-lab{font-family:var(--sans);font-weight:700;
font-size:clamp(.74rem,.96vw,.9rem);letter-spacing:.2em;text-transform:uppercase;
line-height:1.4;margin:0 0 clamp(14px,1.8vw,20px);display:flex;align-items:center;gap:.5em}
.eqsec--art .eqslab-lab--out{color:#C6C2B4;opacity:.78}
.eqsec--art .eqslab-lab--out::before{content:"";width:26px;height:2px;flex:0 0 auto;
background:#C6C2B4;opacity:.55;border-radius:2px}
.eqsec--art .eqslab-lab--lit{color:var(--gold-leaf);opacity:1;
margin-top:clamp(28px,3.4vw,42px);padding-top:clamp(24px,2.8vw,34px)}
.eqsec--art .eqslab-lab--lit::before{content:"";width:26px;height:2px;flex:0 0 auto;
background:var(--gold);border-radius:2px}
.eqsec--art .eqslab-lab--lit .pxo--lab{display:inline-block;height:1.5em;margin:0 .05em}
.eqsec--art .eqslab-lab--lit .pxo--lab img{height:1.5em;width:auto;display:block}
.eqsec--art .eqslab-lab--lit .pxo--lab .d{display:block}
.eqsec--art .eqslab-lab--lit .pxo--lab .l{display:none}
/* at label size the full lockup goes to mush, so P✗O is set in the label's own
voice: its letters, its colour, and the painted mark between them */
.eqslab-lab--lit .labmk{display:inline-flex;align-items:center;letter-spacing:0;
color:var(--gold-leaf)}
.eqslab-lab--lit .labx{height:1.72em;width:auto;display:block;
margin:0 -.3em 0 -.34em;position:relative;top:.02em}
/* the chalk was texture at the cost of the words. It is a comparison, so the
discredited line has to be read before it can be dismissed: brighter chalk,
far less displacement, and a strike that crosses without erasing. */
.eqsec--art .chalk-l{color:#EDEADF;opacity:.94;letter-spacing:.004em}
.eqsec--art .chalk-strike path{stroke:#F4F1EA;stroke-width:2.2;opacity:.5}
/* ------------------------------------------------------------------
22 Sep — the Census form, woken up
Zed: bone on bone is what made it dull and un-census-like. The route
numbers were outlines and the options were bone chips on a bone
card, so a form about choosing looked like a form about reading.
The numbers go solid gold with the forest numeral cut out of them,
and the options get a warmer ground and a border you can actually
see — so an unchosen option reads as available rather than inert.
------------------------------------------------------------------ */
.cinst .cgrp-n{background:var(--gold);border:0;color:var(--forest-deep);
font-family:var(--disp);font-size:1.42em;font-weight:400;line-height:1;
width:1.62em;height:1.62em;box-shadow:0 2px 7px rgba(28,58,48,.2)}
.cinst .cgrp-t,.cinst .cown-l{color:var(--forest);opacity:1}
.cinst .cgrp-t{font-size:.72rem;letter-spacing:.17em}
/* the options are the census itself, so they carry the brand colour rather
than sitting bone on bone: forest chips that turn gold the moment one is
chosen. A board of answers waiting to be picked, not a list to be read. */
.cinst .vote label{background:var(--forest);border:1px solid var(--forest);
color:var(--bone);font-weight:500;transition:all .16s ease}
.cinst .vote label:hover{background:var(--forest-deep);border-color:var(--gold);
color:var(--bone);transform:translateY(-1px);box-shadow:0 4px 12px rgba(28,58,48,.26)}
.cinst .vote input:checked + label{background:var(--gold);border-color:var(--gold);
color:var(--forest-deep);font-weight:600;
box-shadow:0 3px 12px rgba(227,183,51,.4);transform:translateY(-1px)}
.cinst .fld{background:#EAE4D6;border:1px solid rgba(28,58,48,.26);color:var(--forest)}
.cinst .fld:focus{background:#FFF;border-color:var(--gold-deep);outline:none;
box-shadow:0 0 0 3px rgba(227,183,51,.25)}
/* ------------------------------------------------------------------
22 Sep — one painted run, not two crops
Each section was carrying its own copy of the artwork with its own
cover crop, so the pattern jumped at the seam between them. The
painting now belongs to a single container spanning both, and the
sections sit on it transparent. One wash runs the whole height and
deepens as it descends, so the page settles without a break in it.
------------------------------------------------------------------ */
.wallrun{position:relative;overflow:hidden;background-color:var(--forest-deep);
background-size:cover;background-position:center top;background-repeat:no-repeat}
.wallrun::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(19,39,32,.72) 0%,rgba(19,39,32,.56) 26%,
rgba(19,39,32,.66) 58%,rgba(19,39,32,.84) 100%)}
.wallrun > section{position:relative;z-index:2;background-image:none!important;
background-color:transparent!important}
.wallrun > section::before{display:none}
/* ------------------------------------------------------------------
22 Sep — the standard panel, settled
Zed: the roundel stays, and its inconsistency with the pills is the
point — that is what gives it hero status. So it comes out of the
copy column and takes a row of its own above the doors. The pills
all stay but small, each with its short descriptor. Peer Forums
leaves the standard set. The Dispatch joins it as a pill, and the
signup panel itself moves off the home page.
------------------------------------------------------------------ */
.ec-hero{grid-column:1/-1;display:flex;justify-content:flex-start;
margin:clamp(22px,2.8vw,34px) 0 clamp(26px,3.2vw,40px);
padding-bottom:clamp(24px,3vw,36px);border-bottom:1px solid var(--rule-bone)}
.ec-hero .ecx{display:flex;align-items:center;gap:clamp(16px,2vw,26px);
text-decoration:none}
.ec-hero .xcdev--mini .dv{font-size:clamp(92px,9.4vw,124px)}
.ec-hero .ecx-w b{font-size:clamp(1.34rem,2.2vw,1.82rem)}
.ec-hero .ecx-w small{font-size:clamp(.68rem,.84vw,.78rem);letter-spacing:.14em}
.ec-hero .ecx:hover .ecx-w b{color:var(--gold-ink)}
/* the doors: six small pills in one band, each with its line */
.ec-opts--6{grid-column:1/-1;display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.ec-opts--6 .ecp .cta{width:100%;height:40px;padding:0 .6rem;font-size:.68rem}
.ec-opts--6 .ecp .cta .mki{height:14px}
.ec-opts--6 .ecp-n{font-size:.64rem;letter-spacing:.1em;line-height:1.4;margin-top:.45rem}
@media(max-width:1000px){.ec-opts--6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){
.ec-opts--6{grid-template-columns:repeat(2,minmax(0,1fr))}
.ec-hero .ecx{flex-direction:row;align-items:center}
.ec-hero .xcdev--mini .dv{font-size:84px}
}
/* ------------------------------------------------------------------
22 Sep — the panel becomes a panel
Zed: neat but reading as a section, not a CTA. The width was the
whole problem — a full-bleed band with a full-width grid inside it
behaves like content. It is now a bounded panel: narrow measure, a
real edge, tight vertical rhythm, and the pills in two rows of three
rather than a six-across strip that needed the whole page to exist.
------------------------------------------------------------------ */
.endcta{padding:clamp(40px,4.6vw,62px) 0}
.endcta .wrap{display:flex;justify-content:center}
.endcta .ec{
display:block;max-width:660px;width:100%;
background:var(--bone-2);border:1px solid rgba(28,58,48,.16);border-radius:8px;
padding:clamp(26px,3vw,38px) clamp(24px,2.8vw,36px) clamp(22px,2.6vw,30px);
box-shadow:0 14px 38px rgba(28,58,48,.09)}
.endcta .ec-say{text-align:left}
.endcta .ec-say h2{font-size:clamp(1.34rem,2.2vw,1.82rem);line-height:1.12;margin:0}
.endcta .ec-say p{font-size:.92rem;margin:.4rem 0 0}
/* the roundel keeps hero status but stops taking a whole storey */
.endcta .ec-hero{margin:clamp(18px,2.2vw,24px) 0 clamp(18px,2.2vw,24px);
padding:clamp(16px,2vw,22px) 0;
border-top:1px solid rgba(28,58,48,.14);border-bottom:1px solid rgba(28,58,48,.14)}
.endcta .ec-hero .ecx{gap:clamp(13px,1.6vw,18px)}
.endcta .ec-hero .xcdev--mini .dv{font-size:clamp(66px,6.4vw,82px)}
.endcta .ec-hero .ecx-w b{font-size:clamp(1.06rem,1.5vw,1.28rem)}
.endcta .ec-hero .ecx-w small{font-size:.64rem;letter-spacing:.12em}
/* six doors, two rows of three, inside the panel's measure */
.endcta .ec-opts--6{grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(10px,1.2vw,14px) clamp(10px,1.2vw,14px)}
.endcta .ec-opts--6 .ecp .cta{height:36px;font-size:.64rem}
.endcta .ec-opts--6 .ecp-n{font-size:.6rem;margin-top:.35rem;letter-spacing:.08em}
.endcta .ecp-n--3{font-size:.58rem;line-height:1.45}
/* the four-pill pages use the same panel, three across then one */
.endcta .ec-opts:not(.ec-opts--6){display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,14px)}
@media(max-width:560px){
.endcta .ec{padding:22px 18px 20px}
.endcta .ec-opts--6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Zed: the roundel on the left, the doors in two rows beside it. One
horizontal band instead of three stacked storeys — which is what makes it
read as a call rather than a section. */
.endcta .ec{max-width:780px}
.endcta .ec-body{display:grid;grid-template-columns:auto 1fr;
gap:clamp(20px,2.6vw,34px);align-items:center;
margin-top:clamp(18px,2.2vw,24px);padding-top:clamp(18px,2.2vw,24px);
border-top:1px solid rgba(28,58,48,.14)}
.endcta .ec-hero{margin:0;padding:0;border:0;flex:0 0 auto}
.endcta .ec-hero .ecx{flex-direction:column;align-items:center;text-align:center;
gap:.6rem;width:clamp(116px,12vw,148px)}
.endcta .ec-hero .xcdev--mini .dv{font-size:clamp(78px,7.6vw,98px)}
.endcta .ec-hero .ecx-w{display:block}
.endcta .ec-hero .ecx-w b{font-size:clamp(.94rem,1.25vw,1.08rem);display:block}
.endcta .ec-hero .ecx-w small{font-size:.58rem;letter-spacing:.1em;display:block;
margin-top:.25rem}
.endcta .ec-opts--6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:620px){
.endcta .ec-body{grid-template-columns:1fr;gap:20px;justify-items:center}
.endcta .ec-hero .ecx{width:auto}
}
/* ------------------------------------------------------------------
22 Sep, late — the heading comes down into the white space
Zed: too much space. The heading was running the full width of the
panel with nothing under its right half, which is what made the band
read tall. It now sits above the pills, in the column the roundel
leaves empty, so the panel is two columns and two storeys total.
------------------------------------------------------------------ */
.endcta{padding:clamp(30px,3.2vw,44px) 0}
.endcta .ec{max-width:820px;
padding:clamp(20px,2.2vw,26px) clamp(20px,2.4vw,30px) clamp(18px,2vw,24px)}
.endcta .ec-body{display:grid;grid-template-columns:auto 1fr;
gap:clamp(18px,2.4vw,30px);align-items:center;
margin:0;padding:0;border:0}
.endcta .ec-col{min-width:0}
.endcta .ec-say{margin:0 0 clamp(11px,1.3vw,15px)}
.endcta .ec-say h2{font-size:clamp(1.14rem,1.7vw,1.46rem);line-height:1.1;margin:0}
.endcta .ec-say p{font-size:.8rem;margin:.22rem 0 0}
.endcta .ec-say .ecx-h{height:max(22px,1.02em);vertical-align:-.16em}
.endcta .ec-hero .ecx{width:clamp(104px,10.6vw,128px);gap:.5rem}
.endcta .ec-hero .xcdev--mini .dv{font-size:clamp(70px,6.8vw,86px)}
.endcta .ec-opts--6{gap:clamp(8px,1vw,11px)}
.endcta .ec-opts--6 .ecp .cta{height:34px;font-size:.62rem}
.endcta .ec-opts--6 .ecp-n{font-size:.58rem;margin-top:.3rem}
.endcta .ecp-n--3{font-size:.56rem;line-height:1.4}
@media(max-width:620px){
.endcta .ec-body{grid-template-columns:1fr;gap:16px;justify-items:stretch}
.endcta .ec-hero .ecx{width:auto;flex-direction:row;text-align:left}
.endcta .ec-say{text-align:left}
}
.endcta .ec-hero{grid-column:auto;grid-row:auto;align-self:center;
display:flex;justify-content:center;border:0;padding:0;margin:0}
.endcta .ec-hero .ecx{border:0;padding:0;margin:0;max-width:none}
.endcta .ec{max-width:760px}
.endcta .ec-hero .ecx-w small{line-height:1.5}
@media(max-width:620px){
.endcta .ec-opts--6{grid-template-columns:repeat(2,minmax(0,1fr))}
.endcta .ec-hero .ecx{gap:.9rem}
.endcta .ec-hero .xcdev--mini .dv{font-size:74px}
.endcta .ec-hero .ecx-w b{font-size:1.14rem}
.endcta .ec-hero .ecx-w small{font-size:.6rem}
}
/* ------------------------------------------------------------------
22 Sep — the footer, rebuilt
Zed: the lockup and its slogans were off brand and the tagline was
italic; the three column headers confuse now the CTA panel carries
the contextual actions; if it is indexation, a simple page list does
the job; and even with the social marks it can tighten up.
So: the brand lockup exactly as it runs on every page, the official
coloured social marks beside it, one flat index of every page, and
a single bottom line. No headers, no blurb, no repeated slogan.
------------------------------------------------------------------ */
.site-foot{background:#0E1D17;color:#9AA79F;font-family:var(--sans);
font-size:.85rem;padding:clamp(26px,3.2vw,40px) 0 20px}
.site-foot .foot-top{display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:clamp(18px,3vw,36px);
padding-bottom:clamp(18px,2.4vw,26px);border-bottom:1px solid #1C3128}
/* the lockup, at footer scale, in brand */
.pglock--foot{margin:0;gap:clamp(12px,1.4vw,17px);align-items:center}
.pglock--foot .pglock-mk{height:clamp(46px,4.4vw,58px)}
.pglock--foot .pglock-bar{align-self:stretch;margin:2px 0}
.pglock--foot .de{font-size:clamp(.6rem,.78vw,.7rem);letter-spacing:.2em;
line-height:1.4;white-space:nowrap}
.pglock--foot .de em{margin-top:.34em}
/* the official marks, coloured, small */
.foot-soc{display:flex;align-items:center;gap:clamp(14px,1.8vw,24px);flex-wrap:wrap}
.foot-soc .fs{display:inline-flex;align-items:center;gap:.46rem;text-decoration:none;
color:#9AA79F;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
font-weight:600;transition:color .15s ease}
.foot-soc .fs svg{width:19px;height:19px;flex:0 0 auto;border-radius:3px;display:block}
.foot-soc .fs:hover{color:var(--gold-leaf)}
/* one flat index, every page, no headers */
.foot-map{display:flex;flex-wrap:wrap;gap:.42rem clamp(14px,1.8vw,24px);
padding:clamp(16px,2vw,22px) 0}
.foot-map a{color:#9AA79F;text-decoration:none;font-size:.82rem;
transition:color .15s ease}
.foot-map a:hover{color:var(--gold-leaf)}
.foot-map a.on{color:var(--bone)}
.site-foot .bot{border-top:1px solid #1C3128;padding-top:14px;
display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.72rem;
letter-spacing:.06em}
.site-foot .bot .bot-city{font-size:.72rem;letter-spacing:.14em;font-weight:600;
color:#B6C2BA}
@media(max-width:700px){
.site-foot .foot-top{flex-direction:column;align-items:flex-start;gap:20px}
.pglock--foot .de{white-space:normal}
}
.foot-map{gap:.4rem clamp(11px,1.45vw,19px)}
.foot-map a{font-size:.79rem;white-space:nowrap}
/* ------------------------------------------------------------------
22 Sep — the eyebrow mark, for definition
Zed, on the map page: the X in the eyebrow needs to be forest. He is
right, and it is the standing principle rather than a one-page fix —
gold paint on a bone ground has no definition. So on every light
ground the mark inverts to forest, and on the dark grounds it stays
the leaf. One rule, both directions.
------------------------------------------------------------------ */
main .eyebrow::before,main .eyebrow .ebx{
filter:brightness(0) saturate(100%) invert(15%) sepia(18%) saturate(1200%)
hue-rotate(115deg) brightness(95%) contrast(92%);opacity:.9}
.band-forest .eyebrow::before,.band-deep .eyebrow::before,
.bleed--forest .eyebrow::before,.bleed--deep .eyebrow::before,
.hero .eyebrow::before,.phero .eyebrow::before,.wallrun .eyebrow::before,
.eqsec--art .eyebrow::before,.joinus .eyebrow::before,
.band-forest .eyebrow .ebx,.band-deep .eyebrow .ebx{filter:none;opacity:1}
/* the standard panel heading takes the full measure on every page,
not only on home */
.endcta .ec-say h2{max-width:none}
/* ------------------------------------------------------------------
22 Sep — the promise line on the map
Zed: something has corrupted it, and it needs highlighting. It was
set at H3 size in the ink gold and run the full width of the busiest
part of the map, so it read smaller and weaker than the body copy it
introduces. It is not a subhead, it is the promise. So: the slogan
treatment, forest ink for the frame and gold ink for the five things,
a short measure so it sits in the open water, and a bone glow rather
than a panel so the art is not lost.
------------------------------------------------------------------ */
.xmap .xsub{font-family:var(--disp);font-weight:400;
font-size:clamp(1.42rem,2.4vw,2rem);line-height:1.2;letter-spacing:-.008em;
color:var(--forest);max-width:22ch}
.xmap .xsub .nb{color:var(--gold-ink)}
.xmap .xsub .pxo img{height:1.02em;vertical-align:-.1em}
@media(max-width:860px){.xmap .xsub{max-width:none}}
/* the light islands inside dark bands keep the forest mark */
.band-forest .card .eyebrow::before,.band-deep .card .eyebrow::before,
.cinst .eyebrow::before,.band-deep .cgroup .eyebrow::before{
filter:brightness(0) saturate(100%) invert(15%) sepia(18%) saturate(1200%)
hue-rotate(115deg) brightness(95%) contrast(92%);opacity:.9}
/* ------------------------------------------------------------------
22 Sep — the panel stops being a card
Zed: the bone card was artistic but the answer to "narrow it" is not
a narrower box. Full width, on the plain ground, no card, and only
the depth the card had. With nothing drawn round it, it reads as a
panel rather than a section. The heading goes literal first — the
six verbs, in the order of the pills — and the slogan second.
------------------------------------------------------------------ */
.endcta{background:var(--bone);border-top:1px solid var(--rule-bone);
padding:clamp(28px,3vw,40px) 0}
.endcta .wrap{display:block}
.endcta .ec{max-width:none;width:auto;background:none;border:0;border-radius:0;
box-shadow:none;padding:0}
.endcta .ec-body{display:grid;grid-template-columns:auto 1fr;
gap:clamp(22px,3vw,40px);align-items:center;margin:0;padding:0;border:0}
.endcta .ec-verbs{font-family:var(--sans);font-weight:700;color:var(--gold-ink);
font-size:clamp(.66rem,.84vw,.76rem);letter-spacing:.2em;text-transform:uppercase;
margin:0 0 .5rem}
.endcta .ec-say h2{font-family:var(--disp);font-weight:400;color:var(--forest);
font-size:clamp(1.24rem,1.9vw,1.62rem);line-height:1.1;margin:0;max-width:none}
.endcta .ec-say p:not(.ec-verbs){display:none}
.endcta .ec-say{margin:0 0 clamp(13px,1.5vw,18px)}
/* six doors, one row, across the full measure */
.endcta .ec-opts--6{grid-template-columns:repeat(6,minmax(0,1fr));
gap:clamp(9px,1.1vw,14px)}
.endcta .ec-opts--6 .ecp .cta{height:38px;font-size:.64rem}
.endcta .ec-opts--6 .ecp-n{font-size:.6rem;margin-top:.34rem}
.endcta .ecp-n--3{font-size:.58rem;line-height:1.4}
.endcta .ec-hero .ecx{width:clamp(108px,10.4vw,128px)}
@media(max-width:1000px){
.endcta .ec-opts--6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
.endcta .ec-body{grid-template-columns:1fr;gap:16px}
.endcta .ec-opts--6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.endcta .ec-say,.endcta .ec-verbs{max-width:none}
.endcta .ec-verbs{white-space:nowrap}
@media(max-width:620px){.endcta .ec-verbs{white-space:normal}}
/* ------------------------------------------------------------------
22 Sep — the roundel on Portfolio Careers
Zed: put it in the white space above the large watermark X. The
context is already made by the time the reader gets there, and the
Census pill sits below it, so the two calls do not compete.
------------------------------------------------------------------ */
.secall{position:absolute;z-index:3;top:clamp(56px,7vw,110px);
right:clamp(28px,5.4vw,96px);width:clamp(168px,16vw,208px)}
.secall .secall-a{display:flex;flex-direction:column;align-items:center;
text-align:center;gap:.7rem;text-decoration:none}
.secall .xcdev--mini .dv{font-size:clamp(116px,11.6vw,150px)}
.secall .ecx-w{display:block}
.secall .ecx-w b{font-family:var(--serif);font-weight:400;color:var(--forest);
font-size:clamp(1.02rem,1.36vw,1.18rem);display:block}
.secall .ecx-w small{font-family:var(--sans);font-weight:600;color:var(--grey);
font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;display:block;
margin-top:.3rem;line-height:1.5}
.secall .secall-a:hover .ecx-w b{color:var(--gold-ink)}
@media(max-width:1180px){
.secall{position:static;width:auto;margin:clamp(26px,3.4vw,40px) 0 0}
.secall .secall-a{align-items:flex-start;text-align:left}
.secall .xcdev--mini .dv{font-size:118px}
}
.secall{top:clamp(96px,10.5vw,176px);width:clamp(176px,17vw,224px)}
/* ------------------------------------------------------------------
22 Sep — the census art, repeated rather than stretched
Zed: just repeat the first section's background art in the third,
directly after the form. The single stretched run was the fault —
one cover crop over 1,832px blew the artwork up until the words in
it read as noise. Now the third section takes the hero's art at the
hero's own scale, and the form sits on the plain deep ground between
them. Art, ground, art.
------------------------------------------------------------------ */
.cinst--deep{background:var(--forest-deep)}
.cwhy--art{position:relative;overflow:hidden;
background-color:var(--forest-deep);
background-size:cover;background-position:center right;background-repeat:no-repeat}
.cwhy--art > .wrap{position:relative;z-index:2}
/* the third section carries three columns rather than one, so the copy
reaches further right than the hero's does. A light wash, weighted to
the left, holds the text without closing the artwork down. */
.cwhy--art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(96deg,rgba(19,39,32,.74) 0%,rgba(19,39,32,.66) 48%,
rgba(19,39,32,.52) 80%,rgba(19,39,32,.44) 100%)}
/* the empty submit says so, rather than only changing a placeholder */
.cinst .cerr{font-family:var(--sans);font-weight:600;font-size:.78rem;
color:#8E2F1E;margin:.7rem 0 0;letter-spacing:.01em}
/* ------------------------------------------------------------------
23 Sep — the map's introducing line, and the copy weight
Zed: the eyebrow should be larger and the mark should stand out, in
something bronzer. Keeping it as an eyebrow rather than promoting it
to a heading: "Introducing the PXO Exchange" is a label, and the
proposition underneath it is the thing that deserves to be biggest.
So the label earns its place by size and colour, not by rank.
------------------------------------------------------------------ */
:root{--bronze:#9A6A22}
main .xmap .eyebrow--plain{
font-family:var(--sans);font-style:normal;font-weight:700;
text-transform:uppercase;letter-spacing:.2em;
font-size:clamp(.84rem,1.18vw,1.04rem);
color:var(--bronze);
margin:0 0 clamp(14px,1.7vw,22px)}
/* the mark was rendering BOTH variants stacked, which is what made it look
washed: the ground swap hides .d on light, and a blanket display rule on
the img had been un-hiding it */
main .xmap .eyebrow--plain .pxo--eb{display:inline-block;vertical-align:-.3em;
margin:0 .12em}
main .xmap .eyebrow--plain .pxo--eb img{height:1.62em;width:auto}
main .xmap .eyebrow--plain .pxo--eb .d{display:none}
main .xmap .eyebrow--plain .pxo--eb .l{display:inline-block}
/* the copy in this section carries the argument, so it takes a little
more weight and a little more ink */
.xmap-lead,.xcopy p{font-weight:500}
.xmap-lead{color:#20382E}
.xcopy p{color:#E4DFD2}
/* the WHY THE PXO EXCHANGE eyebrow: the mark carries the brand, so the
painted X in front of it would be a stutter. No leading mark, and the
PXO set at the size the eyebrow can actually hold. */
main .worth .eyebrow--plain{font-family:var(--sans);font-weight:700;
text-transform:uppercase;letter-spacing:.2em;color:var(--gold-leaf);
font-size:clamp(.78rem,1.06vw,.94rem);margin:0 0 .55rem;padding-left:0}
main .worth .eyebrow--plain::before{content:none}
.worth .eyebrow--plain .pxo--eb{display:inline-block;vertical-align:-.3em;
margin:0 .12em}
.worth .eyebrow--plain .pxo--eb img{height:1.58em;width:auto}
.worth .eyebrow--plain .pxo--eb .d{display:inline-block}
.worth .eyebrow--plain .pxo--eb .l{display:none}
/* ------------------------------------------------------------------
23 Sep — Why the X, given its own artwork
Zed: text heavy, textbook, little colour. The section was also doing
two jobs in one flat run. It is now two movements. The first is the
sprawl — a hundred labels — and the artwork is literally a picture of
that argument, so the word wall earns its second outing rather than
repeating itself. The second movement resolves into one mark, so it
goes quiet again on the bone behind the watermark X.
------------------------------------------------------------------ */
.sprawl--art{position:relative;overflow:hidden;
background-color:var(--forest-deep);
background-size:cover;background-position:center right;background-repeat:no-repeat;
padding:clamp(52px,6vw,88px) 0 clamp(52px,6vw,84px)}
.sprawl--art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(96deg,rgba(19,39,32,.80) 0%,rgba(19,39,32,.72) 44%,
rgba(19,39,32,.46) 74%,rgba(19,39,32,.34) 100%)}
.sprawl--art > .wrap{position:relative;z-index:2}
.band-forest .thepoint,.band-deep .thepoint,.sprawl--art .thepoint{color:var(--gold-leaf)}
/* the roundel, on the dark half */
.secall--dark .ecx-w b{color:var(--bone)}
.secall--dark .ecx-w small{color:#A9B6AC}
.secall--dark .secall-a:hover .ecx-w b{color:var(--gold-leaf)}
.has-secall{position:relative}
/* the second movement keeps the watermark and the census pill */
#variable-sec{padding:clamp(48px,5.6vw,80px) 0 clamp(52px,6vw,88px)}
/* on the word wall the roundel had nothing to sit on, so it and its label
competed with the labels painted behind them. A soft ground, no edge. */
.secall--dark{padding:0}
.secall--dark::before{content:"";position:absolute;z-index:-1;
inset:-46% -52% -30%;pointer-events:none;
background:radial-gradient(closest-side ellipse at 50% 46%,
rgba(16,34,28,.94) 0%,rgba(16,34,28,.88) 30%,rgba(16,34,28,.62) 52%,
rgba(16,34,28,.28) 74%,rgba(16,34,28,0) 100%)}
.secall--dark .ecx-w small{font-size:.58rem;letter-spacing:.09em}
.sprawl--art .secall{width:clamp(196px,19vw,246px);right:clamp(16px,3.4vw,64px);
top:clamp(70px,8vw,130px)}
/* the roundel sits outside the wrap, so in flow it needs the page gutter
back, and its halo must not push past the viewport */
@media(max-width:1180px){
.secall{position:static;width:auto;margin:clamp(26px,3.4vw,40px) 0 0;
padding:0 var(--pad)}
.secall .secall-a{align-items:flex-start;text-align:left}
.secall--dark::before{inset:-18% -6% -12%}
}
/* on a narrow viewport a cover crop blows the word wall up until it is
noise rather than texture, so the wash carries more of the ground */
@media(max-width:820px){
.sprawl--art::before{
background:linear-gradient(170deg,rgba(19,39,32,.88) 0%,rgba(19,39,32,.82) 46%,
rgba(19,39,32,.86) 100%)}
.sprawl--art{background-position:center center}
}
/* in flow the roundel belongs after the argument, not before the eyebrow */
@media(max-width:1180px){
.has-secall{display:flex;flex-direction:column}
.has-secall > .wrap{order:1}
.has-secall > .secall{order:2}
.secall--dark::before{display:none}
}
/* ------------------------------------------------------------------
23 Sep — the introducing line, properly weighted and positioned
Zed: the eyebrow and the mark get lost. They were bronze on a gold
map, which is the same value fight the paint has on bone. Forest
separates from the artwork completely, the gold X inside the mark is
then the only warm thing in the line, and a bone glow lifts the whole
line off the busy ground without a panel.
------------------------------------------------------------------ */
main .xmap .eyebrow--plain{
font-size:clamp(.94rem,1.34vw,1.18rem);
letter-spacing:.19em;font-weight:700;
color:var(--forest);
margin:0 0 clamp(16px,1.9vw,24px)}
main .xmap .eyebrow--plain .pxo--eb{vertical-align:-.26em;margin:0 .16em 0 .14em}
main .xmap .eyebrow--plain .pxo--eb img{height:1.46em}
/* ------------------------------------------------------------------
23 Sep — Why the X, resolved
Zed: the copy is good, it sits disjointed. It was: two statement
treatments at identical size separated only by colour with no rule
behind the colour, a third mid-tier inside the PXO line, a fourth in
Newsreader bold, and every statement running the full body measure so
nothing read as a statement.
The rule now, and it holds for the whole section:
· display forest — states a fact about the world
· display gold ink — states what that means for the reader
· Newsreader — carries the argument
One size each, statements on a shorter measure than the body.
------------------------------------------------------------------ */
.whyx .say-f,.whyx .say-g{
font-family:var(--disp);font-weight:400;letter-spacing:-.008em;
font-size:clamp(1.34rem,2.2vw,1.82rem);line-height:1.22;
max-width:26ch;margin:clamp(24px,2.8vw,36px) 0 0}
.whyx .say-f{color:var(--forest)}
.whyx .say-g{color:var(--gold-ink)}
.whyx .dim{max-width:62ch;margin:0 0 1.05rem}
.whyx .say-f + .dim,.whyx .say-g + .dim{margin-top:.85rem}
.whyx .say-f .pxo--big img{height:1.42em;vertical-align:-.16em}
.whyx .say-f .xin,.whyx .say-g .xin{height:max(20px,1.22em);vertical-align:-.22em}
/* the turn into the second move gets air, the close gets more, because
the close hands straight over to the equation section */
.whyx .whyx-turn{margin-top:clamp(40px,4.6vw,64px)}
.whyx .whyx-close{margin-top:clamp(30px,3.4vw,44px);max-width:30ch}
.whyx .pillpair--end{margin:clamp(26px,3vw,38px) 0 0}
@media(max-width:700px){
.whyx .say-f,.whyx .say-g{max-width:none}
}
/* ------------------------------------------------------------------
23 Sep — the roundel as the art on Why the X
Zed: the larger roundel carried in the angle of the oversize X, with
its descriptor. So it is threaded onto the X's arm — the device tilts
to the stroke, the label stays level, because the mark is the art and
the label is the information.
The X's dominant stroke measures 53 degrees off horizontal; the mark
takes the opposite arm at -37, which is the one the upper wedge opens
along.
------------------------------------------------------------------ */
/* the roundel is inscribed in the top angle of the X. The watermark is
anchored right:-26% bottom:-18% at a fixed 900px height, so its crossing
point sits 531px left of the image's right edge and 450px above its
bottom. The circle sits on the wedge's bisector at the distance where a
circle of its own diameter just touches both arms, and it tracks the
artwork at every width rather than being placed by eye. */
.whyx .secall{top:calc(118% - 812px);bottom:auto;left:auto;
right:calc(374px - 26%);width:300px}
.whyx .secall .xcdev{transform:rotate(-37deg);transform-origin:50% 50%}
.whyx .secall .xcdev--mini .dv{font-size:214px}
.whyx .secall .ecx-w{margin-top:clamp(16px,2vw,26px)}
.whyx .secall .ecx-w b{font-size:clamp(1.08rem,1.5vw,1.3rem)}
.whyx .secall .ecx-w small{font-size:.64rem;letter-spacing:.13em}
@media(max-width:1180px){
.whyx .secall{bottom:auto;right:auto;width:auto}
.whyx .secall .xcdev{transform:none}
.whyx .secall .xcdev--mini .dv{font-size:132px}
}
/* ------------------------------------------------------------------
23 Sep — the equation resolves on one line, and it squares
Zed: squared on the brackets, and the result on the same line.
The squared goes on the RESULT, because that is where the maths puts
it: each bracket is one letter times itself, so the brackets are P²,
X² and O², and P² ✗ X² ✗ O² is (P✗O)². Squaring each printed bracket
would say something else and something wrong.
The line was reading weak, so: tighter setting, the brackets at full
strength instead of two thirds, and enough size off it to carry the
result on the same line.
------------------------------------------------------------------ */
.eqsec--art .eqbr{font-size:clamp(1.06rem,2.25vw,1.86rem);line-height:1.34;
letter-spacing:-.002em;color:#F6F3EC;flex-wrap:nowrap}
.eqsec--art .eqbr .bk{opacity:1;padding:0 .05em;font-size:1.2em}
.eqsec--art .eqbr i{padding:0 .15em}
.eqsec--art .eqbr i.mid{padding:0 .2em}
.eqsec--art .eqbr .eqx{height:.8em}
.eqsec--art .eqbr .ini{color:var(--gold);font-size:1.06em}
.eqbr .eqeq{color:var(--gold-leaf);padding:0 .3em 0 .34em;font-size:1.06em}
.eqbr .eqres{display:inline-flex;align-items:center;white-space:nowrap}
.eqbr .eqres .pxo--eq{display:inline-block;height:1.34em;margin:0 .02em}
.eqbr .eqres .pxo--eq img{height:1.34em;width:auto;display:block}
.eqbr .eqres .pxo--eq .d{display:block!important}
.eqbr .eqres .pxo--eq .l{display:none!important}
.eqbr .sq{font-family:var(--disp);color:var(--gold);font-size:.66em;
align-self:flex-start;margin:.06em 0 0 .04em;line-height:1}
.eqslab-note .nx{height:max(13px,.88em);width:auto;vertical-align:-.1em;margin:0 .01em}
@media(max-width:900px){
.eqsec--art .eqbr{flex-wrap:wrap;font-size:1.18rem}
.eqbr .eqeq{padding-left:0}
}
/* the operators inside the brackets were being shrunk by the flex line */
.eqbr i,.eqbr .eqx,.eqbr .bk,.eqbr .eqt,.eqbr .eqeq,.eqbr .eqres{flex:0 0 auto}
.eqbr .brk{flex:0 0 auto}
.eqslab-note .nx{display:inline-block}
/* ------------------------------------------------------------------
23 Sep — Why the X, to Zed's marked-up copy
His note: the relative sizes in the document are intentional and it is
ONE section that should read as one. Measured off his file, against a
body of 11.5pt: eyebrow 0.74, heading 2.13, the two statements 1.52,
and "PXO does the same job" at 0.96 — body size in forest, not a third
statement, which is what was making the middle of the section shout.
Shallower throughout, because the break into the equation is the point.
------------------------------------------------------------------ */
.whyx{padding:clamp(44px,5vw,72px) 0 clamp(40px,4.4vw,64px)}
.whyx h2{font-size:clamp(1.6rem,3.1vw,2.38rem);line-height:1.06;
max-width:19ch;margin:0}
.whyx .dim{font-size:clamp(1rem,1.24vw,1.115rem);line-height:1.58;
max-width:60ch;margin:0 0 .92rem;color:#49433C}
.whyx .say-f,.whyx .say-g{
font-family:var(--disp);font-weight:400;letter-spacing:-.006em;
font-size:clamp(1.2rem,1.9vw,1.7rem);line-height:1.2;
max-width:26ch;margin:clamp(22px,2.4vw,32px) 0 .75rem}
.whyx .say-f{color:var(--forest)}
.whyx .say-g{color:var(--gold-ink)}
/* the PXO line sits at body size, in forest */
.whyx .whyx-mk{font-family:var(--serif);font-weight:400;color:var(--forest);
font-size:clamp(1rem,1.2vw,1.07rem);line-height:1.5;
margin:clamp(20px,2.2vw,30px) 0 .55rem;max-width:44ch}
.whyx .pxo--wx{display:inline-block;vertical-align:-.2em;margin:0 .1em 0 0}
.whyx .pxo--wx img{height:1.62em;width:auto;display:block}
.whyx .whyx-hinge{font-weight:400;color:var(--gold-ink)}
.whyx .whyx-hinge .xin{height:max(17px,1.02em);vertical-align:-.16em}
.whyx .whyx-close{margin-top:clamp(24px,2.8vw,36px);max-width:30ch}
.whyx .pillpair--end{margin:clamp(24px,2.6vw,34px) 0 0}
/* the watermark carries the whole section now, not a corner of it */
.whyx .sec-x{height:min(168%,1460px);right:-12%;bottom:-24%;opacity:.1}
/* the full roundel, as on the home page, in the right-hand column */
.whyx .secall{position:absolute;z-index:3;top:50%;transform:translateY(-50%);
right:clamp(10px,2.4vw,42px);left:auto;bottom:auto;
width:clamp(230px,24vw,340px);text-align:center}
.whyx .secall .xcdev{margin:0 auto}
.whyx .secall .dv{font-size:clamp(230px,24vw,340px)}
.whyx .secall-w{display:block;margin-top:clamp(16px,1.8vw,24px)}
.whyx .secall-w b{font-family:var(--serif);font-weight:400;color:var(--forest);
font-size:clamp(1.02rem,1.36vw,1.18rem);display:block}
.whyx .secall-w small{font-family:var(--sans);font-weight:600;color:var(--grey);
font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;display:block;
margin-top:.3rem;line-height:1.5}
.whyx .secall-w .ecx-x{height:max(16px,1.06em);vertical-align:-.16em;margin:0 .05em}
@media(max-width:1180px){
.whyx .secall{position:static;transform:none;width:auto;
margin:clamp(28px,3.4vw,44px) 0 0;padding:0}
.whyx .secall .dv{font-size:200px}
.whyx .secall-w{text-align:left}
.whyx .say-f,.whyx .say-g{max-width:none}
}
/* the mark was rendering both ground variants stacked again */
.whyx .pxo--wx .d{display:none}
.whyx .pxo--wx .l{display:block}
.whyx h2{margin:0 0 clamp(16px,1.8vw,24px)}
/* ------------------------------------------------------------------
23 Sep — the equation wallpaper, lightened to the hero
Zed: we are losing the art, it is too dark against the hero, and
lifting it lifts the section. The hero runs this same artwork on the
forest ground with no wash at all; the equation was carrying .62 to
.72. Roughly halved, so the paint comes back and the chalk still reads.
------------------------------------------------------------------ */
.eqsec--art::before{
background:linear-gradient(168deg,rgba(19,39,32,.34) 0%,rgba(19,39,32,.24) 44%,
rgba(19,39,32,.44) 100%)}
/* ------------------------------------------------------------------
23 Sep — corrections
Zed: stop breaking a headline over two lines where one will do and the
break is not a beat. The statements were on a 26ch measure, which was
snapping "You are not a job title. You are a variable." mid-sentence.
Statements now share the body's measure, so the section has one right
edge and every break falls where the sentence breathes.
And the X is a watermark for the WHOLE section, not a corner of it.
------------------------------------------------------------------ */
.whyx .say-f,.whyx .say-g{max-width:60ch}
.whyx .whyx-close{max-width:46ch}
.whyx h2{max-width:26ch}
.whyx .sec-x{height:auto;width:min(150%,2100px);
left:50%;top:50%;right:auto;bottom:auto;
transform:translate(-50%,-50%);opacity:.085}
@media(max-width:820px){
.whyx .sec-x{width:190%;opacity:.07}
}
/* ------------------------------------------------------------------
23 Sep — three corrections on Why the X
1. The roundel's centre. Every box in the device is concentric, but
the painted X's ink sits 9.3% of its own height above its canvas
centre — the strokes are top-heavy and the tail is thin — so the
mark beneath it read low. The X is nudged down onto its optical
centre, and the PXO mark by the 1.7%/3% its own artwork is out.
This is a fault in the device, so it corrects every roundel.
2. The descriptor no longer reflows. Each phrase is now unbreakable,
so it can never split "three / minutes" again, and the line count
changes only at a breakpoint rather than continuously.
3. The watermark was too faint to see.
------------------------------------------------------------------ */
.xcdev .rnd-x{transform:translate(-50%,calc(-50% + .0547em))}
.xcdev .rnd-c{transform:translate(calc(-50% + .004em),calc(-50% - .0043em))}
.ecx-w small .nb,.secall-w small .nb,.stg2-note .nb{white-space:nowrap}
.ecx-w small,.secall-w small{text-wrap:pretty}
/* the roundel comes in from the edge, and the X is visible */
.whyx .secall{right:clamp(28px,5.2vw,96px)}
.whyx .sec-x{opacity:.15}
/* Zed: on minimisation, only shifts that cannot be engineered away.
The roundel columns were sized in vw, so they shrank continuously and
the descriptor rewrapped somewhere around 1300px. Above the layout
breakpoint they are now fixed in pixels, so nothing inside them moves
at all as the window narrows; the only change is the one at the
breakpoint itself, where the column has to leave its row. */
@media(min-width:1181px){
.whyx .secall{width:300px}
.whyx .secall .dv{font-size:300px}
}
@media(min-width:621px){
.endcta .ec-hero .ecx{width:124px}
.endcta .ec-hero .xcdev--mini .dv{font-size:124px}
}
/* the label never breaks across lines, and a separator never orphans */
.ecx-w b,.secall-w b{white-space:nowrap}
/* ------------------------------------------------------------------
23 Sep — Why the X, Zed's rulings on the artifact
The roundel stands upright: the -37 degree tilt was a leftover from
the mini version and it was the wonk, not the centring. Its descriptor
centres under it, as the brand sets it everywhere else. The job-title
wallpaper is out — at the scale the section's portrait shape allows it
was barely visible — so the big X stands as the art exactly as before.
The turn takes the gold alongside the close.
------------------------------------------------------------------ */
.whyx .secall .xcdev{transform:none}
.whyx .secall,.whyx .secall .secall-a,.whyx .secall-w,
.whyx .secall-w b,.whyx .secall-w small{text-align:center}
.whyx .secall .secall-a{align-items:center}
/* ------------------------------------------------------------------
23 Sep — Census, two corrections
1. The form now has a ground of its own. It was forest-deep, sitting
between a forest-deep artwork section and a forest one, so the
instrument you are meant to fill in read as more of the same wall.
It is the one light band on the page, which is also how a form
reads best.
2. "Why we are counting" was two tiers below the rest of the site.
Measured: the column labels at 10.9px against the eyebrow standard
of 14, and the column bodies at 13.8px against the body standard of
17.9 — 77% of body, a tier that is not in the scale. Both back on
the scale.
------------------------------------------------------------------ */
.cinst--deep{background:var(--bone-2)}
.cinst--deep .cinst-form{background:#FFF;border:1px solid rgba(28,58,48,.15);
box-shadow:0 16px 44px rgba(28,58,48,.10)}
/* Zed: keep them at the bigger size. These are column headings rather than
eyebrows, so they take a tier of their own — a step above the eyebrow
scale, in the label face and weight. */
.cwhy .cw-n{font-size:clamp(.94rem,1.2vw,1.04rem);letter-spacing:.15em;
line-height:1.3;margin-bottom:.8rem}
/* :not(.cw-n) because the subhead is also a — without it the body rule
was overriding the label's family and weight, and the subheads were
rendering in Newsreader 400 instead of Instrument Sans 700 */
.cwhy .cw p:not(.cw-n){font-family:var(--serif);font-weight:400;
font-size:clamp(1rem,1.24vw,1.115rem);line-height:1.58;color:var(--bone-dim)}
/* ------------------------------------------------------------------
23 Sep — the eX sub-section, Zed's pick
The turn becomes the sub-section's headline rather than its footnote,
so the reader meets the position first and the reasoning second. The
type performs the argument: the prefix that was a subtraction is
struck and grey, the prefix that multiplies takes the gold at size.
Every ex in the copy carries the same mark, so the two letters the
paragraph is about are the two letters you see. It closes on Share.
Solve. Become. — which lands on the same verb the headline ends on.
------------------------------------------------------------------ */
.cwhy .exBlock{display:block;border-top:1px solid rgba(244,241,234,.20);
margin-top:clamp(34px,4vw,54px);padding-top:clamp(30px,3.4vw,44px)}
.exH{font-family:var(--disp);font-weight:400;font-size:clamp(1.74rem,3.3vw,2.82rem);
line-height:1.1;letter-spacing:-.012em;margin:0 0 clamp(20px,2.4vw,30px)}
.exH .l1,.exH .l2{display:block}
.exH .l1{color:#93A096}
.exH .was{font-weight:400;position:relative}
.exH .was::after{content:"";position:absolute;left:-.06em;right:-.06em;top:.55em;
height:2px;background:#93A096;opacity:.9}
.exH .l2{color:var(--bone);margin-top:.1em}
.exH .now{font-weight:400;color:var(--gold);font-size:1.28em}
.exH .l2 i{font-style:italic;color:var(--gold-leaf)}
.exArg{max-width:72ch;margin:0 0 clamp(26px,3vw,38px)}
.exArg .exc{font-style:normal;font-weight:600;color:var(--bone)}
.exArg .exc b{font-weight:600;color:var(--gold)}
.exArg .exm{font-weight:600;color:var(--gold)}
.exM{font-family:var(--disp);font-weight:400;color:var(--gold-leaf);
font-size:clamp(1.18rem,1.9vw,1.62rem);line-height:1.22;margin:0;
padding-top:clamp(18px,2vw,26px);border-top:1px solid rgba(244,241,234,.14);
max-width:34ch}
@media(max-width:700px){.exArg{max-width:none}}
/* ------------------------------------------------------------------
23 Sep — Peer Forums, to Zed's doc
The section heading takes the same two-tier treatment as the heroes:
the subject in the heading, the argument in the gold line under it.
Testimonials and placeholder slots are out for the 2.0 launch.
------------------------------------------------------------------ */
.resolve--sec{font-family:var(--disp);font-weight:400;color:var(--gold-ink);
font-size:clamp(1.34rem,2.2vw,1.82rem);line-height:1.18;letter-spacing:-.008em;
margin:.55rem 0 clamp(20px,2.4vw,30px);max-width:30ch}
.band-forest .resolve--sec,.band-deep .resolve--sec{color:var(--gold-leaf)}
.resolve--sec .xin{height:max(20px,1.16em);vertical-align:-.2em}
.pfmore{font-family:var(--serif);font-size:clamp(1rem,1.24vw,1.115rem);
color:var(--bone-dim);margin:clamp(20px,2.4vw,30px) 0 0}
.pfmore a{color:var(--gold-leaf);text-decoration:none;border-bottom:1px solid rgba(227,183,51,.4)}
.pfmore a:hover{border-bottom-color:var(--gold-leaf)}
/* ------------------------------------------------------------------
23 Sep — Podcast
Where to listen carries the platforms' own marks, as a podcast page
does. "After you listen" is gone: it offered LinkedIn and the Forums,
which the standard panel offers immediately below it along with four
more, so it was the same ask twice in one scroll.
------------------------------------------------------------------ */
.plats--mk{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,20px);margin-top:clamp(18px,2.2vw,28px)}
.plats--mk a{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
background:var(--bone-2);border:1px solid rgba(28,58,48,.14);border-radius:999px;
padding:.62rem 1.05rem .62rem .72rem;
font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.01em;
color:var(--forest);transition:border-color .16s ease,background .16s ease,transform .16s ease}
.plats--mk a:hover{background:#fff;border-color:var(--gold-deep);transform:translateY(-1px)}
.plats--mk svg{width:26px;height:26px;flex:0 0 auto;display:block;border-radius:7px}
.plats--mk span{white-space:nowrap}
@media(max-width:520px){.plats--mk a{font-size:.78rem}}
/* ------------------------------------------------------------------
23 Sep — Thinking, as articles
Zed: the inserts are separate excerpts from the Manifesto, standing
on their own, not links back to pages. So they are dated pieces with
artwork, running newest first at a fortnightly cadence, and the
section closes on the slogan rather than on a pill.
------------------------------------------------------------------ */
.pcgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(20px,2.4vw,32px)}
@media(max-width:980px){.pcgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.pcgrid{grid-template-columns:1fr}}
.pc{background:#FFF;border:1px solid rgba(28,58,48,.13);border-radius:8px;
overflow:hidden;display:flex;flex-direction:column;
box-shadow:0 10px 30px rgba(28,58,48,.07);
transition:transform .18s ease,box-shadow .18s ease}
.pc:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(28,58,48,.12)}
.pc-art{position:relative;aspect-ratio:16/7;background-color:var(--forest-deep);
background-size:cover;background-position:center;background-repeat:no-repeat}
.pc-art::after{content:"";position:absolute;inset:0;
background:linear-gradient(160deg,rgba(19,39,32,.18) 0%,rgba(19,39,32,.46) 100%)}
.pc-mk{position:absolute;left:clamp(14px,1.6vw,20px);bottom:clamp(12px,1.4vw,16px);z-index:2}
.pc-mk img{height:20px;width:auto;display:block;
filter:brightness(0) invert(1);opacity:.92}
.pc-in{padding:clamp(18px,2vw,26px) clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);
display:flex;flex-direction:column;gap:.5rem}
.pc-d{font-family:var(--sans);font-weight:600;font-size:.64rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--gold-ink);margin:0}
.pc h3{font-family:var(--disp);font-weight:400;color:var(--forest);
font-size:clamp(1.14rem,1.55vw,1.36rem);line-height:1.16;margin:0}
.pc h3 .xin{height:max(17px,1.02em);vertical-align:-.16em}
.pc-b{font-family:var(--serif);font-weight:400;color:var(--grey);
font-size:clamp(.95rem,1.12vw,1.02rem);line-height:1.56;margin:.15rem 0 0}
.pc-b .xin{height:max(15px,1em);vertical-align:-.14em}
.pcslog{font-family:var(--disp);font-weight:400;color:var(--gold-ink);
font-size:clamp(1.34rem,2.2vw,1.82rem);line-height:1.2;
margin:clamp(30px,3.4vw,44px) 0 0}
.pcslog .xin{height:max(20px,1.18em);vertical-align:-.2em}
/* ------------------------------------------------------------------
23 Sep — the Census stops being one long dark run
Zed: where Why we are counting meets the five stages the page turns
into one large dark block. The stages section takes the light ground,
so the page alternates: art, form, art, stages, panel. Copy that was
set for the dark ground is re-coloured here rather than anywhere else.
------------------------------------------------------------------ */
.stages--light .stg2-say .lead{color:var(--forest)}
.stages--light .stg2-say .dim{color:var(--grey)}
.stages--light .stg2-say .kick{color:var(--gold-ink)}
.stages--light .stg2-say strong,.stages--light .stg2-say b{color:var(--forest)}
.stages--light .stg2-take{color:var(--forest)}
.stages--light .stg2-take em{color:var(--gold-ink);font-style:italic}
.stages--light .stg2-note{color:var(--grey)}
.stages--light .eyebrow{color:var(--gold-ink)}
.stages--light h2{color:var(--forest)}
/* ==========================================================================
24 SEP — THE PAINTED MARK IN RUNNING PROSE, AND THE TWO "WHY THE X" EYEBROWS
========================================================================== */
/* The eyebrow mark already inverts by ground: forest on every light ground for
definition, the gold leaf on the dark. The same mark inside body copy had the
same weakness and none of the rule. It now follows it. */
main .xin{
filter:brightness(0) saturate(100%) invert(15%) sepia(18%) saturate(1200%)
hue-rotate(115deg) brightness(95%) contrast(92%);
opacity:.9;
}
.band-forest .xin,.band-deep .xin,
.bleed--forest .xin,.bleed--deep .xin,
.hero .xin,.phero .xin,.wallrun .xin,
.eqsec--art .xin,.joinus .xin{filter:none;opacity:1}
/* light cards sitting inside dark bands go back to forest, as the eyebrow does */
.band-deep .card .xin,.band-deep .cgroup .xin,.cinst .xin,
.band-forest .card .xin,.band-forest .cgroup .xin{
filter:brightness(0) saturate(100%) invert(15%) sepia(18%) saturate(1200%)
hue-rotate(115deg) brightness(95%) contrast(92%);
opacity:.9;
}
/* "WHY THE X" carried the bullet mark AND the letter, which read as a stutter.
The bullet comes off and the letter becomes the mark, so the X in the line is
the thing the section is about rather than an ornament in front of it. */
.eyebrow--mark{display:block}
.eyebrow--mark::before{content:none}
.eyebrow--mark .xin{height:max(15px,1.04em);vertical-align:-.15em;margin:0 .03em}
/* "I honestly don't know" was filed under route 4, Something plural. Not knowing
is not a plural identity. It sits with the write-in instead, where none of the
above actually means none of the above. */
.cown-or{display:flex;align-items:center;gap:.55em;margin:.85rem 0 0}
.cown-or input{flex:0 0 auto}
.cown-or label{font-family:var(--sans);font-size:.92rem;color:var(--forest);cursor:pointer}
/* it was being pulled onto the submit row by the parent's flex. Its own line,
under the write-in, where it belongs. */
.cown-or{flex:0 0 100%;width:100%;grid-column:1/-1;margin:.95rem 0 0}
/* 24 Sep — Peer Forums, the problem section. A single narrow column on bone with
the right half empty. The oversize mark fills it, at the weight the section
can carry without competing with the copy. */
.pfwhat{position:relative;overflow:hidden}
.pfwhat .sec-x{height:min(150%,880px);right:-14%;top:52%;opacity:.12}
@media(max-width:900px){.pfwhat .sec-x{opacity:.07;right:-26%}}
/* ==========================================================================
24 SEP — THINKING CARDS AS ARTICLES, AND THE PIECE PAGES
========================================================================== */
/* the whole card is the link, so the target is the card and not a word in it */
.pc-link{display:flex;flex-direction:column;flex:1 1 auto;text-decoration:none;color:inherit}
.pc-link:hover h3{color:var(--gold-ink)}
.pc-link .pc-in{flex:1 1 auto}
/* the mark now signs the banner as PXO Thinking rather than sitting there alone */
.pc-mk{display:inline-flex;align-items:center;gap:.46em;z-index:3}
.pc-mk b{font-family:var(--sans);font-weight:700;color:#FFF;opacity:.94;
font-size:.6rem;letter-spacing:.2em;text-transform:uppercase}
/* The six banners read as one image repeated, because the six source pictures
are all the same dark forest and gold. A wash on top of them lands in the
same place every time, so the colour goes into the picture itself with a
blend, and the scrim that gives the lockup its ground stays separate. */
.pc-art{isolation:isolate}
.pc-art::before{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:color}
.pc--1 .pc-art::before{background:#1C3A30}
.pc--2 .pc-art::before{background:#9A6A22}
.pc--3 .pc-art::before{background:#132720}
.pc--4 .pc-art::before{background:#7E6023}
.pc--5 .pc-art::before{background:#C09A3C}
.pc--6 .pc-art::before{background:#3F6B4A}
.pc-art::after{content:"";position:absolute;inset:0;z-index:2;
background:linear-gradient(to top,rgba(12,24,20,.74) 0%,rgba(12,24,20,.18) 34%,rgba(12,24,20,0) 60%)}
/* ---- the piece pages ---- */
.phero--piece{background-size:cover;background-position:center}
.pcp-e{display:flex;align-items:center;gap:.5em;color:var(--gold)}
.pcp-mk{height:15px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.phero--piece h1{max-width:20ch}
.phero--piece .resolve{max-width:52ch}
.pcp-d{font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--sage-light);margin-top:clamp(18px,2vw,26px)}
.pcp-body{background:var(--bone)}
.pcp-copy p{font-family:var(--serif);font-weight:400;color:var(--grey);
font-size:clamp(1.02rem,1.22vw,1.12rem);line-height:1.66;margin:0 0 1.15rem;max-width:68ch}
.pcp-copy p strong,.pcp-copy p b{color:var(--forest);font-weight:700}
.pcp-kick{font-family:var(--disp);font-weight:400;color:var(--gold-ink);
font-size:clamp(1.3rem,2.1vw,1.72rem);line-height:1.18;max-width:34ch;
margin:clamp(26px,3vw,38px) 0 0}
.pcp-src{font-family:var(--sans);font-size:.88rem;line-height:1.6;color:var(--grey);
border-top:1px solid var(--rule-bone);padding-top:clamp(18px,2vw,24px);
margin:clamp(28px,3.2vw,40px) 0 0;max-width:60ch}
.pcp-src a{color:var(--gold-ink);font-weight:600}
.pcp-cta{display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,16px);margin:clamp(20px,2.2vw,28px) 0 0}
/* the piece eyebrow carries the PXO mark itself, so the bullet comes off */
.pcp-e::before{content:none !important}
/* the bio sign-off used to be a three word label. It is now a sentence, so it
stops being set as a label: sentence case, a readable size, and the mark sized
to the line it sits on rather than to a caption. */
.biob .place--sig{text-transform:none;letter-spacing:0;font-weight:600;
font-size:clamp(.86rem,1.02vw,.95rem);line-height:1.55;max-width:46ch;
color:var(--bone-dim);margin-top:clamp(16px,1.9vw,24px)}
.biob .place--sig .pxo{display:inline-block;vertical-align:-.16em}
.biob .place--sig .pxo img{height:1.06em;width:auto}
/* the lockup was set to the line and came out too small to read as PXO */
.biob .place--sig .pxo img{height:1.55em;width:auto}
.biob .place--sig .pxo{vertical-align:-.34em;margin:0 .08em}
/* the bio panels are a dark ground but were not in the mark's ground-swap list,
so the forest lockup was being drawn on forest and only its gold X survived. */
.biob .pxo .d{display:inline-block}
.biob .pxo .l{display:none}
/* ==========================================================================
24 SEP — ABOUT: WHERE WE ARE, ON THE MAP
The whole map, uncropped, in the home map's palette. The copy sits on it,
over the Pacific and South America where the artwork is empty, at the weight
the home hero uses. The two of them are pinned where they actually are, and
the crossing rides the clear water of the North Atlantic.
========================================================================== */
.wmap{background:var(--bone);padding:0}
.wmap-frame{position:relative;width:100%;line-height:0}
.wmap-img{display:block;width:100%;height:auto}
.wmap-layer{position:absolute;inset:0;line-height:normal}
/* ---- the copy, on the water ---- */
.wmap-say{position:absolute;left:5.5%;top:43%;width:min(37%,560px);z-index:4}
.wmap-say .eyebrow{color:var(--gold-ink);margin-bottom:.7rem}
.wm-h{font-family:var(--disp);font-weight:400;color:var(--forest);
font-size:clamp(1.5rem,2.95vw,2.6rem);line-height:1.08;margin:0 0 .85rem}
.wm-so{font-family:var(--serif);font-weight:600;color:var(--forest);
font-size:clamp(.92rem,1.18vw,1.1rem);line-height:1.58;margin:0}
/* ---- the pins ---- */
.wmp{position:absolute;transform:translate(-50%,-50%);
display:flex;flex-direction:column;align-items:center;text-align:center;z-index:3}
.wmp--la{left:18.6%;top:31.8%}
.wmp--ldn{left:48.6%;top:23.1%}
.wmp-mk{position:relative;display:block;
width:clamp(46px,5.4vw,82px);height:clamp(46px,5.4vw,82px)}
.wmp-x{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:176%;height:auto;max-width:none;opacity:.95}
.wmp-h{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:66%;height:66%;object-fit:cover;border-radius:50%;
border:2px solid var(--bone);box-shadow:0 3px 12px rgba(28,58,48,.34)}
.wmp b{font-family:var(--sans);font-weight:700;color:var(--forest);
font-size:clamp(.78rem,1vw,.96rem);line-height:1;letter-spacing:.01em;margin-top:.5rem}
.wmp i{font-family:var(--sans);font-style:normal;font-weight:700;
font-size:clamp(.56rem,.7vw,.68rem);letter-spacing:.16em;text-transform:uppercase;
color:var(--gold-deep);margin-top:.26rem;white-space:nowrap}
/* ---- the crossing, out on open water ---- */
.wmp-cross{position:absolute;left:36.4%;top:25.2%;transform:translate(-50%,-50%);z-index:2}
.wmp-cross img{width:clamp(112px,15.5vw,250px);height:auto;display:block;opacity:.95}
@media(max-width:760px){
.wmap-say{position:static;width:auto;padding:clamp(22px,5vw,30px) 0 clamp(6px,2vw,14px)}
.wmap-say .wm-h{font-size:clamp(1.34rem,6vw,1.7rem)}
.wmp-mk{width:40px;height:40px}
.wmp b{font-size:.72rem} .wmp i{font-size:.5rem;letter-spacing:.1em}
}
/* the copy runs over South America at the wide end, so it takes the same bone
glow the map promise line uses on the home page: a ground, not a panel. */
.wmap-say{padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
background:radial-gradient(closest-side ellipse at 42% 50%,
rgba(244,241,234,.97) 0%,rgba(244,241,234,.92) 52%,
rgba(244,241,234,.64) 78%,rgba(244,241,234,0) 100%)}
/* Mike a touch further south, onto Los Angeles proper */
.wmp--la{top:32.8%}
/* the city line was losing itself in the painted Xs on the land */
.wmp i{color:var(--gold-ink)}
/* 2 Oct - Zed: no light shadowing anywhere, it makes the face look weak. */
/* the crossing moves right, out into the open Atlantic where the map is clear */
.wmp-cross{left:42.2%;top:31.5%}
.wmp-cross img{width:clamp(120px,17vw,280px)}
/* ==========================================================================
24 SEP — MOBILE LEGIBILITY AND TAP AREA
Audited at 390px with touch emulation. No page scrolls sideways, but a few
labels were sitting between 9.6 and 11px, which is under the readable floor
on a phone, and some inline links had a 12px tap height.
========================================================================== */
@media(max-width:620px){
.nb{font-size:11.6px !important}
.biob .rl,.pc-d,.pcp-d{font-size:11.5px !important}
.lockup .de em,.pglock .de em{font-size:11.4px !important}
.beats{font-size:11.4px !important}
.ref,.fnote{font-size:12.6px !important}
/* inline links in a sentence still need a thumb's worth of height */
.ecp-n--3 a,.foot-soc .fs,.more,.sayl,.xq-only a{
display:inline-block;padding-top:.34rem;padding-bottom:.34rem}
.ecp-n--3{line-height:1.9}
}
/* ==========================================================================
25 SEP — THE X CHECK ROUNDEL NOW ASKS
The roundel was art with a descriptor, and nothing told the reader it was a
door. It gets a button of its own beneath it, and a slow pulse so the eye
finds it without the page shouting.
========================================================================== */
.ecx-go{
display:inline-flex;align-items:center;gap:.4em;margin-top:.7rem;
background:var(--gold);color:var(--forest-deep);
font-family:var(--sans);font-weight:700;
font-size:clamp(.66rem,.8vw,.75rem);letter-spacing:.14em;text-transform:uppercase;
padding:.62rem 1.1rem;border-radius:999px;white-space:nowrap;
box-shadow:0 0 0 0 rgba(227,183,51,.55);
animation:ecxpulse 2.8s ease-out infinite;
}
.ecx-gx{height:1.52em;width:auto;display:inline-block;vertical-align:-.36em;
filter:brightness(0) saturate(100%) invert(9%) sepia(24%) saturate(1400%)
hue-rotate(118deg) brightness(94%) contrast(96%)}
@keyframes ecxpulse{
0% {box-shadow:0 0 0 0 rgba(227,183,51,.55)}
70% {box-shadow:0 0 0 14px rgba(227,183,51,0)}
100% {box-shadow:0 0 0 0 rgba(227,183,51,0)}
}
.ecx:hover .ecx-go{background:var(--gold-deep)}
@media (prefers-reduced-motion:reduce){.ecx-go{animation:none}}
/* ==========================================================================
25 SEP — THE MAP SECTION: LEGIBILITY AND THE EYEBROW LOCKUP
The copy sits on painted artwork, so weight alone was not carrying it. It
takes the glow the subhead already uses, and another step of weight.
========================================================================== */
/* 2 Oct - Zed's call: the glow was making the copy look wrong. The weight
carries it on its own. */
.xmap-lead,.xmap-tt .xcopy p{
font-weight:600;color:var(--forest-deep);
}
.xmap-lead{font-size:clamp(1.04rem,1.34vw,1.2rem);line-height:1.48}
.xmap-tt .xcopy p{font-size:clamp(1.02rem,1.3vw,1.17rem);line-height:1.5}
.xmap-lead b{color:#6B5018;font-weight:700}
/* the lockup in the eyebrow was sitting low and reading small against a line
of caps. It comes up onto the line and takes more of it. */
main .xmap .eyebrow--plain .pxo--eb{vertical-align:-.17em;margin:0 .2em 0 .16em}
main .xmap .eyebrow--plain .pxo--eb img{height:1.86em}
main .xmap .eyebrow--plain{font-size:clamp(.78rem,.95vw,.88rem);letter-spacing:.2em;
color:var(--forest);font-weight:700}
/* 25 Sep — the corporate line now ends on friction, so the equation ends on its
opposite. Set in the display face, in gold, so it reads as the answer rather
than another term. */
.eqbr .eqflow{
display:inline-flex;align-items:baseline;white-space:nowrap;flex:0 0 auto;
font-family:var(--disp);font-weight:400;color:var(--gold);
font-size:.92em;letter-spacing:0;margin-left:.34em;
}
/* the stage select was reading as a line of text. It gets a chevron and a
ground of its own so it reads as a control. */
.fld--sel{
appearance:none;-webkit-appearance:none;
background-color:#FFF;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231C3A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;
padding-right:40px;cursor:pointer;
}
.fld--sel:focus{outline:2px solid var(--gold);outline-offset:1px}
/* the line now carries a result as well as the equation, so it comes down a
step to stay on one line, which is the whole point of it */
.eqsec--art .eqbr,.eqslab .eqbr{font-size:clamp(.92rem,1.86vw,1.54rem)}
.eqbr .eqflow{font-size:1em;margin-left:.42em}
/* 25 Sep — the Census stages section now lists the five rather than arguing a
verb. A numbered list, set as a reference rather than as prose. */
.stg2-list{list-style:none;counter-reset:st;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;
display:flex;flex-direction:column;gap:clamp(11px,1.3vw,16px)}
.stg2-list li{counter-increment:st;position:relative;padding-left:2.5rem;
font-family:var(--serif);font-weight:400;color:var(--forest);
font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.52;max-width:58ch}
.stg2-list li::before{content:counter(st);position:absolute;left:0;top:.05em;
width:1.72rem;height:1.72rem;border-radius:50%;
background:var(--gold);color:var(--forest-deep);
font-family:var(--sans);font-weight:700;font-size:.8rem;
display:flex;align-items:center;justify-content:center}
.stg2-list li b{font-weight:700;color:var(--forest-deep)}
.stg2-p{font-family:var(--serif);color:var(--grey);
font-size:clamp(.98rem,1.16vw,1.06rem);line-height:1.58;
margin:clamp(18px,2vw,26px) 0 0;max-width:62ch}
.stages--light .stg2-p{color:var(--forest)}
/* the same call, used standalone under a roundel that is not in the panel */
.ecx-go--solo{margin-top:1rem;text-decoration:none}
/* ==========================================================================
25 SEP — THE PIECE PAGES READ AS ARTICLES
Each piece carries the masthead of the card it was opened from, and the
card's own colour washes its header, so the click lands somewhere familiar.
========================================================================== */
.pcp-mast{display:inline-flex;align-items:center;gap:.7em;
margin:0 0 clamp(16px,2vw,24px)}
.pcp-mast img{height:clamp(22px,2.3vw,30px);width:auto;display:block}
.pcp-mast b{font-family:var(--sans);font-weight:700;color:var(--gold);
font-size:clamp(.62rem,.76vw,.72rem);letter-spacing:.22em;text-transform:uppercase}
.phero--piece{position:relative;isolation:isolate}
.phero--piece::before{content:"";position:absolute;inset:0;z-index:0;mix-blend-mode:color}
.pcp--1::before{background:#1C3A30} .pcp--2::before{background:#9A6A22}
.pcp--3::before{background:#132720} .pcp--4::before{background:#7E6023}
.pcp--5::before{background:#C09A3C} .pcp--6::before{background:#3F6B4A}
.phero--piece::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(to top,rgba(12,24,20,.80) 0%,rgba(12,24,20,.40) 45%,rgba(12,24,20,.18) 100%)}
.phero--piece .wrap{position:relative;z-index:2}
.pcp-e{margin-bottom:.4rem}
/* the masthead is the page's only lockup now, so it takes the mark and stands
at the top of the article the way a paper's does */
.pcp-mast{text-decoration:none;gap:.62em;margin:0 0 clamp(20px,2.4vw,30px)}
.pcp-mast img{height:clamp(19px,2vw,26px);width:auto;display:block}
.pcp-mast b{color:var(--gold);letter-spacing:.22em}
.pcp-mast:hover b{color:var(--bone)}
.phero--piece .pcp-e{color:var(--sage-light);letter-spacing:.2em}
/* ==========================================================================
26 SEP — THE PODCAST PAGE IS A TRAILER, NOT A SECOND SITE
The show has its own brand and its own home. This page carries the artwork,
says what it is, and hands over. The episode list belongs at the other end.
========================================================================== */
.pods{padding:clamp(40px,5vw,72px) 0}
.pods-g{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
gap:clamp(28px,4.4vw,68px);align-items:center}
.pods-art{position:relative;padding:0 clamp(10px,2vw,28px) clamp(34px,4vw,56px) 0}
.pods-art img{display:block;width:100%;height:auto;border-radius:10px;
box-shadow:0 22px 60px rgba(0,0,0,.42)}
.pods-ep{position:absolute;right:0;bottom:0;width:52%;
border:3px solid var(--forest-deep);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.pods-say .lead{max-width:40ch}
.pods-say .dim{max-width:52ch;margin-top:1rem}
.pods-cta{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;
margin:clamp(22px,2.6vw,32px) 0 0}
.pods-n{font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--sage-light);margin:0}
.pods-sub{font-family:var(--serif);color:var(--bone-dim);
font-size:clamp(.95rem,1.1vw,1.04rem);margin:clamp(26px,3vw,38px) 0 .9rem}
.pods .plats--mk a{background:rgba(244,241,234,.07);border-color:rgba(244,241,234,.18);
color:var(--bone)}
.pods .plats--mk a:hover{background:rgba(244,241,234,.14)}
@media(max-width:900px){
.pods-g{grid-template-columns:1fr;gap:clamp(24px,5vw,34px)}
.pods-art{max-width:420px;padding-bottom:clamp(30px,8vw,44px)}
}
/* the episode cover was beating its own rule on specificity and covering the show cover */
.pods-art .pods-ep{width:52%;height:auto}
/* ==========================================================================
26 SEP — PEER FORUMS HANDS OVER
The forums have their own site. This page says what the room is, gives the
three facts that decide whether you want one, and opens the door.
========================================================================== */
.ppf{padding:clamp(40px,5vw,72px) 0}
.ppf-g{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
gap:clamp(30px,4.6vw,72px);align-items:start}
.ppf-facts{list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;
display:flex;flex-direction:column;gap:.7rem}
.ppf-facts li{position:relative;padding-left:1.9rem;
font-family:var(--serif);color:var(--forest);
font-size:clamp(1rem,1.18vw,1.08rem);line-height:1.5}
.ppf-facts li::before{content:"";position:absolute;left:0;top:.2em;
width:1.45em;height:1.24em;background:url("img/pxo-x-real.png") center/contain no-repeat;
filter:brightness(0) saturate(100%) invert(15%) sepia(18%) saturate(1200%)
hue-rotate(115deg) brightness(95%) contrast(92%);opacity:.9}
.ppf-facts li b{font-weight:700;color:var(--forest-deep)}
.ppf-econ{margin-top:clamp(20px,2.3vw,28px);max-width:56ch}
.ppf-door{background:var(--forest);color:var(--bone);border-radius:10px;
padding:clamp(24px,2.8vw,36px);box-shadow:0 18px 44px rgba(28,58,48,.18)}
.ppf-door-e{font-family:var(--sans);font-weight:700;color:var(--gold);
font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;margin:0}
.ppf-door-h{font-family:var(--disp);font-weight:400;color:var(--bone);
font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.08;margin:.7rem 0 0}
.ppf-door-d{font-family:var(--serif);color:var(--bone-dim);
font-size:clamp(.94rem,1.08vw,1.02rem);line-height:1.54;margin:.9rem 0 1.3rem}
.ppf-door-n{font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--sage-light);margin:.7rem 0 0}
@media(max-width:900px){.ppf-g{grid-template-columns:1fr;gap:clamp(26px,5vw,36px)}}
/* The four stages stay off the mini roundel. At 124px the labels sit on top of
the centre lockup, which is why they were hidden in the first place. The full
dial carries them wherever it runs at size. Zed's call whether to enlarge it. */
/* 2 Oct - the pop-up's second call is gone. One ask per page now, so the
bolted-on X Check pill and its rules came out with it. */
/* 26 Sep — run on to the next piece rather than going back to the index */
.pcp-nav{display:flex;justify-content:space-between;gap:clamp(16px,2.4vw,40px);
border-top:1px solid var(--rule-bone);margin:clamp(30px,3.6vw,44px) 0 0;
padding-top:clamp(18px,2.2vw,26px)}
.pcp-nav a{flex:1 1 0;text-decoration:none;display:flex;flex-direction:column;gap:.24rem;
max-width:46%}
.pcp-next{text-align:right;align-items:flex-end}
.pcp-nav span{font-family:var(--sans);font-weight:700;font-size:.64rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.pcp-nav b{font-family:var(--disp);font-weight:400;color:var(--forest);
font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.18}
.pcp-nav a:hover b{color:var(--gold-ink)}
.pcp-next span::after{content:" \2192"}
.pcp-prev span::before{content:"\2190 "}
@media(max-width:620px){.pcp-nav{flex-direction:column;gap:18px}
.pcp-nav a{max-width:none} .pcp-next{text-align:left;align-items:flex-start}}
/* the ghost pill is drawn for dark grounds. On the piece pages it sits on bone,
where its bone text and bone border were both invisible. */
.pcp-body .cta--ghost{color:var(--forest);border-color:rgba(28,58,48,.34)}
.pcp-body .cta--ghost .mki{filter:brightness(0) saturate(100%) invert(15%) sepia(18%)
saturate(1200%) hue-rotate(115deg) brightness(95%) contrast(92%)}
.pcp-body .cta--ghost:hover{border-color:var(--forest);background:rgba(28,58,48,.05)}
/* ==========================================================================
27 SEP — THE TWO OF US BACK ON THE PODCAST COVER
The cover artwork now carries both headshots in the clear band above the
byline. That band is where the episode card used to land, so the card moves
out into the art box's own right and bottom padding and overhangs the corner
instead. The 13% right padding is what keeps the card's left edge clear of
the right-hand circle at every width, so the two numbers move together or
not at all.
========================================================================== */
.pods-art{padding:0 13% clamp(34px,4vw,56px) 0}
.pods-art .pods-ep{width:42%}
@media(max-width:900px){
.pods-art{max-width:460px;padding:0 13% clamp(30px,8vw,44px) 0}
}
/* ==========================================================================
29 SEP — LINKEDIN ON THE ABOUT BIOS
Same official mark as the footer, same treatment, sitting under each
sign-off line rather than beside the name. One LinkedIn mark on the site,
not two.
========================================================================== */
.biosoc{margin:.85rem 0 0}
.biosoc .fs{display:inline-flex;align-items:center;gap:.46rem;text-decoration:none;
color:#9AA79F;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
font-weight:600;transition:color .15s ease}
.biosoc .fs svg{width:19px;height:19px;flex:0 0 auto;border-radius:3px;display:block}
.biosoc .fs:hover,.biosoc .fs:focus-visible{color:var(--gold-leaf)}
.biosoc .fs:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
/* ==========================================================================
29 SEP — 404
A 404 during a launch is a first impression, not an error state. Forest
ground like a hero, the painted mark in the headline, and the fastest way
back in is the X Check rather than the home page.
========================================================================== */
.e4{background:var(--forest);color:var(--bone);
padding:clamp(70px,11vw,150px) 0 clamp(60px,9vw,120px);position:relative;overflow:hidden}
.e4::after{content:"";position:absolute;right:-9%;top:-14%;width:min(58%,720px);aspect-ratio:764/647;
background:url(img/pxo-x-real.png) no-repeat center/contain;opacity:.07;pointer-events:none}
.e4-g{position:relative;z-index:1}
.e4-say{max-width:62ch}
.e4 .eyebrow{color:var(--gold)}
.e4 .rule{border-color:rgba(227,183,51,.5);max-width:64px;margin:1rem 0 1.6rem}
.e4 h1{font-family:var(--disp);font-weight:400;
font-size:clamp(2.6rem,6vw,3.3rem);line-height:1.02;margin:0 0 1.1rem}
.e4-x{height:.78em;width:auto;vertical-align:-.04em;margin:0 .02em}
.e4 .lead{font-size:clamp(1.05rem,1.5vw,1.31rem);line-height:1.5;max-width:40ch;margin:0 0 1rem}
.e4 .dim{color:var(--bone-dim);max-width:52ch;margin:0 0 clamp(26px,3vw,36px)}
.e4-cta{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center}
.e4 .cta--ghost{color:var(--bone);border-color:rgba(244,241,234,.38)}
.e4 .cta--ghost:hover{border-color:var(--gold);color:var(--gold)}
.e4-else{margin:clamp(30px,3.6vw,44px) 0 0;color:var(--sage-light);
font-size:.95rem;line-height:1.9}
.e4-else a{color:var(--bone);text-decoration:underline;
text-decoration-color:rgba(227,183,51,.6);text-underline-offset:.18em}
.e4-else a:hover{color:var(--gold)}
/* ==========================================================================
29 SEP — TWO FAULTS FOUND IN A REAL RUN THROUGH THE X CHECK
1. The pill under the roundel was a span. It read as the primary call,
which is exactly why a reader reaches for it, and it did nothing. It is
a button now, so it needs the button reset the site gives its pills.
2. The report panel on the thank-you page was written for a light ground
and lands on the forest hero. Forest heading on forest, grey body on
forest. The mark inverts by ground everywhere on this site, and so
should this: bone heading, bone-dim body, gold eyebrow.
========================================================================== */
button.ecx-go{border:0;font:inherit;cursor:pointer;
font-family:var(--sans);font-weight:700;
font-size:clamp(.66rem,.8vw,.75rem);letter-spacing:.14em;text-transform:uppercase}
button.ecx-go--solo{margin-top:1rem}
.xrep{background:rgba(227,183,51,.09);border-color:rgba(227,183,51,.42)}
.xrep-e{color:var(--gold)}
.xrep-h{color:var(--bone)}
.xrep-s{color:var(--bone-dim)}
/* =====================================================================
29 SEP — THE PLAYLIST PLAYS ON THE PAGE
Tom's Transistor playlist, inset in the show band so the episodes can
be heard without leaving. The platform row stops being the way to
listen and becomes the way to subscribe.
===================================================================== */
.pods-play{margin-top:clamp(34px,4.4vw,58px)}
.pods-play .eyebrow{margin-bottom:.75rem}
.pods-play-f{background:var(--bone);border:1px solid rgba(227,183,51,.42);
border-radius:14px;overflow:hidden;line-height:0;
box-shadow:0 18px 44px rgba(0,0,0,.24)}
.pods-play iframe{display:block;width:100%;height:390px;border:0}
@media(max-width:700px){ .pods-play iframe{height:430px} }
/* =====================================================================
2 OCT — THE X CHECK PROMPT, FLOATING
Zed's call: no panel, no mist, no yellow box. The roundel is the whole
brand object and it carries the legend and all four stage lockups, which
were only ever hidden because the labels were hanging below their anchors
rather than centring on them. Type is centred under the dial, the ground
underneath is read on scroll so the words stay legible over both the
forest and the bone sections, and the device keeps its own slow turn.
Just over half the footprint of the box it replaces.
===================================================================== */
.xcp{
position:fixed;right:clamp(16px,2.6vw,34px);
--lift:0px;
bottom:calc(clamp(16px,2.6vw,32px) + var(--lift));
z-index:60;width:212px;text-align:center;
font-family:var(--sans);
opacity:0;transform:translateY(10px);
/* slow. It should arrive about when you finish the opening paragraph. */
transition:opacity 1.05s ease,transform 1.05s cubic-bezier(.22,.68,.3,1);
}
.xcp.is-up{opacity:1;transform:none}
.xcp-go{display:block;text-decoration:none}
/* the device, whole */
.xcp-dev{display:block;width:138px;height:138px;margin:0 auto;position:relative;
filter:drop-shadow(0 12px 26px rgba(0,0,0,.42))}
.xcdev--pop{display:block;padding:0}
.xcdev--pop .dv{font-size:138px;cursor:pointer}
.xcdev--pop .rl{display:flex}
.xcdev--pop .cue{display:none}
.xcdev--pop .lg{font-size:13.8px;letter-spacing:4px}
/* 2 Oct - Zed: the legend goes white, which also puts it in step with the
end-CTA roundel, and the brush X in the bezel takes gold instead of the
muddy bronze it was sharing with the tick ring, where it was getting lost.
On a bone or gold band both flip to forest, which is exactly what the
end-CTA roundel already uses on its bone panel. */
.xcdev--pop{--bezt:var(--bone); --qk:var(--gold-leaf)}
.xcp.on-light .xcdev--pop{--bezt:var(--forest); --qk:var(--forest)}
/* the words */
.xcp-ask{display:block;font-family:var(--disp);font-size:1.12rem;line-height:1.14;
margin:.85rem 0 .45rem;color:var(--bone);
text-shadow:0 1px 3px rgba(0,0,0,.5),0 0 14px rgba(0,0,0,.42)}
.xcp-cta{display:block;font-size:.65rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold-leaf);
text-shadow:0 1px 3px rgba(0,0,0,.55)}
.xcp-gx{height:1.46em;width:auto;display:inline-block;vertical-align:-.34em;margin:0 .02em}
.xcp-go:hover .xcp-cta{color:var(--gold)}
/* over a bone section the type flips rather than hiding behind a panel */
.xcp.on-light .xcp-ask{color:var(--forest);text-shadow:none}
.xcp.on-light .xcp-cta{color:var(--forest);text-shadow:none}
/* the same forest the end-CTA pill already uses, so the two match */
.xcp.on-light .xcp-gx{filter:brightness(0) saturate(100%) invert(9%) sepia(24%)
saturate(1400%) hue-rotate(118deg) brightness(94%) contrast(96%)}
.xcp-x{
position:absolute;top:-2px;right:-4px;width:26px;height:26px;border:0;
background:none;color:var(--bone);opacity:.55;font-size:1.05rem;line-height:1;
cursor:pointer;border-radius:50%;z-index:3;transition:opacity .16s}
.xcp-x:hover{opacity:1;background:rgba(0,0,0,.22)}
.xcp.on-light .xcp-x{color:var(--forest)}
.xcp.on-light .xcp-x:hover{background:rgba(28,58,48,.12)}
/* the pulse. Three on arrival, then it settles; one more at the foot of the
page. Never a loop, which would be nagging without using words. */
@keyframes xcpbeat{
0% {box-shadow:0 0 0 0 rgba(227,183,51,.50)}
70% {box-shadow:0 0 0 20px rgba(227,183,51,0)}
100%{box-shadow:0 0 0 0 rgba(227,183,51,0)}
}
.xcp .xcp-dev::after{content:"";position:absolute;inset:6px;border-radius:50%;
pointer-events:none}
.xcp.is-beat .xcp-dev::after{animation:xcpbeat 2.8s ease-out 3}
.xcp.is-beat1 .xcp-dev::after{animation:xcpbeat 2.8s ease-out 1}
@media(max-width:700px){
.xcp{width:196px;right:14px;bottom:16px}
.xcp-dev{width:122px;height:122px}
.xcdev--pop .dv{font-size:122px}
.xcdev--pop .lg{font-size:12.6px;letter-spacing:3.6px}
.xcp-ask{font-size:1.04rem;margin-top:.75rem}
}
@media(prefers-reduced-motion:reduce){
.xcp{transition:opacity .3s;transform:none}
.xcp .xcp-dev::after{animation:none !important}
.xcdev--pop .bez{animation:none}
}
/* 2 Oct — the prompt steps aside over the map band, where the page already
carries the big lockup and a painted ground of its own. It does not go
away, it gets out of the way. */
.xcp.is-aside{opacity:0;transform:translateX(26px);pointer-events:none}
@media(prefers-reduced-motion:reduce){ .xcp.is-aside{transform:none} }
/* =====================================================================
2 OCT — THE CENSUS PROMPT
Its own object, not another roundel. The dial measures where you are;
the census is a form you put a mark on, so the device is the actual
form reduced, with the brush X struck across it. Illegible by design:
what has to read is "a form, and somebody has marked it".
The card is a snapshot of the live census page, cropped just below the
"none of the above" line so the sheet sits at a better proportion and the X
fills it. If that form changes, img/pxo-census-card.png has to be
regenerated from the live page and re-cropped to the same point.
===================================================================== */
.xcp--cen{width:198px}
.cdev{display:block;position:relative;width:124px;height:168px;margin:0 auto;
filter:drop-shadow(0 13px 28px rgba(0,0,0,.44))}
.cdev-card{position:absolute;inset:0;border-radius:3px;
background:url('img/pxo-census-card.png') top center/100% auto no-repeat var(--bone)}
/* on a bone section the sheet loses its edge, so it takes a keyline there */
.xcp.on-light .cdev-card{box-shadow:inset 0 0 0 1px rgba(28,58,48,.30)}
/* the X struck across the middle, breaking both edges */
.cdev-mk{position:absolute;left:-17%;top:20%;width:134%;height:64%;
background:url('img/pxo-x-real.png') center/contain no-repeat;pointer-events:none}
.xcp--cen .xcp-ask{margin-top:.9rem}
/* the pulse rings the sheet rather than a disc */
.xcp--cen .xcp-dev::after{content:none}
.xcp--cen .cdev::after{content:"";position:absolute;inset:4px;border-radius:3px;
pointer-events:none}
.xcp--cen.is-beat .cdev::after{animation:xcpbeat 2.8s ease-out 3}
.xcp--cen.is-beat1 .cdev::after{animation:xcpbeat 2.8s ease-out 1}
@media(max-width:700px){
.xcp--cen{width:182px}
.cdev{width:112px;height:152px}
}
@media(prefers-reduced-motion:reduce){
.xcp--cen .cdev::after{animation:none !important}
}
/* ---------- The Dispatch: the issue home. 9 Oct 2026 ----------
Lives on thinking.html at #dispatch, above the signup block, because
that is the address the newsletter itself points at. Class prefix dsp,
because .disp was already taken by the signup grid. */
.dsp{padding:clamp(46px,6vw,82px) 0;background:var(--bone)}
.dsp h2{margin:0 0 .4rem;font-size:clamp(1.5rem,2.8vw,2.15rem)}
.dsp-sub{color:var(--grey);max-width:58ch;margin:0 0 2rem}
.iss{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
gap:clamp(22px,3.2vw,46px);align-items:start;
background:var(--bone-2);border:1px solid var(--rule-bone);padding:clamp(20px,2.6vw,34px)}
.iss-art{display:block;width:100%;height:auto;border:1px solid var(--rule-bone)}
.iss-d{font-family:var(--sans);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
color:var(--gold-ink);font-weight:700;margin:0 0 .55rem}
.iss h3{margin:0 0 .7rem;font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.2}
.iss p{margin:0 0 .9rem}
.iss ul{margin:0 0 1.3rem;padding:0 0 0 1.05rem;color:var(--grey)}
.iss li{margin:0 0 .3rem}
.iss-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 1.5rem}
.iss-note{font-size:.88rem;line-height:1.55;color:var(--grey-soft);margin:0}
@media(max-width:760px){
.iss{grid-template-columns:1fr}
.iss-art{max-width:460px}
}