:root{ --sky:#EAF1F8; --cloud:#F7FAFD; --white:#FFFFFF; --magenta:#D421BB; --magenta-ink:#D0008C; --current:#2FA8E0; --current-ink:#17698F; --ink:var(--iq-ink,#2F5A8C); --ink-soft:#5A5470; --hair:rgba(47,90,140,.12); --display:"Jost",system-ui,-apple-system,sans-serif; --serif:"Jost",system-ui,-apple-system,sans-serif; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--cloud);color:var(--ink); font-family:var(--display);font-weight:300;line-height:1.66;font-size:16px} img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:1180px;margin:0 auto} /* ── the mark and the ways through ───────────────────── */ .top{position:sticky;top:0;z-index:20;background:rgba(247,250,253,.95); backdrop-filter:saturate(1.4) blur(10px)} .top .bar{padding:15px 20px 4px;text-align:center} .wordmark{display:inline-block;text-decoration:none;font-size:15px;letter-spacing:.44em; text-transform:uppercase;font-weight:400} .wordmark i{font-style:normal;color:var(--magenta-ink)} /* IT WRAPS RATHER THAN SLIDING. It slid sideways before, and in her pane the last word sat half cut at the right edge — which reads as broken rather than as more to come. Six short words settle into two centred rows and nothing is hidden. Tested at 379 on 23 August 2026, the day it went live. */ .top .ways{flex-wrap:wrap;justify-content:center;gap:3px 14px} .top .ways li{flex:0 0 auto} @media(min-width:900px){.top .ways{gap:2px 16px}} .ways{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 16px;padding:8px 16px 12px;margin:0;list-style:none} .ways a{text-decoration:none;font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-soft);padding:5px 0;border-bottom:1px solid transparent} .ways a:hover{color:var(--magenta-ink)} .ways a[aria-current]{color:var(--magenta-ink);border-bottom-color:var(--magenta)} /* ── a picture, then its own ground. Never words over artwork ── */ .plate{background:var(--sky);overflow:hidden} .plate img{width:100%;height:100%;object-fit:cover} /* THE FRAME IS NEVER FAR FROM HER PICTURE. Every hero she has chosen is three by two. A rule further down this sheet was cutting them to twenty-one by nine above 820 — a THIRD of the picture gone, at every tablet and desktop width, while the sheet above it said three by two. Written one way and painted another, which is exactly the fault LocaLilly named: a stylesheet grown by appending describes a design nobody has ever seen. Three by two at her width, where nothing is lost at all. Sixteen by nine above nine hundred, which still reads as a hero and takes sixteen percent rather than thirty-six. */ .plate.tall{aspect-ratio:3/2} @media(min-width:900px){.plate.tall{aspect-ratio:16/9}} .ground{padding:34px 22px 40px;text-align:center;max-width:760px;margin:0 auto} .ground.wide{max-width:1020px} @media(min-width:900px){ .ground{max-width:900px;padding:52px 32px 58px} .ground.wide{max-width:1180px} } @media(min-width:1100px){ /* THE SPINE. Headings keep the middle; the reading starts on the left. */ .ground > p.lede,.ground > p.soft,.ground > p:not([class]){ text-align:left;max-width:62ch;margin-left:auto;margin-right:auto} .ground > p.after,.ground > p:has(> .enter){text-align:center;max-width:none} } .ground.wide h2.huge{max-width:14ch;margin-left:auto;margin-right:auto} .kick{margin:0 0 14px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--magenta-ink)} h1{font-family:var(--serif);font-weight:300;font-size:clamp(31px,6.4vw,60px);line-height:1.08;margin:0 0 16px;letter-spacing:-.006em} h1 em, h2 em{font-style:italic;color:var(--magenta-ink)} h2{font-family:var(--serif);font-weight:300;font-size:clamp(26px,4.6vw,42px);line-height:1.14;margin:0 0 16px} h2.plain{font-family:var(--display);font-weight:200;font-size:clamp(20px,3.4vw,30px); letter-spacing:.05em;text-transform:uppercase;line-height:1.32} h3{margin:0 0 8px;font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:var(--magenta-ink)} p{margin:0 auto 15px;max-width:62ch} .lede{font-size:17px} .soft{color:var(--ink-soft)} .rule{width:42px;height:1px;background:var(--magenta);margin:24px auto} /* ── the pathways, breathing ─────────────────────────── */ .six{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;padding:6px 20px 42px; max-width:1020px;margin:0 auto;text-align:center} @media(min-width:700px){.six.four{grid-template-columns:repeat(4,1fr)}} @media(min-width:820px){.six.all{grid-template-columns:repeat(3,1fr)}} @media(min-width:1180px){.six.all{grid-template-columns:repeat(6,1fr)}} .six a{text-decoration:none;padding:5px 2px 10px;border-bottom:1px solid rgba(212,33,187,.28)} .six a:hover{border-bottom-color:var(--magenta)} .six b{display:block;font-weight:400;font-size:12px;letter-spacing:.24em;text-transform:uppercase} .six i{display:block;font-style:normal;margin-top:6px;font-size:12px;color:var(--ink-soft)} /* ── cards, weeks, gains ─────────────────────────────── */ .cols{display:grid;gap:16px;padding:0 20px 36px;max-width:1080px;margin:0 auto} @media(min-width:800px){.cols.three{grid-template-columns:repeat(3,1fr)} .cols.two{grid-template-columns:1fr 1fr}} .cell{padding:8px 4px 22px} .cell + .cell{border-top:1px solid rgba(212,33,187,.22)} @media(min-width:800px){.cell + .cell{border-top:0}} .cell p{margin:0;font-size:15px;color:var(--ink-soft)} .weeks{max-width:880px;margin:0 auto;padding:0 22px 36px} .week{border-top:1px solid rgba(212,33,187,.18);padding:19px 0;display:grid;gap:4px 24px} @media(min-width:680px){.week{grid-template-columns:170px 1fr;align-items:baseline}} .week b{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--magenta-ink);font-weight:500} .week p{margin:0;color:var(--ink-soft)} .gains{max-width:900px;margin:0 auto;padding:0 22px 40px;display:grid;gap:11px;list-style:none} @media(min-width:680px){.gains{grid-template-columns:1fr 1fr}} .gains li{font-size:15px;color:var(--ink-soft);border-left:1px solid rgba(212,33,187,.34);padding:3px 0 3px 15px} .price{display:inline-block;padding:14px 0 2px;margin:2px 0 4px} .price b{display:block;font-family:var(--serif);font-size:38px;line-height:1;font-weight:300} .price span{display:block;margin-top:6px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)} .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0 20px 40px;max-width:1020px;margin:0 auto} .strip img{width:100%;aspect-ratio:1;object-fit:cover} .said{max-width:880px;margin:0 auto;padding:0 22px 40px;display:grid;gap:16px} @media(min-width:760px){.said{grid-template-columns:1fr 1fr}} .quote{padding:6px 2px 22px} .quote p{margin:0 0 12px;font-size:15px;color:var(--ink-soft)} .quote cite{font-style:normal;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--magenta-ink)} .enter{display:inline-block;padding:15px 34px;border:1px solid var(--magenta);border-radius:999px; background:var(--white);color:var(--magenta-ink);text-decoration:none; font-size:12px;letter-spacing:.3em;text-transform:uppercase} .enter:hover{background:var(--magenta);color:var(--white)} /* ── the current: the blue, doing its one job ────────── */ .current{height:66px;position:relative} .current::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%); background:linear-gradient(180deg,rgba(47,168,224,0),#8ED8F5 42%,var(--current) 62%,rgba(47,168,224,0))} .current span{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px; border-radius:50%;background:var(--current);box-shadow:0 0 9px 2px rgba(47,168,224,.45)} @media (prefers-reduced-motion:no-preference){ .current span{animation:run 4.6s ease-in-out infinite} @keyframes run{0%{transform:translateY(-24px);opacity:0}22%{opacity:1}78%{opacity:1} 100%{transform:translateY(24px);opacity:0}} } .onwhite{background:var(--white)} .legal{max-width:760px;margin:0 auto;padding:34px 22px 60px;text-align:left} .legal h2{text-align:left;font-size:clamp(23px,3.6vw,32px)} .legal h3{margin:30px 0 8px} .legal p, .legal li{color:var(--ink-soft);max-width:none} .legal ul{padding-left:18px} .waiting{max-width:640px;margin:26px auto 30px;padding:16px 4px 0;text-align:center; border-top:1px solid rgba(212,33,187,.34)} .waiting p{margin:0;font-size:14px;color:var(--ink-soft)} .waiting b{color:var(--magenta-ink);font-weight:500} footer{background:var(--white);padding:46px 22px 74px;text-align:center} footer .ways{padding-top:16px} footer .line{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--magenta-ink)} footer .fine{margin-top:18px;font-size:12px;color:var(--ink-soft)} /* the three, side by side, so nobody has to be told who this is for */ .three-faces{display:grid;gap:10px;padding:0 16px 40px;max-width:1080px;margin:0 auto} @media(min-width:700px){.three-faces{grid-template-columns:repeat(3,1fr)}} .face{text-decoration:none;display:block} .face img{width:100%;aspect-ratio:4/3;object-fit:cover} @media(min-width:700px){.face img{aspect-ratio:3/4}} .face .cap{padding:16px 18px 20px;text-align:center} .face b{display:block;font-weight:400;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta-ink)} .face i{display:block;font-style:normal;margin-top:7px;font-size:13.5px;color:var(--ink-soft)} /* her long passages want a wider measure and more air */ .told{max-width:720px;margin:0 auto;padding:6px 24px 44px} .told p{margin:0 auto 20px;font-size:17px;line-height:1.72;color:var(--ink)} .told p.small{font-size:15px;color:var(--ink-soft)} .told .mark{font-family:var(--serif);font-style:italic;font-size:clamp(24px,4.4vw,36px); line-height:1.24;color:var(--magenta-ink);margin:30px auto 26px} /* --magenta reads 4.23 on cloud, under her 4.5. Words take --magenta-ink; --magenta keeps the rules, borders, glows and filled buttons. */ h2.pink{color:var(--magenta-ink);font-weight:300} /* ── what WordPress adds to a menu ───────────────────── */ .ways li{list-style:none;margin:0;padding:0} .ways .current-menu-item > a, .ways .current_page_item > a{color:var(--magenta-ink);border-bottom-color:var(--magenta)} .top .ways .menu-item{flex:0 0 auto} /* the customiser preview highlights nothing over artwork */ body.customize-partial-refreshing{opacity:1} /* ── a heading that is meant to be heard across a room ── */ /* A section heading, sized to sit under her tagline rather than shout over it. It was at 16vw and reading as the lead of the whole page. Her note, 22 August 2026: you have the innovation sensation massive, that's not the lead there. */ h2.huge{ font-family:var(--display); font-weight:200; font-size:clamp(30px,7.6vw,52px); line-height:1.02; letter-spacing:-.012em; text-transform:uppercase; color:var(--magenta-ink); margin:0 0 18px; } h2.huge + .lede{font-size:18px;max-width:34ch} /* ══ THE PORTAL — a moment, in the shape of Ask Gigi ══ One question on the screen and nothing else. Held to a proportion so a tall window cannot stretch it, and every screen sits in the same place so the words change while the ground stays still. */ /* THE GROUND IS ONE VARIABLE, so it can be sampled rather than rebuilt. Every rule below routes through these and nothing hard-codes a colour. Her law holds whatever the ground: no blacks, no browns, nothing muddy. */ .portal{ --pg-bg: radial-gradient(90% 60% at 50% 6%, rgba(212,33,187,.10) 0%, rgba(212,33,187,0) 62%), linear-gradient(180deg,#E4EDF7 0%,#EEF3FA 44%,var(--cloud) 100%); --pg-ink:var(--ink); --pg-soft:var(--ink-soft); --pg-accent:var(--magenta-ink); --pg-chip-bg:var(--white); --pg-chip-edge:rgba(212,33,187,.34); --pg-mist:1; position:relative;background:var(--pg-bg)} .portal .moment h1,.portal .moment h2{color:var(--pg-ink)} .portal .moment .lede,.portal .moment .tariff span,.portal .back{color:var(--pg-soft)} .portal .moment .kick,.portal .moment .answer,.portal .moment .family, .portal .moment .tariff b{color:var(--pg-accent)} .portal .chip{background:var(--pg-chip-bg);border-color:var(--pg-chip-edge);color:var(--pg-ink)} .portal .chip:hover,.portal .chip:focus-visible{background:var(--magenta);border-color:var(--magenta);color:#fff} .portal .enter{background:var(--pg-chip-bg);color:var(--pg-accent)} .portal .mist{opacity:calc(var(--pg-mist) * 1)} .portal-inner{position:relative;min-height:78svh;display:grid;place-items:center; padding:clamp(34px,8svh,88px) 22px clamp(38px,9svh,96px);max-width:760px;margin:0 auto} .moment{grid-area:1/1;width:100%;text-align:center;display:none} .moment.on{display:block} .moment h1,.moment h2{font-family:var(--serif);font-weight:300;margin:0 0 18px; font-size:clamp(32px,7.6vw,62px);line-height:1.06;outline:none} .moment h1 em,.moment h2 em{font-style:italic;color:var(--magenta-ink)} .moment .kick{margin:0 0 14px;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--magenta-ink)} .moment .lede{margin:0 auto 8px;max-width:30ch;font-size:clamp(19px,4.8vw,26px); line-height:1.34;color:var(--ink-soft)} .moment .answer{margin:0 auto 16px;max-width:26ch;font-family:var(--display);font-weight:400; font-size:clamp(19px,4.4vw,28px);line-height:1.2;color:var(--magenta-ink)} .moment .price{margin:14px auto 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)} .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px auto 0;max-width:600px} .chip{font:inherit;font-size:14px;font-weight:400;color:var(--ink);background:var(--white); border:1px solid rgba(212,33,187,.34);border-radius:999px;padding:13px 22px;cursor:pointer; transition:background 260ms ease,color 260ms ease,border-color 260ms ease} .chip:hover,.chip:focus-visible{background:var(--magenta);border-color:var(--magenta);color:var(--white)} .chip.go{margin-top:28px;letter-spacing:.28em;text-transform:uppercase;font-size:12px;padding:15px 34px} .moment .enter{margin-top:26px} .back{display:block;margin:30px auto 0;background:none;border:0;font:inherit;font-size:12px; letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;padding:8px} .back:hover{color:var(--magenta-ink)} @media (prefers-reduced-motion:no-preference){ .moment.on{animation:momentIn 1400ms cubic-bezier(.2,.75,.2,1) both} @keyframes momentIn{0%{opacity:0;transform:translateY(22px)} 78%{opacity:1}100%{opacity:1;transform:none}} .moment.on .chip{animation:chipIn 900ms cubic-bezier(.2,.8,.25,1) both;animation-delay:var(--wait,0ms)} @keyframes chipIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .moment.leaving{animation:momentOut 700ms cubic-bezier(.4,.05,.5,1) both} @keyframes momentOut{to{opacity:0;transform:translateY(-14px)}} } /* the price, where a person can actually see it */ .moment .tariff{margin:26px auto 0} .moment .tariff b{display:block;font-family:var(--serif);font-weight:300; font-size:clamp(42px,10vw,64px);line-height:1;color:var(--ink)} .moment .tariff span{display:block;margin-top:8px;font-size:12px;letter-spacing:.2em; text-transform:uppercase;color:var(--ink-soft)} .moment.land .kick{margin:26px 0 10px} .moment.land h2{margin:0 0 16px} /* it fills the window it opens in */ /* HELD TO A PROPORTION, AND CAPPED. Her pane is roughly 379 wide and well over a thousand tall. Anything sized only in viewport height turns into one enormous pale panel in a tall window, and the page reads as a long narrow strip with nothing in it. A cap makes the window it opens in stop mattering. Her law, and it cost her a view of the best work tonight. */ .portal-inner{min-height:min(88svh,760px)} .moment.dream{padding:clamp(26px,6svh,64px) 0} /* ══ the portal is alive ═══════════════════════════════ Her cloud drifts past at two speeds, and the blue current rises through it. The blue is the innovation sensation and it is never decoration — here it is the thing a person is about to go looking for. */ .portal{overflow:hidden} .weather{position:absolute;inset:0;pointer-events:none;z-index:0} .drift{position:absolute;left:0;right:0;display:block; background-repeat:repeat-x;background-position:left bottom;background-size:auto 100%} .drift.far{height:34%;bottom:16%;opacity:.5} .drift.near{height:40%;bottom:-6%;opacity:.92} .portal-inner{position:relative;z-index:2} /* The blue is the innovation sensation. Some of them come up pink, because she said they could, 21 August 2026. */ .mote{position:absolute;bottom:-8%;width:5px;height:5px;border-radius:50%; background:var(--current);box-shadow:0 0 10px 3px rgba(47,168,224,.5);opacity:0} .m3,.m6{background:var(--magenta);box-shadow:0 0 10px 3px rgba(212,33,187,.45)} .m8{background:var(--magenta-ink);box-shadow:0 0 9px 3px rgba(208,0,140,.4)} .m1{left:8%}.m2{left:21%}.m3{left:34%}.m4{left:47%} .m5{left:60%}.m6{left:72%}.m7{left:84%}.m8{left:93%} @media (prefers-reduced-motion:no-preference){ .drift.far {animation:driftfar 240s linear infinite} .drift.near{animation:driftnear 150s linear infinite} @keyframes driftfar {from{background-position-x:0}to{background-position-x:-2040px}} @keyframes driftnear{from{background-position-x:0}to{background-position-x:-2320px}} /* They drift rather than travel. Her note, 21 August 2026: gently. Roughly three times slower than they were, and no two together. */ .mote{animation:rise 46s linear infinite} .m1{animation-duration:44s;animation-delay:-3s} .m2{animation-duration:58s;animation-delay:-19s} .m3{animation-duration:39s;animation-delay:-31s} .m4{animation-duration:63s;animation-delay:-9s} .m5{animation-duration:49s;animation-delay:-42s} .m6{animation-duration:54s;animation-delay:-24s} .m7{animation-duration:37s;animation-delay:-51s} .m8{animation-duration:61s;animation-delay:-12s} @keyframes rise{ 0%{transform:translateY(0) translateX(0) scale(.7);opacity:0} 14%{opacity:.85} 50%{transform:translateY(-46svh) translateX(9px) scale(1)} 86%{opacity:.6} 100%{transform:translateY(-96svh) translateX(-6px) scale(.6);opacity:0}} } @media (prefers-reduced-motion:reduce){ .mote{opacity:.5} } /* the family line, in her magenta, on its own */ .moment .family{margin:12px auto 0;max-width:30ch;font-size:14.5px;line-height:1.4; color:var(--magenta-ink)} /* the dreaming: nothing but the line, and the blue moving behind it */ .dreamline{margin:0 auto;max-width:16ch;font-family:var(--serif);font-weight:300; font-size:clamp(34px,9vw,72px);line-height:1.06;color:var(--magenta-ink)} @media (prefers-reduced-motion:no-preference){ .moment.dream.on .dreamline{animation:dreamIn 2600ms cubic-bezier(.2,.75,.2,1) both} @keyframes dreamIn{0%{opacity:0;transform:translateY(20px) scale(.985);letter-spacing:.04em} 38%{opacity:1}100%{opacity:1;transform:none;letter-spacing:0}} } /* ── the greeting the portal carries onto the pathway ── */ .welcome{background:var(--cloud);padding:40px 22px 30px;text-align:center} .welcome .line{margin:0 auto;max-width:22ch;font-family:var(--serif);font-weight:300; font-size:clamp(30px,7.4vw,58px);line-height:1.06;color:var(--magenta-ink)} .welcome .whose{margin:18px auto 0;font-size:12px;letter-spacing:.32em; text-transform:uppercase;color:var(--ink-soft)} @media (prefers-reduced-motion:no-preference){ .welcome{animation:welcomeIn 1400ms cubic-bezier(.2,.75,.2,1) both} @keyframes welcomeIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} } /* the family line on a pathway page, in her magenta */ .ground .family{margin:12px auto 0;max-width:32ch;font-size:15px;color:var(--magenta-ink)} /* a logo is not a photograph, so it sits on its own ground with room round it */ .plate.logo{background:var(--white);display:grid;place-items:center;padding:34px 22px;aspect-ratio:auto} .plate.logo img{width:min(78vw,340px);height:auto;object-fit:contain} /* ── the way in, at the close of a page ─────────────── */ .ground.close{padding-top:44px;padding-bottom:56px} .ground.close .after{margin-top:22px;font-size:13.5px} .ground.close .after a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px} .ground.close .after a:hover{color:var(--magenta-ink)} .ground.begin .price{margin-top:22px} /* the last act on a page is the biggest thing on it */ .enter.big{padding:19px 46px;font-size:12px;letter-spacing:.28em; background:var(--magenta);color:var(--white);border-color:var(--magenta)} .enter.big:hover{background:var(--white);color:var(--magenta-ink)} /* ── a bundle is a thing bought, never a reduction granted. It stands on its own, and no price is ever shown struck through. ── */ .bundle{display:inline-block;margin:22px auto 0;padding:16px 26px; border:1px solid rgba(212,33,187,.3);border-radius:3px;background:var(--white)} .bundle b{display:block;font-family:var(--serif);font-weight:300;font-size:32px;line-height:1; color:var(--magenta-ink)} .bundle span{display:block;margin-top:8px;max-width:30ch;font-size:13.5px;color:var(--ink-soft)} /* two bundles, side by side, each standing on its own */ .bundles{display:grid;gap:12px;margin:24px auto 0;max-width:640px;padding:0 4px} @media(min-width:640px){.bundles{grid-template-columns:1fr 1fr}} .bundles .bundle{margin:0;display:block} /* the bundle has a name, the way a pathway has a name */ .bundle-name{margin:30px auto 0;font-family:var(--serif);font-weight:300; font-size:clamp(24px,5.4vw,38px);line-height:1.1;color:var(--magenta-ink);max-width:18ch} /* ══ THE NARROW STRIP ═══════════════════════════════════ Her pane is roughly 379 wide by 1,400 tall. The shared parent sizes its entrance and its heroes in whole viewport heights, so each becomes a 1,400-pixel panel carrying a few words, and the page reads as a long thin strip. Her description was literal. Three traps that produced a false all-clear elsewhere tonight: `.js-entrance` is written onto the html element by script at runtime, so a grep of the markup never sees it. A min-height cap does nothing against an outright `height`. And a passive measurement reads clean while the rule sits one runtime class away. Capped here in the child only. The shared default reaches all forty and is hers to rule on, on a calm morning. Found by Madame Monet, 21 August 2026. */ .js-entrance .entrance{height:min(100svh,46rem);max-height:min(100svh,46rem)} .hero{min-height:min(100svh,46rem)} .hero--second{min-height:min(86svh,40rem)} /* ── a mission, and the month it opens ──────────────── */ .ground.mission h2{font-size:clamp(28px,6.4vw,50px);margin-bottom:20px} .ground .brief{max-width:52ch;font-size:17px;line-height:1.6;color:var(--ink)} .ground .from{margin-top:16px;font-size:12px;letter-spacing:.24em;text-transform:uppercase; color:var(--magenta-ink)} /* ══ HOW A MISSION ARRIVES ═════════════════════════════ Her own picture, 21 August 2026: a cloud floating in the mist, a letter falling out of the portal, drifting slow and long, then opening. She has seen this and said she loves it. It is not touched without her. Held to a proportion so a tall window cannot stretch it. */ .sky{position:relative;overflow:hidden;height:min(100svh,860px);min-height:600px; background:linear-gradient(180deg,#DAE6F3 0%,#E5EDF7 32%,#EFF4FA 64%,var(--cloud) 100%)} .sky .orb{position:absolute;left:79%;top:17%;width:min(104vw,560px,60svh);aspect-ratio:1; transform:translate(-50%,-50%);background-repeat:no-repeat;background-position:center;background-size:contain} @media (prefers-reduced-motion:no-preference){ .sky .orb{animation:breathe 13s ease-in-out infinite} @keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.018)}} } .sky .flight{position:absolute;left:74%;top:19%;transform:translate(-50%,-50%);will-change:left,top,transform} .sky .leaf{width:min(88vw,360px,42svh)} @media (prefers-reduced-motion:no-preference){ .sky .flight{animation:drift 9.4s cubic-bezier(.42,.06,.3,1) 1.1s both} .sky .leaf {animation:near 9.4s cubic-bezier(.44,.05,.32,1) 1.1s both} @keyframes drift{ 0%{left:74%;top:19%;transform:translate(-50%,-50%) translateX(0) rotate(-12deg)} 22%{transform:translate(-50%,-50%) translateX(-16px) rotate(7deg)} 46%{transform:translate(-50%,-50%) translateX(17px) rotate(-6deg)} 70%{transform:translate(-50%,-50%) translateX(-13px) rotate(5deg)} 100%{left:50%;top:55%;transform:translate(-50%,-50%) translateX(0) rotate(0deg)}} @keyframes near{0%{transform:scale(.05);opacity:0}9%{opacity:1} 42%{transform:scale(.29)}74%{transform:scale(.66)}100%{transform:scale(1);opacity:1}} } @media (prefers-reduced-motion:reduce){ .sky .flight{left:50%;top:55%} } .sky .paper{position:relative;width:100%;aspect-ratio:1/1.26;transform-style:preserve-3d} .sky .sheet{position:absolute;left:0;right:0;top:44%;height:56%; background:linear-gradient(168deg,#FFFFFF,#F3F7FC); box-shadow:0 20px 40px -18px rgba(47,90,140,.32),0 2px 5px rgba(47,90,140,.07)} .sky .under{position:absolute;left:0;right:0;top:44%;height:56%;z-index:2;opacity:0; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 8%} .sky .side.front .kick{margin:0;font-size:12px;letter-spacing:.3em;color:var(--magenta-ink)} .sky .side.front .mname{margin:12px 0 0;font-family:var(--serif);font-weight:300;font-size:clamp(24px,7.6vw,32px);line-height:1.06;color:var(--ink)} .sky .mweek{margin:0 0 0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--magenta-ink)} .sky .mline{margin:13px 0 0;font-size:16px;line-height:1.5;color:var(--ink)} .sky .fold{position:absolute;left:5%;right:5%;top:44%;height:1px;z-index:5;opacity:.34; background:linear-gradient(90deg,rgba(212,33,187,0),var(--magenta) 20%,#FFFFFF 50%,var(--magenta) 80%,rgba(212,33,187,0)); box-shadow:0 0 10px 1px rgba(212,33,187,.4)} .sky .upper{position:absolute;left:0;right:0;top:0;height:44%;z-index:4; transform-origin:50% 100%;transform-style:preserve-3d;transform:rotateX(-180deg)} .sky .side{position:absolute;inset:0;backface-visibility:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 9%} .sky .side.front{background:linear-gradient(172deg,#FFFFFF,#F5F9FD);padding:0 9%} .sky .side.back{transform:rotateX(180deg);background:linear-gradient(8deg,#FBFCFE,#EDF2F8); box-shadow:0 14px 24px -16px rgba(47,90,140,.34)} .sky .wordmark{font-size:13px;letter-spacing:.42em;text-transform:uppercase;font-weight:400} .sky .wordmark i{font-style:normal;color:var(--magenta-ink)} .sky .said{margin:8px 0 0;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft)} @media (prefers-reduced-motion:no-preference){ .sky .fold {animation:lightup 2.0s ease-out 10.6s both} .sky .upper{animation:unfold 2.6s cubic-bezier(.34,.7,.2,1) 11.2s both} .sky .sheet{animation:grow 2.6s cubic-bezier(.34,.7,.2,1) 11.2s both} .sky .under{animation:reveal 1.5s ease-out 12.6s both} @keyframes lightup{0%{opacity:.34}44%{opacity:1}100%{opacity:.6}} @keyframes unfold {0%{transform:rotateX(-180deg)}100%{transform:rotateX(0deg)}} @keyframes grow {0%{top:44%;height:56%}100%{top:0;height:100%}} @keyframes reveal {0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}} } @media (prefers-reduced-motion:reduce){ .sky .upper{transform:rotateX(0deg)}.sky .sheet{top:0;height:100%} .sky .under{opacity:1}.sky .fold{opacity:.6} } .sky .mist{position:absolute;left:0;right:0;bottom:0;z-index:6;pointer-events:none; background-repeat:repeat-x;background-position:left bottom;background-size:auto 100%} .sky .mist.far {height:24%;bottom:15%;opacity:.62} .sky .mist.near{height:31%;opacity:.97} @media (prefers-reduced-motion:no-preference){ .sky .mist.far {animation:rollfar 260s linear infinite} .sky .mist.near{animation:rollnear 150s linear infinite} @keyframes rollfar {from{background-position-x:0}to{background-position-x:-2040px}} @keyframes rollnear{from{background-position-x:0}to{background-position-x:-2320px}} } .landing-links{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:24px auto 0} .landing-links .chip.on{background:var(--magenta);border-color:var(--magenta);color:#fff} /* ══ YOUR SPHERE ═══════════════════════════════════════ Her word. One account, one archive, one sphere. So there is no dashboard here, no account page, no profile and no settings — the people come first and the mechanics sit at the bottom, quietly, where they belong. */ .sphere-top{padding-bottom:16px} .sphere{display:grid;gap:14px;padding:0 18px 10px;max-width:1000px;margin:0 auto} @media(min-width:760px){.sphere{grid-template-columns:repeat(2,1fr)}} .orbit{position:relative;background:var(--white);padding:26px 24px 24px;text-align:left; border-left:2px solid var(--magenta)} .orbit .who{display:flex;align-items:baseline;gap:12px} .orbit .who b{font-family:var(--serif);font-weight:300;font-size:30px;line-height:1} .orbit .who i{font-style:normal;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)} .orbit .path{margin:14px 0 0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta-ink)} .orbit .at{margin:7px 0 0;font-size:15.5px;color:var(--ink)} .orbit .born{margin:12px 0 0;font-size:13px;color:var(--ink-soft)} .orbit .reads{margin:16px 0 0;font-size:13.5px} .orbit .reads a{color:var(--magenta-ink);text-decoration:underline;text-underline-offset:3px} .quiet{margin-left:8px;font-size:12px;color:var(--magenta-ink);text-decoration:underline;text-underline-offset:3px} .orbit.add{display:block;text-decoration:none;background:transparent;border-left:2px dashed rgba(212,33,187,.45)} .orbit.add .plus{display:block;font-family:var(--serif);font-size:34px;line-height:1;color:var(--magenta-ink)} .orbit.add b{display:block;margin-top:10px;font-family:var(--serif);font-weight:300;font-size:24px} .orbit.add i{display:block;margin-top:6px;font-style:normal;font-size:13.5px;color:var(--ink-soft)} .orbit.add:hover{background:var(--white)} .quiet-list{list-style:none;margin:24px auto 0;padding:0;max-width:640px;display:grid;gap:2px} .quiet-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:15px 2px; border-top:1px solid rgba(212,33,187,.18);text-align:left} .quiet-list span{flex:1 1 12ch;font-size:13.5px;color:var(--ink-soft)} .quiet-list b{font-weight:400;font-size:15px} .quiet-list a{font-size:12px;color:var(--magenta-ink);text-decoration:underline;text-underline-offset:3px} /* ── the way into a sphere ──────────────────────────── */ .sphere-in{max-width:460px} .sphere-in form{margin:30px auto 0;text-align:left;display:grid;gap:16px} .sphere-in label{display:block;font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-soft);margin-bottom:8px} .sphere-in input[type=text],.sphere-in input[type=password]{width:100%;font:inherit;font-size:16px; padding:14px 16px;background:var(--white);border:1px solid rgba(212,33,187,.3);border-radius:2px;color:var(--ink)} .sphere-in input:focus{outline:none;border-color:var(--magenta)} .sphere-in .login-remember{font-size:13px;color:var(--ink-soft)} .sphere-in .login-remember input{margin-right:8px} .sphere-in input[type=submit]{font:inherit;font-size:12px;letter-spacing:.3em;text-transform:uppercase; padding:16px 34px;border-radius:999px;border:1px solid var(--magenta);background:var(--magenta); color:var(--white);cursor:pointer} .sphere-in input[type=submit]:hover{background:var(--white);color:var(--magenta-ink)} /* ══ THE TYPE ══════════════════════════════════════════ Her standard: the real page, at its real address, with the options as things she taps. One tap moves one variable and nothing else on the page moves. */ .type-top{padding-bottom:10px} .type-picks{max-width:900px;margin:0 auto;padding:0 18px 34px;text-align:center} .type-picks .row-name{margin:26px 0 12px;font-size:12px;letter-spacing:.28em; text-transform:uppercase;color:var(--magenta-ink)} .type-picks .chips{gap:8px} .type-chip{font-size:16px;padding:11px 18px;letter-spacing:0;text-transform:none} .type-chip.on{background:var(--magenta);border-color:var(--magenta);color:var(--white)} .type-picks .now{margin:22px 0 0;font-size:12.5px} .type-picks .now b{color:var(--magenta-ink);font-weight:400} .specimen{--try-serif:var(--serif);--try-sans:var(--display); max-width:760px;margin:0 auto;padding:8px 24px 70px;text-align:center} .specimen h1{font-family:var(--try-serif);font-weight:300;font-size:clamp(32px,7.4vw,58px); line-height:1.06;margin:0 0 18px} .specimen h1 em{font-style:italic;color:var(--magenta-ink)} .specimen .tagline{font-family:var(--try-sans);font-size:12px;letter-spacing:.24em; text-transform:uppercase;color:var(--ink-soft);margin:0} .specimen h2.plain{font-family:var(--try-sans);font-weight:200;font-size:clamp(21px,4.6vw,32px); letter-spacing:.04em;text-transform:uppercase;line-height:1.28;margin:0 0 16px;color:var(--magenta-ink)} .specimen .lede{font-family:var(--try-sans);font-size:18px;line-height:1.55;color:var(--ink-soft); max-width:34ch;margin:0 auto} .specimen h3{font-family:var(--try-sans);font-size:12px;letter-spacing:.26em;text-transform:uppercase; color:var(--magenta-ink);margin:30px 0 10px;font-weight:500} .specimen .body{font-family:var(--try-sans);font-size:16px;line-height:1.66;color:var(--ink-soft); max-width:58ch;margin:0 auto 14px} .specimen .line{font-family:var(--try-serif);font-style:italic;font-size:clamp(20px,4.4vw,30px); line-height:1.3;color:var(--magenta-ink);margin:26px auto 0;max-width:24ch} .specimen .small{font-family:var(--try-sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-soft);margin:24px 0 0} /* her own words, typed onto the real page */ .type-picks .yours{margin:16px 0 0;font-size:13px;color:var(--ink-soft)} .type-picks .yours a{margin-left:10px;color:var(--magenta-ink);text-decoration:underline;text-underline-offset:3px} .specimen [data-line]{outline:none;border-radius:2px; box-shadow:inset 0 -1px 0 rgba(212,33,187,.22);transition:box-shadow 200ms ease,background 200ms ease} .specimen [data-line]:hover{box-shadow:inset 0 -1px 0 rgba(212,33,187,.5)} .specimen [data-line]:focus{background:rgba(212,33,187,.05);box-shadow:inset 0 -2px 0 var(--magenta)} /* ── a line offered several ways, on the real page ──── */ .choose{max-width:640px;margin:0 auto 26px;padding:20px 18px;text-align:center; border:1px dashed rgba(212,33,187,.45);border-radius:3px;background:rgba(255,255,255,.6)} .choose-label{margin:0 0 14px;font-size:12px;letter-spacing:.28em;text-transform:uppercase; color:var(--magenta-ink)} .choose .chips{gap:8px;margin:0} .word-chip{font-size:13.5px;padding:10px 16px;letter-spacing:0;text-transform:none} .word-chip.on{background:var(--magenta);border-color:var(--magenta);color:var(--white)} .choose-own{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:16px 0 0} .word-box{font:inherit;font-size:15px;padding:12px 15px;min-width:min(100%,300px); background:var(--white);border:1px solid rgba(212,33,187,.34);border-radius:999px;color:var(--ink)} .word-box:focus{outline:none;border-color:var(--magenta)} .word-back{font-size:12px;color:var(--magenta-ink);text-decoration:underline;text-underline-offset:3px} /* ── waiting: added now, walking at eight ───────────── */ .orbit.waiting{border-left-color:rgba(212,33,187,.35);background:rgba(255,255,255,.55)} .orbit.waiting .path{color:var(--ink-soft)} .when-eight{margin:14px 0 0;display:grid;gap:8px} .when-eight label{font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:9px;cursor:pointer} .when-eight input{accent-color:var(--magenta);width:16px;height:16px} .costs{margin:12px 0 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta-ink)} /* ── their drawer ───────────────────────────────────── */ .drawers{display:grid;gap:10px;padding:0 18px 10px;max-width:1000px;margin:0 auto} @media(min-width:760px){.drawers{grid-template-columns:repeat(3,1fr)}} .drawer{display:block;background:var(--white);padding:24px 22px;text-decoration:none; border-bottom:2px solid var(--magenta)} .drawer b{display:block;font-family:var(--serif);font-weight:300;font-size:26px;line-height:1.05} .drawer i{display:block;margin-top:8px;font-style:normal;font-size:13.5px;color:var(--ink-soft)} .drawer:hover{background:var(--sky)} /* ══ THE NAME BUILDING ITSELF ══════════════════════════ Hers: IMAGENIQ is IMAgination, GENius and IQ. Three words arrive one at a time, the letters that were always hers stay lit, and the name resolves out of them. It belongs to this page alone — no other screen uses it, so nothing is borrowed from the mission arriving. Held to a proportion. */ .naming{position:relative;display:grid;place-items:center;text-align:center; min-height:min(52svh,430px);padding:46px 20px 52px; background:linear-gradient(180deg,#E4EDF7 0%,#EFF4FA 52%,var(--cloud) 100%)} .naming .parts,.naming .whole{grid-area:1/1} .naming .part{display:block;font-family:var(--display);font-weight:200; font-size:clamp(24px,6.4vw,44px);line-height:1.5;letter-spacing:.02em;color:var(--ink-soft)} .naming .part b{font-weight:400;color:var(--magenta-ink)} .naming .whole{display:grid;gap:22px;place-items:center} .naming .whole span{font-family:var(--display);font-weight:300; font-size:clamp(34px,9.6vw,74px);letter-spacing:.32em;text-transform:uppercase;color:var(--ink)} .naming .whole i{font-style:normal;color:var(--magenta-ink)} .naming .whole p{max-width:19ch;font-family:var(--serif);font-weight:300; font-size:clamp(23px,6vw,34px);line-height:1.22;color:var(--ink);margin:0} .naming .whole em{font-style:italic;color:var(--magenta-ink)} @media (prefers-reduced-motion:no-preference){ .naming .part{opacity:0;animation:namePart 1000ms cubic-bezier(.2,.8,.25,1) both} .naming .p1{animation-delay:200ms} .naming .p2{animation-delay:800ms} .naming .p3{animation-delay:1400ms} .naming .parts{animation:nameGo 800ms ease-in 2200ms both} .naming .whole span{opacity:0;animation:nameIn 1200ms cubic-bezier(.2,.75,.2,1) 2700ms both} .naming .whole p{opacity:0;animation:nameSay 1100ms ease-out 3500ms both} @keyframes namePart{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes nameGo{to{opacity:0;transform:translateY(-16px)}} @keyframes nameIn{0%{opacity:0;letter-spacing:.6em}100%{opacity:1;letter-spacing:.32em}} @keyframes nameSay{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} } @media (prefers-reduced-motion:reduce){ .naming .parts{display:none} } /* THE ARRIVAL ITSELF — the site comes out of weather before it says its name. Two layers, drifting at different speeds so the air has depth, lifting as IMAGENIQ resolves. It sits BEHIND the letters and never touches their contrast: the name is fully opaque the whole way through. */ .naming{overflow:hidden} .naming .weather{position:absolute;inset:0;z-index:0;pointer-events:none; overflow:hidden} .naming .weather > span{position:absolute;inset:-30% -40%; background-repeat:repeat-x;background-position:center;background-size:auto 100%} .naming .parts,.naming .whole{position:relative;z-index:1} @media (prefers-reduced-motion:no-preference){ .naming .w-far {opacity:.85;animation:arriveFar 46s linear infinite, arriveGo 2600ms ease-out 2400ms both} .naming .w-near{opacity:.95;animation:arriveNear 31s linear infinite, arriveGo 2600ms ease-out 2900ms both} @keyframes arriveFar {from{background-position-x:0}to{background-position-x:-2040px}} @keyframes arriveNear{from{background-position-x:0}to{background-position-x:-2320px}} @keyframes arriveGo {to{opacity:0;transform:translate3d(0,-9%,0) scale(1.35); filter:blur(8px)}} } /* Stillness keeps the air, holds it still, and never fades the name. */ @media (prefers-reduced-motion:reduce){ .naming .weather{opacity:.5} } /* ══ ARRIVING ══════════════════════════════════════════ The parent's float.js is loaded and was adding classes to nothing, because this theme leaves the parent stylesheet off. So the rules live here. Only hidden once the script has added js-float, so a page whose scripts fail shows everything rather than nothing. The parent's own safeguards still apply — reduced motion, a throttled hidden tab, and a rescue for what is already on screen. Thirty pixels over 1.15 seconds rather than sixteen over 0.85. Anything less reads as an appearance rather than a drift. Credited to Esmeralda, 22 August 2026. */ :root{ --float-rise:30px; --float-time:1150ms; --float-ease:cubic-bezier(.2,.7,.2,1); --float-stagger:150ms; } .js-float .float{opacity:0;transform:translateY(var(--float-rise)); transition:opacity var(--float-time) var(--float-ease), transform var(--float-time) var(--float-ease); will-change:opacity,transform} .js-float .float.is-in{opacity:1;transform:none} .js-float .float--after{transition-delay:var(--float-stagger)} .js-float .float--later{transition-delay:calc(var(--float-stagger) * 2)} @media (prefers-reduced-motion:reduce){ .js-float .float,.js-float .float.is-in{opacity:1;transform:none;transition:none} } /* ══ IT FALLS AS A FEATHER, AND THE LETTER UNFOLDS OUT OF IT ══ Her note, 22 August 2026: the feather looks amazing, but then it very weirdly turns into the other — the letter isn't folding out of the feather. So the paper does not appear beside the feather. It opens out of its spine. The sheet begins as a sliver exactly the width of the shaft and widens on the same centre line while the feather's vane thins away around it. One object becoming another rather than two objects swapping. */ .sky .leaf{position:relative} .sky .plume{position:absolute;inset:-16% 24% 4%;z-index:3;display:grid;place-items:center; transform-origin:50% 50%;filter:drop-shadow(0 14px 22px rgba(47,90,140,.16))} .sky .plume svg{width:100%;height:auto} .sky .paper{transform-origin:50% 50%} @media (prefers-reduced-motion:no-preference){ /* it tumbles the whole way down */ .sky .plume{animation:plumeTurn 8.6s cubic-bezier(.42,.06,.3,1) 1.1s both, plumeOpen 1.6s cubic-bezier(.32,.72,.2,1) 8.9s both} @keyframes plumeTurn{ 0%{transform:rotate(-16deg)} 14%{transform:rotate(19deg)} 31%{transform:rotate(-13deg)} 48%{transform:rotate(16deg)} 64%{transform:rotate(-10deg)} 80%{transform:rotate(9deg)} 100%{transform:rotate(2deg)}} /* the vane thins to the shaft and goes, on the same line the paper widens on */ @keyframes plumeOpen{ 0%{opacity:1;transform:rotate(2deg) scaleX(1)} 55%{opacity:.55;transform:rotate(0deg) scaleX(.22)} 100%{opacity:0;transform:rotate(0deg) scaleX(.06)}} /* the sheet opens out of the spine */ .sky .paper{animation:paperUnfold 1.6s cubic-bezier(.32,.72,.2,1) 8.9s both} @keyframes paperUnfold{ 0%{opacity:0;transform:scaleX(.06)} 22%{opacity:1} 100%{opacity:1;transform:scaleX(1)}} } @media (prefers-reduced-motion:reduce){ .sky .plume{display:none} .sky .paper{opacity:1;transform:none} } /* the line that opens it to everybody — the second thing a person reads */ h2.opener{font-family:var(--serif);font-weight:300;font-size:clamp(29px,7.2vw,54px); line-height:1.1;color:var(--ink);margin:0 auto;max-width:20ch} .face .cap b{font-size:12px;letter-spacing:.2em} /* ══ A PATHWAY, OPENED PROPERLY ════════════════════════ Six pages share this. The name arrives at full size under the picture, the promise sits under it in a narrow measure, and the three pictures fall as a trio rather than a row of equals. */ .pathway-open{padding-top:40px} h1.pathway-name{font-family:var(--serif);font-weight:300; font-size:clamp(46px,14vw,104px);line-height:.94;letter-spacing:-.02em;margin:0 0 22px} .pathway-open .lede{max-width:34ch;font-size:17.5px;line-height:1.6} /* the trio: the middle one stands taller, so it reads as a composition */ .strip{grid-template-columns:1fr 1fr;gap:10px} .strip img{aspect-ratio:3/4} .strip img:first-child{grid-column:1 / -1;aspect-ratio:16/10} @media(min-width:760px){ .strip{grid-template-columns:repeat(3,1fr);align-items:end} .strip img:first-child{grid-column:auto;aspect-ratio:3/4} .strip img:nth-child(2){aspect-ratio:3/4.4} .strip img:nth-child(3){aspect-ratio:3/4} } /* ══ THE FIVE PORTALS ══════════════════════════════════ Her brief, 24 August 2026: I need all five portals — Possibilities, Passion and Wisdom at the top, with Bloom and Teen Think Tank underneath — and make sure the page is built so that people click. SO EVERY PORTAL IS ONE WHOLE TAPPABLE CARD rather than a picture beside a link, and each one carries its own way in written out. At her width they stack in her order. Wider, the three she named lead take a row of their own and the other two share the next. The picture in each is that pathway's own hero, so a person meets the same face here that greets them when they arrive. */ .portals{display:grid;gap:18px;padding:0 16px 8px;max-width:1120px;margin:0 auto} @media(min-width:820px){ .portals{grid-template-columns:repeat(3,1fr);gap:22px} } .portal{display:block;text-decoration:none;color:inherit;background:var(--white); border:1px solid rgba(212,33,187,.16);border-radius:2px;overflow:hidden; transition:border-color .35s ease,transform .35s ease} .portal:hover,.portal:focus-visible{border-color:var(--magenta);transform:translateY(-2px)} .portal img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover} .portal-words{display:block;padding:20px 20px 24px} .portal-words b{display:block;font-family:var(--serif);font-weight:300; font-size:clamp(27px,5vw,34px);line-height:1.1;color:var(--ink)} .portal-words i{display:block;font-style:normal;margin-top:9px; font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta-ink)} .portal-words em{display:block;font-style:normal;margin-top:14px; font-size:16px;line-height:1.6;color:var(--ink-soft)} .portal-go{display:inline-block;margin-top:18px;font-size:12px;letter-spacing:.28em; text-transform:uppercase;color:var(--magenta-ink); border-bottom:1px solid rgba(208,0,140,.4);padding-bottom:5px} .portal:hover .portal-go,.portal:focus-visible .portal-go{border-bottom-color:var(--magenta-ink)} /* ══ WHAT IT COSTS, AT THE FOOT ════════════════════════ Her ruling: no price above the argument. Joy carries the argument and figures never do. So every figure on this page lives here, once, after somebody already knows what they would be joining. */ .cost-list{list-style:none;margin:0 auto;padding:0 20px 34px;max-width:760px;display:grid;gap:2px} .cost-list li{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid rgba(212,33,187,.16)} @media(min-width:640px){.cost-list li{grid-template-columns:1fr 1.4fr;gap:20px;align-items:baseline}} .cost-list b{font-family:var(--serif);font-weight:300;font-size:22px;color:var(--ink)} .cost-list span{font-size:15px;line-height:1.6;color:var(--ink-soft)} .cost-list .costs-family b{color:var(--magenta-ink)} /* ══ THE PICKS ON BEGIN ════════════════════════════════ Found walking the site as a buyer, 24 August 2026: Begin was a hundred and one words with no picture, and its only button sent a ready buyer back to the portal they had just come from. Every pathway page funnels here. So all six stand side by side with their own way in, and each one is a row she can read at her width without holding six pages in her head. */ .pick{display:grid;gap:8px;padding:22px 0;border-bottom:1px solid rgba(212,33,187,.16)} .pick--on{border-left:2px solid var(--magenta);padding-left:16px} .pick b{font-family:var(--serif);font-weight:300;font-size:clamp(25px,5.4vw,32px); line-height:1.08;color:var(--ink)} .pick-note{font-size:15px;line-height:1.6;color:var(--ink-soft)} .pick-cost{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta-ink)} .pick-cost i{font-style:normal;color:var(--ink-soft)} .pick .enter{justify-self:start;margin-top:6px} @media(min-width:760px){ .pick{grid-template-columns:1.1fr 1.6fr auto;align-items:center;gap:8px 24px} .pick b{grid-row:span 2} .pick-cost{text-align:right} .pick .enter{grid-column:3;grid-row:span 2;justify-self:end;margin-top:0} } /* ══ SETTING UP, AND IT IS A MOMENT RATHER THAN A FORM ══ Her law: there are no forms and no questionnaires in this ecosystem, there are moments. So each question stands on its own with its own reason beside it, in her ground, at her reading size, rather than stacked in a grey box. Her instruction, 24 August 2026: a beautiful, fully branded account creation — it has to be stunning, so they feel they are living in that world. */ .setting-up{max-width:520px;margin:0 auto;padding:0 20px 20px;text-align:left} .setting-up form{display:grid;gap:30px} .ask{display:grid;gap:9px} .ask label{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta-ink)} .ask input{width:100%;font:inherit;font-size:17px;color:var(--ink); background:var(--white);border:0;border-bottom:1px solid rgba(212,33,187,.34); border-radius:0;padding:12px 2px;transition:border-color .3s ease} .ask input:focus{outline:none;border-bottom-color:var(--magenta); box-shadow:0 1px 0 0 var(--magenta)} .ask input::placeholder{color:var(--ink-soft);opacity:.62} .ask .why{margin:0;font-size:14px;line-height:1.6;color:var(--ink-soft)} .ask--quiet{padding-top:6px;border-top:1px solid rgba(212,33,187,.14)} .setting-up button.enter{width:100%;cursor:pointer;font:inherit;font-size:12px; letter-spacing:.3em;text-transform:uppercase} .setting-up .after{text-align:center;margin-top:26px} .oops{max-width:520px;margin:0 auto;padding:15px 20px;text-align:left; border-left:2px solid var(--magenta);background:var(--white); font-size:15.5px;line-height:1.6;color:var(--ink)} /* ══ THE PEOPLE ALREADY IN ═════════════════════════════ One card each, and a child too young says so in her own words rather than sitting greyed out looking like a fault. */ .theirs{display:grid;gap:14px;max-width:640px;margin:0 auto;text-align:left} @media(min-width:700px){.theirs{grid-template-columns:1fr 1fr}} .one{display:grid;gap:5px;padding:18px 20px;background:var(--white); border:1px solid rgba(212,33,187,.16);border-radius:2px} .one--waiting{border-style:dashed} .one b{font-family:var(--serif);font-weight:300;font-size:25px;line-height:1.1;color:var(--ink)} .one-of{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)} .one-path{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--magenta-ink)} .one-waiting{font-size:14.5px;line-height:1.55;color:var(--ink-soft)} .one-go{margin-top:8px} .one-go button{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12px; letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft); border-bottom:1px solid rgba(90,84,112,.3)} .one-go button:hover{color:var(--magenta-ink);border-bottom-color:var(--magenta-ink)} .ask select{width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--white); border:0;border-bottom:1px solid rgba(212,33,187,.34);border-radius:0;padding:12px 2px} .ask select:focus{outline:none;border-bottom-color:var(--magenta)} /* ══ THE ACCOUNT ROOM, KEPT OUT OF THE WAY ═════════════ Her ruling, 24 August 2026: someone's account is different from their Imagitorium. Two rooms, never one. So the quiet part sits at the foot of the page rather than at the top, because a person arriving has come to see their own world and not their billing. */ .account-room{border-top:1px solid rgba(212,33,187,.16);padding-top:44px;margin-top:12px} .quiet-rows{list-style:none;margin:26px auto 0;padding:0;max-width:640px;display:grid;gap:2px; text-align:left} .quiet-rows li{display:grid;gap:4px;padding:16px 0; border-bottom:1px solid rgba(212,33,187,.12)} @media(min-width:640px){ .quiet-rows li{grid-template-columns:1fr 1.4fr auto;gap:20px;align-items:baseline} } .quiet-rows span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta-ink)} .quiet-rows b{font-weight:400;font-size:15.5px;color:var(--ink)} .quiet-rows a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)} .quiet-rows a:hover{color:var(--magenta-ink)} .one-drawer{font-size:14.5px;line-height:1.55;color:var(--ink-soft)} /* ══ ALL SIX, AND THE MIST THAT CLEARS ═════════════════ Her instruction, 25 August 2026. The six programs visible straight away, in landscape so nothing is cut out, and — her own idea — a mist that clears every time the photos come in. Otherwise there is no magic to the site apart from the aesthetic. THE FRAME IS THREE BY TWO because every one of her pathway heroes is three by two. Nothing is cropped, ever. The cutting she saw was my frame rather than her pictures. HER OWN MIST DOES THE WORK. mist-near and mist-far are already in this theme, alternating card by card so no two clear the same way. Each one drifts up and sideways off the picture as the card arrives, staggered along the row. */ .six-up{display:grid;gap:22px;padding:0 16px 12px;max-width:1180px;margin:0 auto} @media(min-width:700px){.six-up{grid-template-columns:1fr 1fr;gap:26px}} @media(min-width:1040px){.six-up{grid-template-columns:repeat(3,1fr)}} .up{display:block;text-decoration:none;color:inherit} .up-frame{position:relative;display:block;overflow:hidden;border-radius:2px; background:var(--sky)} /* HEIGHT:AUTO IS LOAD-BEARING AND IT IS WHY HER SIX CARDS WERE WRONG. Hers, 30 September 2026: *the size of the images for our programs is fucked up.* Measured: her landscape artwork (1536x1024, a 3:2) was rendering in a 483x1024 box — a boxRatio of 0.47 against a natural 1.50, so object-fit:cover cropped every card to a narrow vertical slice of her painting. THE CAUSE WAS HER OWN PICTURE-SIZE LAW MEETING THIS RULE. Since 29 September every picture carries its real width and height on the tag, so the page has a height before anything lands. Those attributes are presentational hints, and with `width:100%` set here and NOTHING saying height, the height attribute still applied — width and height both definite, so `aspect-ratio` never got to decide anything. ANY RULE THAT SETS AN IMAGE'S WIDTH MUST ALSO SET height:auto on this world, or it silently inherits whatever the tag declares. It looks exactly like a broken picture and nothing errors. */ .up-frame img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover; transform:scale(1.04);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)} .up:hover .up-frame img,.up:focus-visible .up-frame img{transform:scale(1)} /* THE MIST ITSELF. It sits over her picture, and it leaves. IT WAS INVISIBLE, AND THIS IS WHY. mix-blend-mode:screen over pale sky and cloud is white on white — the mist was on every page, loading, and painting nothing anybody could see. Her artwork is the palest in the ecosystem, which is exactly the ground screen blending disappears into. AND IT CLEARED BEFORE SHE COULD SEE IT. The six cards sit near the top of a 379-wide screen, so they were already in view the instant the page loaded and the mist lifted in the same breath it arrived. It now holds for a beat after the photograph beneath it has finished loading, and only then leaves. */ .misty{position:relative} .up-mist,.mist{position:absolute;inset:-16% -24%;pointer-events:none;z-index:2; background-repeat:no-repeat;background-size:cover;background-position:50% 50%; opacity:1;will-change:opacity,transform} @media (prefers-reduced-motion:no-preference){ /* THE MIST IS ALIVE BEFORE IT LEAVES. Her words, 1 September 2026: I can see the mist, but it is going too fast, it is not smooth. It was, and for two reasons. It sat perfectly still and then vanished in two seconds, which reads as a switch rather than as weather. And it was transitioning a blur across a very large picture, which is the single most expensive property a browser can animate — the stutter she saw was the blur, never the mist. So it now DRIFTS the whole time it is there, lifts over six seconds, and the blur is gone from the transition entirely. Only opacity and transform move, and both are carried on the compositor. */ .up-mist,.mist{transform:translate3d(0,0,0) scale(1.07); animation:mistBreathe 34s ease-in-out infinite alternate; transition:opacity 5200ms cubic-bezier(.33,0,.2,1) var(--wait,0ms), transform 6400ms cubic-bezier(.25,.46,.2,1) var(--wait,0ms)} @keyframes mistBreathe{ from{background-position:46% 52%} to {background-position:56% 47%}} .six-up.is-clear .up-mist, .misty.is-clear .mist{opacity:0;transform:translate3d(11%,-13%,0) scale(1.46)} /* AND HER PICTURES STOP BEING STATIC. They settle out of the weather rather than snapping into place the moment it goes — a slow, single, unhurried move that ends and stays ended. */ .misty img,.up-frame img{opacity:.88; transition:opacity 2600ms ease-out var(--wait,0ms)} .six-up.is-clear .up-frame img, .misty.is-clear img{opacity:1; animation:settleIn 14s cubic-bezier(.19,1,.22,1) both} @keyframes settleIn{ from{transform:scale(1.075)} to {transform:scale(1)}} } @media (prefers-reduced-motion:reduce){ .up-mist,.mist{display:none} .up-frame img,.misty img{opacity:1} } .up-words{display:block;padding:17px 4px 4px} .up-words b{display:block;font-family:var(--serif);font-weight:300; font-size:clamp(27px,5.4vw,33px);line-height:1.08;color:var(--ink)} .up-words i{display:block;font-style:normal;margin-top:8px;font-size:12px; letter-spacing:.2em;text-transform:uppercase;color:var(--magenta-ink)} .up-words em{display:block;font-style:normal;margin-top:10px;font-size:15.5px; line-height:1.6;color:var(--ink-soft)} /* ══ A PICTURE THAT HAS NOT ARRIVED IS MIST, NEVER A HOLE ══ Verity walked the site and saw two large empty blocks where pictures should be. Every file was answering 200 — they were lazy pictures that had not landed yet, sitting in a flat pale frame that reads as a fault. So a waiting frame is her own weather rather than a grey box: cloud moving very slowly under where the picture will be. If it never arrives, what is left still belongs to her world. */ .plate,.up-frame{ background:linear-gradient(112deg,#EAF1F8 0%,#F7FAFD 38%,#EFF4FA 62%,#E4EDF7 100%); background-size:280% 280%} @media (prefers-reduced-motion:no-preference){ .plate,.up-frame{animation:waitingWeather 22s ease-in-out infinite} @keyframes waitingWeather{ 0%{background-position:0% 40%} 50%{background-position:100% 60%} 100%{background-position:0% 40%}} /* once her picture is in, the weather stops — it was only ever a stand-in */ .plate:has(img[src]),.up-frame:has(img[src]){animation:none} } /* ══ AIR, BECAUSE SHE SAID SQUISHED AND SHE WAS RIGHT ══════════════════════ Her words, 1 September 2026: separate it out, it is all squished, it is an information overload. Sections were sitting 34px apart on a 379-wide screen, so six ideas arrived as one wall. A dreamscape needs room between breaths more than any other kind of page. One idea, then space. Then the next. */ .ground{padding-top:72px;padding-bottom:78px} .ground + .ground{padding-top:8px} .onwhite{padding-top:22px;padding-bottom:26px} .cols{margin-top:14px} .six-up{padding-top:26px;padding-bottom:34px} /* WHY IT IS NEEDED, GIVEN THE WHOLE SCREEN. Nothing shares it. */ .ground.stake{padding-top:104px;padding-bottom:112px} .ground.stake .lede{margin-top:26px} @media(min-width:900px){ .ground{padding-top:96px;padding-bottom:104px} .ground.stake{padding-top:140px;padding-bottom:148px} } /* ══ THE ONE DARK GROUND, AND HER SECOND COLOUR ════════════════════════════ Her words, 1 September 2026: it needs to have some other colour to it, and it needs to be so beautiful, but powerful, and convert. THE BLUE IS ALREADY HERS. It runs along the sleeves and back of a person in her own artwork — the innovation sensation, creativity moving through a body — and in eleven days of building it has never once been on a screen. This is the whole site's only dark ground, so it lands like a held breath in the middle of the cloud. */ .lost{background:linear-gradient(168deg,#DCEAF6 0%,#EAF1F8 46%,#F7FAFD 100%); color:var(--ink,var(--iq-ink,#2F5A8C));padding:96px 0 104px;margin:0;position:relative;overflow:hidden} .lost::after{content:"";position:absolute;inset:-40% -20% auto -20%;height:70%; background:radial-gradient(60% 60% at 50% 0%,rgba(47,168,224,.20),transparent 72%); pointer-events:none} .lost .kick{color:var(--blue-ink,#17698F)} .lost h2{color:var(--ink,var(--iq-ink,#2F5A8C))} .lost h2 em{color:var(--magenta-ink,#D0008C);font-style:italic} /* ══ HER FIVE AGES, CHANGING QUIETLY ═════════════════════════════════════ Hers: *the picture just quietly changes in the background.* So it is slow — fifty seconds for a whole life, each frame holding about seven and taking three to dissolve. Nothing blinks and nothing slides; a person reading her four figures simply finds somebody older there when they look up. All five stack in one box at her artwork's own 3:2, so the section keeps ONE height and her figures never move. height:auto is load-bearing — see the note on .up-frame img. */ .ages{position:absolute;inset:0;overflow:hidden} .ages .age{position:absolute;inset:0;display:block;width:100%;height:100%; object-fit:cover;opacity:0;animation:iqAges 50s linear infinite both} .ages .age-1{animation-delay:0s;opacity:1} .ages .age-2{animation-delay:10s} .ages .age-3{animation-delay:20s} .ages .age-4{animation-delay:30s} .ages .age-5{animation-delay:40s} @keyframes iqAges{0%{opacity:0}6%{opacity:1}20%{opacity:1}26%{opacity:0}100%{opacity:0}} @media (prefers-reduced-motion:reduce){ .ages .age{animation:none;opacity:0} .ages .age-1{opacity:1} } .lost-one.is-last .lost-say{color:var(--magenta-ink,#D0008C);opacity:1} .lost-close{max-width:none;margin-top:52px;text-align:center; font-size:clamp(21px,5.4vw,27px)} .lost-close em{color:var(--magenta-ink,#D0008C);font-style:italic} @media (prefers-reduced-motion:no-preference){ .lost-one{opacity:0;transform:translateY(16px); transition:opacity 900ms ease-out var(--wait,0ms), transform 1100ms cubic-bezier(.2,.8,.25,1) var(--wait,0ms)} .lost.is-counted .lost-one{opacity:1;transform:none} } /* ══ AND HOW MUCH COMES BACK ═══════════════════════════════════════════════ It rises straight out of her dark ground into cloud, so the argument is made by the page itself before a word of it is read. */ .regain{background:linear-gradient(180deg,#F7FAFD 0%,#EAF1F8 34%,var(--cloud,#F7FAFD) 100%); padding:78px 0 96px;margin:0;text-align:center} .regain .kick{color:var(--blue-ink,#17698F)} .regain-figure{margin:26px auto 30px} .regain-figure b{display:block;font-family:var(--display);font-weight:200; font-size:clamp(72px,22vw,124px);line-height:.94;letter-spacing:-.02em; color:var(--magenta,#D421BB);font-variant-numeric:tabular-nums} .regain-figure b span{font-size:.4em;margin-left:3px;opacity:.75} .regain-say{display:block;margin-top:12px;font-family:var(--serif);font-weight:300; font-style:italic;font-size:clamp(17px,4.6vw,21px);color:var(--blue-ink,#17698F)} .regain h2{margin-top:8px} @media (prefers-reduced-motion:no-preference){ .regain-figure b{opacity:0;transform:translateY(20px) scale(.97); transition:opacity 1200ms ease-out 260ms,transform 1400ms cubic-bezier(.19,1,.22,1) 260ms} .regain.is-back .regain-figure b{opacity:1;transform:none} } /* The release breathes where the figure stood, rather than closing up. */ .regain .kick{margin-bottom:34px} .regain h2.opener em{color:var(--magenta,#D421BB);font-style:italic} .regain h2.opener{font-size:clamp(27px,7.4vw,44px);line-height:1.16;max-width:16ch; margin-left:auto;margin-right:auto} .regain .lede{margin-top:24px} .regain .enter{margin-top:34px} /* ══ THE FIVE WEEKS, AND EACH ONE IS BUILT DIFFERENTLY ═════════════════════ Her ruling, 25 August 2026: each different week will feel different — the dream will feel very different from deciding, then designing, then creating. And tonight: I want to see the different shapes. SO THE SHAPE ITSELF CARRIES THE WEEK, before a word is read. Daydream is the widest, palest, emptiest screen on the site. Decide narrows to a column and the choices sit in a line. Design is a blueprint on her blue. Create is the loudest and it is her magenta. The Reflection is dark, small and quiet, and it closes the month. */ .wk{min-height:88vh;display:flex;align-items:center;padding:74px 0 84px} .wk-in{max-width:760px;margin:0 auto;padding:0 24px;width:100%} .wk-of{font-family:var(--serif);font-style:italic;font-size:15px;opacity:.62;margin:0 0 10px} .wk h1{margin:6px 0 0} .wk-lede{font-family:var(--serif);font-weight:300;font-size:clamp(17px,4.6vw,21px); line-height:1.62;margin:22px 0 0} .wk-ask{list-style:none;margin:34px 0 0;padding:0} .wk-ask li{margin:0 0 16px;font-size:17px;line-height:1.55} .wk-close{margin:34px 0 0;font-family:var(--serif);font-style:italic; font-size:16.5px;line-height:1.6;opacity:.82} .wk-go{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:40px} .wk-dots{display:flex;gap:9px;margin-top:34px} .wk-dots a{display:block;padding:6px 3px} .wk-dots span{display:block;width:26px;height:2px;background:currentColor;opacity:.24} .wk-dots a.on span{opacity:1} @media (prefers-reduced-motion:no-preference){ .wk-ask li{opacity:0;transform:translateY(10px); animation:wkIn 780ms cubic-bezier(.2,.8,.25,1) both;animation-delay:var(--wait,0ms)} @keyframes wkIn{to{opacity:1;transform:none}} } /* ── DAYDREAM. The most spacious screen on the site. Nothing to make. ── */ .wk--daydream{background:linear-gradient(178deg,var(--cloud,#F7FAFD),var(--pale,#EAF1F8)); min-height:96vh} .wk--daydream .wk-in{max-width:880px;text-align:center} .wk--daydream h1{font-size:clamp(31px,8.6vw,54px);line-height:1.14} .wk--daydream .wk-lede{max-width:34ch;margin-left:auto;margin-right:auto} .wk--daydream .wk-ask{margin-top:52px} .wk--daydream .wk-ask li{font-family:var(--serif);font-weight:300; font-size:clamp(19px,5vw,25px);line-height:1.5;margin-bottom:38px;opacity:.9} .wk--daydream .wk-go,.wk--daydream .wk-dots{justify-content:center} /* ── DECIDE. It narrows to one, and each choice says what choosing it TELLS you. Her ruling of 1 September carried across from Design: a numbered ruled table is a quiz, and we do not do those either. ── */ .wk--decide{background:radial-gradient(120% 90% at 50% 10%,#FFF,var(--cloud,#F7FAFD) 55%,var(--pale,#EAF1F8))} .wk--decide .wk-in{max-width:620px} /* ── DESIGN. THE WEEK AN IDEA GETS ITS EDGES. HER RULING, 1 SEPTEMBER 2026, and it is the law she says matters more than any other: you are giving them a form, that is not a moment, that is not an experience, we do not do forms — and you have put it on school paper. BOTH HALVES WERE TRUE. Six labelled rows in a bordered table IS a worksheet, however beautifully it is set. And a graph-paper grid is the wallpaper of the exact place IMAGENIQ was built to sit a long way from. SO THE GRID IS GONE AND SO IS THE TABLE. Six decisions arrive one at a time, each with what it DOES to the idea underneath it, and a hairline draws itself across as each one lands. It teaches while it unfolds, which is what a moment is. ── */ .wk--design{background:radial-gradient(120% 90% at 50% 0%,#FFF,var(--cloud,#F7FAFD) 52%,var(--pale,#EAF1F8))} .wk--design .kick{color:var(--blue-ink,#17698F)} .wk--design h1{font-size:clamp(28px,7.2vw,44px)} .wk--design h1 em{color:var(--magenta-ink,#D0008C)} .wk-moments{margin-top:46px} .wk-moment{position:relative;padding:0 0 34px} .wk-moment b{display:block;font-family:var(--display);font-weight:300; font-size:clamp(20px,5.4vw,26px);line-height:1.3;letter-spacing:.005em} .wk-moment i{display:block;margin-top:9px;font-family:var(--serif);font-weight:300; font-style:italic;font-size:clamp(16px,4.3vw,19px);line-height:1.55; color:var(--blue-ink,#17698F);max-width:38ch} .wk-moment::after{content:"";position:absolute;left:0;bottom:17px;height:1px; width:100%;transform-origin:0 50%; background:linear-gradient(90deg,var(--magenta,#D421BB),rgba(47,168,224,.5) 62%,transparent)} .wk-moment:last-child{padding-bottom:0} .wk-moment:last-child::after{display:none} @media (prefers-reduced-motion:no-preference){ .wk-moment{opacity:0;transform:translateY(14px); animation:wkIn 900ms cubic-bezier(.2,.8,.25,1) both;animation-delay:var(--wait,0ms)} .wk-moment::after{transform:scaleX(0); animation:drawLine 1100ms cubic-bezier(.22,.61,.36,1) both; animation-delay:calc(var(--wait,0ms) + 380ms)} @keyframes drawLine{to{transform:scaleX(1)}} } /* ── CREATE. The loudest of the five. Hands. Her magenta. The bordered blocks are gone with the rest of the boxes — three invitations, big, one after another. ── */ .wk--create{color:#FFF; background:linear-gradient(158deg,#F05FD6 0%,#D421BB 46%,#B516A0 100%)} .wk--create .kick{color:#FFD9F5} .wk--create .wk-of{color:#FFE9FA} .wk--create h1{color:#FFF;font-size:clamp(34px,9.4vw,62px);line-height:1.08} .wk--create h1 em{color:#FFE9FA;font-style:italic} .wk--create .wk-lede{color:#FCE4F7;font-size:clamp(18px,4.9vw,23px)} .wk--create .wk-close{color:#FFE9FA} .wk--create .wk-moment b{color:#FFF;font-size:clamp(24px,6.6vw,34px);font-weight:300} .wk--create .wk-moment i{color:#FCE4F7;font-size:clamp(16px,4.4vw,19px)} .wk--create .wk-moment::after{ background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,.25) 60%,transparent)} .wk--create .enter{background:#FFF;border-color:#FFF;color:#B0128F} .wk--create .enter:hover,.wk--create .enter:focus-visible{background:#FFE9FA;color:#8E0F77} .wk--create .wk-go a{color:#FFF} .wk--create .wk-go a.enter{color:#B0128F} /* ── THE REFLECTION. Quiet, and quiet is LIGHT in her world. It was near-black. Her ruling, 1 September 2026: how dark is this, the reflection is ugly, where has my beautiful world gone. Quiet was reached for by dimming the lights, which is the lazy way to reach it — hers is reached with air, small type and a great deal of cloud. ── */ .wk--reflection{color:var(--ink,var(--iq-ink,#2F5A8C));text-align:center; background:radial-gradient(120% 80% at 50% 0%,#FFF 0%,var(--cloud,#F7FAFD) 46%,var(--pale,#EAF1F8) 100%)} .wk--reflection .wk-in{max-width:620px} .wk--reflection .kick{color:var(--blue-ink,#17698F)} .wk--reflection h1{font-size:clamp(27px,7vw,42px)} .wk--reflection h1 em{color:var(--magenta-ink,#D0008C)} .wk--reflection .wk-lede{font-size:17px;opacity:.78} .wk--reflection .wk-ask{margin-top:46px} .wk--reflection .wk-ask li{font-family:var(--serif);font-weight:300; font-size:clamp(18px,4.8vw,23px);line-height:1.5;margin-bottom:32px} .wk--reflection .wk-close{color:var(--blue-ink,#17698F);font-style:italic} .wk--reflection .wk-go,.wk--reflection .wk-dots{justify-content:center} /* ══ CREATE: A FIELD OF POSSIBILITY, NEVER A LIST OF ORDERS ════════════════ Her ruling, 1 September 2026: don't be so directive. You don't tell people what to do; you let their imagination do it. And: if you ever give me a blank screen like that at the back — where's the magic? Create was three commands on a flat magenta wall, on the one week that belongs entirely to the child. THIRTY-ONE WAYS DRIFT PAST, offered rather than instructed, at different sizes and different speeds so it reads as possibility swarming rather than as a menu. Light moves behind them. The last word gives the whole thing away: or in a way nobody has thought of yet. */ .wk--create{position:relative;overflow:hidden} .wk--create::before{content:"";position:absolute;inset:-30%;pointer-events:none; background: radial-gradient(38% 38% at 22% 26%,rgba(255,255,255,.34),transparent 70%), radial-gradient(44% 44% at 78% 66%,rgba(255,214,247,.30),transparent 72%), radial-gradient(30% 30% at 54% 90%,rgba(120,220,255,.22),transparent 70%)} @media (prefers-reduced-motion:no-preference){ .wk--create::before{animation:createGlow 26s ease-in-out infinite alternate} @keyframes createGlow{to{transform:translate3d(3%,-4%,0) scale(1.12)}} } .wk--create .wk-in{position:relative;z-index:1} .wk-field{display:flex;flex-wrap:wrap;gap:9px 14px;margin:40px 0 4px; align-items:baseline} .wk-field span{display:inline-block;color:#FFF;font-family:var(--display); font-weight:300;line-height:1.25;padding:5px 0; text-shadow:0 1px 14px rgba(120,10,100,.22)} .wk-field span:nth-child(5n+1){font-size:clamp(21px,5.6vw,30px)} .wk-field span:nth-child(5n+2){font-size:clamp(16px,4.2vw,21px);opacity:.86} .wk-field span:nth-child(5n+3){font-size:clamp(18px,4.9vw,25px);opacity:.94} .wk-field span:nth-child(5n+4){font-size:clamp(15px,3.9vw,19px);opacity:.8} .wk-field span:nth-child(5n+5){font-size:clamp(19px,5.2vw,27px);opacity:.9} .wk-field span:nth-child(3n+1){font-family:var(--serif);font-style:italic} @media (prefers-reduced-motion:no-preference){ .wk-field span{opacity:0; animation:fieldIn 900ms cubic-bezier(.2,.8,.25,1) both, fieldFloat var(--drift,9s) ease-in-out infinite alternate; animation-delay:var(--wait,0ms),calc(var(--wait,0ms) + 900ms)} @keyframes fieldIn{from{opacity:0;transform:translateY(12px) scale(.97)} to{opacity:1;transform:none}} @keyframes fieldFloat{to{transform:translate3d(0,-6px,0)}} } .wk--create .wk-close{margin-top:38px;font-size:clamp(17px,4.6vw,21px);color:#FFF} /* ══ WIDE, BECAUSE THE NARROW STRIP WAS NEVER THE RULE ═════════════════════ Her ruling, struck once already and struck again tonight: get rid of this narrow screen. 379 described how a mockup was sized inside a chat on her phone. It was never how a live world should be built, and every screen here should use the room it is given. */ @media(min-width:1000px){ .wk-in{max-width:980px} .wk h1{font-size:clamp(38px,4.4vw,62px)} .wk--daydream .wk-in{max-width:1120px} .wk--daydream h1{font-size:clamp(46px,5.6vw,82px)} .wk--daydream .wk-lede{max-width:44ch;font-size:23px} .wk--daydream .wk-ask{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:70px} .wk--daydream .wk-ask li{margin:0;font-size:25px} .wk-moments{display:grid;grid-template-columns:1fr 1fr;gap:0 56px} .wk-moment{padding-bottom:40px} .wk--reflection .wk-in{max-width:820px} .wk--reflection .wk-ask{display:grid;grid-template-columns:1fr 1fr;gap:38px 46px} .wk--reflection .wk-ask li{margin:0} } /* ── AND THE FIELD BECOMES A CONSTELLATION ────────────────────────────────── Her word was: a bit more creative. A left-justified wall of words is a list with the bullets taken off. These scatter — different sizes, different heights, drifting at their own speeds — so it reads as possibility in the air rather than as options in a column. */ .wk--create .wk-in{max-width:1180px} .wk-field{justify-content:center;gap:14px 30px;margin:58px 0 10px; align-items:center;text-align:center} .wk-field span{position:relative} .wk-field span:nth-child(7n+1){top:-16px} .wk-field span:nth-child(7n+2){top:12px} .wk-field span:nth-child(7n+3){top:-8px} .wk-field span:nth-child(7n+4){top:20px} .wk-field span:nth-child(7n+5){top:-22px} .wk-field span:nth-child(7n+6){top:6px} .wk-field span:nth-child(7n+7){top:-12px} .wk-field span:nth-child(11n+1){font-size:clamp(26px,6.4vw,44px);opacity:1} .wk-field span:nth-child(13n+5){font-size:clamp(24px,6vw,38px);opacity:.97} @media(min-width:1000px){ .wk-field{gap:18px 42px;margin-top:70px} .wk--create h1{font-size:clamp(44px,5.4vw,76px)} .wk--create .wk-lede{max-width:46ch} } .wk--create .wk-close{text-align:center;max-width:44ch;margin-left:auto;margin-right:auto} .wk--create .wk-go,.wk--create .wk-dots{justify-content:center} /* ══ MORE MOVEMENT, AND NOTHING CLIPPED AT THE TOP ═════════════════════════ Her words: I like what you've got here, but make it a bit more movement. And: I can't see what on earth you've got above that. The screens were vertically centred at 88vh, so on a short window the heading sat above the fold and she met the middle of a screen with no top to it. They start at the top now and the height only ever grows. */ .wk{align-items:flex-start;min-height:0;padding:64px 0 84px} @media(min-width:1000px){.wk{padding:84px 0 104px}} /* The field breathes rather than merely arriving. Each way drifts on its own path at its own speed, so nothing in it moves in step with anything else. */ @media (prefers-reduced-motion:no-preference){ .wk-field span{ animation:fieldIn 1000ms cubic-bezier(.2,.8,.25,1) both, fieldSwim var(--drift,9s) ease-in-out infinite alternate; animation-delay:var(--wait,0ms),calc(var(--wait,0ms) + 1000ms)} @keyframes fieldSwim{ 0% {transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(var(--sway,6px),-11px,0) scale(1.035)}} .wk-field span:nth-child(4n+1){--sway:-9px} .wk-field span:nth-child(4n+2){--sway:11px} .wk-field span:nth-child(4n+3){--sway:-5px} .wk-field span:nth-child(4n+4){--sway:7px} .wk-field span:nth-child(3n){animation-direction:normal,alternate-reverse} .wk--create::before{animation:createGlow 19s ease-in-out infinite alternate} @keyframes createGlow{ 0% {transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(4%,-5%,0) scale(1.18)}} } /* ══ THE TOP OF A WEEK, IN THE RIGHT ORDER ═════════════════════════════════ Her ruling, 1 September 2026: what are the two things at the top? A New Household Appliance — make that big and exciting. Then week four, create, put that somewhere. Bring it to life any way you like — make that different. Everything's the same. The whole thing's the same. SHE IS DESCRIBING A HIERARCHY THAT WAS NOT THERE. The world a child is living in for a month was a small italic line, the week marker sat in the same visual breath as it, and the invitation underneath was set in the same register again. Three different jobs, one voice. THE WORLD IS THE BIGGEST THING ON THE SCREEN NOW. The week marker steps aside onto its own line under a hairline, small and quiet. And the invitation is a different KIND of type entirely rather than a smaller size of the same. */ .wk-of{display:block;font-family:var(--display);font-weight:200;font-style:normal; font-size:clamp(32px,8.4vw,58px);line-height:1.06;letter-spacing:-.012em; opacity:1;margin:0 0 18px;max-width:16ch} .wk .kick{display:inline-block;margin:0;padding-top:14px; border-top:1px solid currentColor;opacity:.55;font-size:11.5px;letter-spacing:.2em} .wk h1{font-family:var(--serif);font-weight:300;font-style:italic; font-size:clamp(24px,6vw,38px);line-height:1.24;margin:22px 0 0;max-width:24ch} .wk h1 em{font-style:normal} @media(min-width:1000px){ .wk-of{font-size:clamp(52px,6.2vw,88px);max-width:14ch;margin-bottom:22px} .wk h1{font-size:clamp(30px,3.2vw,42px);max-width:28ch} } .wk--daydream .wk-of,.wk--reflection .wk-of{margin-left:auto;margin-right:auto} .wk--create .wk-of,.wk--create .kick,.wk--create h1{margin-left:auto;margin-right:auto; text-align:center} .wk--create .wk-of{color:#FFF;text-shadow:0 2px 26px rgba(120,10,100,.28)} /* ── AND MORE FLOAT. Her word exactly: a bit more float in it. ── */ @media (prefers-reduced-motion:no-preference){ @keyframes fieldSwim{ 0% {transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(var(--sway,10px),-22px,0) scale(1.06)}} .wk-field span:nth-child(4n+1){--sway:-17px} .wk-field span:nth-child(4n+2){--sway:21px} .wk-field span:nth-child(4n+3){--sway:-11px} .wk-field span:nth-child(4n+4){--sway:14px} .wk-field span:nth-child(5n){--sway:-24px} } /* Create is a centred screen, so the week marker and the invitation centre with it rather than hanging off the left edge of a symmetrical field. */ .wk--create .wk-in{text-align:center} .wk--create .wk-lede{margin-left:auto;margin-right:auto;max-width:34ch} .wk--create .kick{margin-left:auto;margin-right:auto;display:block;width:max-content} /* Daydream and the Reflection are centred too, for the same reason. */ .wk--daydream .kick,.wk--reflection .kick{margin-left:auto;margin-right:auto; display:block;width:max-content} .wk--daydream h1,.wk--reflection h1{margin-left:auto;margin-right:auto} /* ══ THE WEEK MARKER IS HER BLUE ═══════════════════════════════════════════ Her ruling, 1 September 2026: get week four, create — put it in blue, like the light blue. And it is the right colour for the job on this site. Magenta is the portal, what is possible ahead of you. Blue is the current, what is running through you. A week marker is neither of those — it says where in the month you are standing — so it takes her blue and leaves the magenta to the ideas. */ .wk .kick{color:var(--blue-ink,#17698F);border-top-color:rgba(47,168,224,.5)} .wk--create .kick{color:#8FDBFF;border-top-color:rgba(143,219,255,.6);opacity:1} .wk--create .wk-dots span{background:#8FDBFF} /* ══ THE ENTRANCE ══════════════════════════════════════════════════════════ One screen. Her world above, her name on clean cloud below, one way in. Nobody scrolls to find out where they have arrived. */ .entrance{min-height:100svh;display:grid;grid-template-rows:minmax(0,1fr) auto; background:linear-gradient(180deg,var(--pale,#EAF1F8),var(--cloud,#F7FAFD))} .entrance-world{position:relative;overflow:hidden;min-height:38svh} .entrance-world img{display:block;width:100%;height:100%;object-fit:cover; object-position:center 42%} .entrance-world .mist{position:absolute;inset:-18% -26%;pointer-events:none; background-repeat:no-repeat;background-size:cover;background-position:50% 50%; opacity:1;will-change:opacity,transform;z-index:2} .entrance-world .mist--far{opacity:.9} .entrance-say{padding:34px 24px 44px;text-align:center;position:relative;z-index:3; display:grid;place-items:center} .entrance-say .parts,.entrance-say .whole{grid-area:1/1} .entrance-say .whole{display:grid;gap:18px;place-items:center} .entrance-say .whole span{font-family:var(--display);font-weight:300; font-size:clamp(38px,10.4vw,88px);letter-spacing:.3em;line-height:1; text-indent:.3em;color:var(--ink,var(--iq-ink,#2F5A8C))} .entrance-say .whole i{font-style:normal;color:var(--magenta-ink,#D0008C)} .entrance-say .whole p{margin:0;max-width:30ch;font-family:var(--serif); font-weight:300;font-size:clamp(17px,4.4vw,23px);line-height:1.5; color:var(--ink,var(--iq-ink,#2F5A8C));opacity:.9} .entrance-say .whole p em{font-style:italic;color:var(--magenta-ink,#D0008C)} .entrance-say .part{display:block;font-family:var(--display);font-weight:200; font-size:clamp(22px,6vw,42px);letter-spacing:.02em;color:var(--ink,var(--iq-ink,#2F5A8C))} .entrance-say .part b{font-weight:400;color:var(--magenta-ink,#D0008C)} .entrance-in{margin-top:8px!important} @media(min-width:900px){ .entrance-say{padding:44px 32px 56px} .entrance-say .whole p{max-width:38ch} .entrance-world{min-height:46svh} } @media (prefers-reduced-motion:no-preference){ .entrance-say .part{opacity:0;animation:namePart 1000ms cubic-bezier(.2,.8,.25,1) both} .entrance-say .p1{animation-delay:200ms} .entrance-say .p2{animation-delay:800ms} .entrance-say .p3{animation-delay:1400ms} .entrance-say .parts{animation:nameGo 800ms ease-in 2200ms both} .entrance-say .whole span{opacity:0;animation:nameIn 1200ms cubic-bezier(.2,.75,.2,1) 2700ms both} .entrance-say .whole p{opacity:0;animation:nameSay 1100ms ease-out 3500ms both} .entrance-say .entrance-in{animation-delay:4100ms} /* THE WEATHER NEVER FULLY STOPS. Her law: an arrival plays every time, and a world should be alive whenever somebody looks at it. */ .entrance-world .mist{ animation:entranceLift 5200ms cubic-bezier(.33,0,.2,1) 900ms both, entranceBreathe 38s ease-in-out 6s infinite alternate} .entrance-world .mist--far{ animation:entranceLiftFar 6400ms cubic-bezier(.33,0,.2,1) 600ms both, entranceBreatheFar 52s ease-in-out 7s infinite alternate} @keyframes entranceLift{ from{opacity:1;transform:translate3d(0,0,0) scale(1.06)} to {opacity:.16;transform:translate3d(9%,-8%,0) scale(1.3)}} @keyframes entranceLiftFar{ from{opacity:.9;transform:translate3d(0,0,0) scale(1.04)} to {opacity:.1;transform:translate3d(-7%,-6%,0) scale(1.26)}} @keyframes entranceBreathe{ from{background-position:48% 52%;opacity:.16} to {background-position:56% 45%;opacity:.26}} @keyframes entranceBreatheFar{ from{background-position:52% 48%;opacity:.1} to {background-position:44% 54%;opacity:.2}} .entrance-world img{animation:entranceSettle 22s cubic-bezier(.19,1,.22,1) both} @keyframes entranceSettle{from{transform:scale(1.08)}to{transform:scale(1)}} } /* ══ THE OPENING IS HER QUESTION ═══════════════════════════════════════════ */ .entrance-say{display:block} .entrance-say h1{margin:0 auto;max-width:17ch; font-family:var(--serif);font-weight:300; font-size:clamp(34px,9vw,72px);line-height:1.1;letter-spacing:-.01em} .entrance-say h1 em{font-style:italic;color:var(--magenta-ink,#D0008C)} .entrance-line{margin:20px auto 0;max-width:34ch;font-family:var(--serif); font-weight:300;font-style:italic;font-size:clamp(16px,4.2vw,21px);opacity:.78} .entrance-in{margin-top:28px} @media(min-width:900px){ .entrance-say h1{font-size:clamp(52px,5.6vw,84px);max-width:19ch} .entrance-line{font-size:22px} } @media (prefers-reduced-motion:no-preference){ .entrance-say h1{opacity:0;animation:nameSay 1400ms cubic-bezier(.19,1,.22,1) 700ms both} .entrance-line{opacity:0;animation:nameSay 1100ms ease-out 1700ms both} .entrance-in{opacity:0;animation:nameSay 1000ms ease-out 2300ms both} } /* The name, small and late, running across rather than opening the world. */ .namebar-parts{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center; margin:14px 0 12px;font-family:var(--display);font-weight:200; font-size:clamp(17px,4.6vw,26px)} .namebar-parts b{font-weight:400;color:var(--magenta-ink,#D0008C)} /* HER QUESTION IS NEVER BELOW THE FOLD. The world takes the room it can get, and stops at the point where the question would be pushed off the screen — on a short laptop window as surely as on a tall phone. */ .entrance{grid-template-rows:minmax(0,58svh) auto} .entrance-world{min-height:0} @media(min-width:900px) and (min-height:800px){ .entrance{grid-template-rows:minmax(0,62svh) auto} } @media(max-height:560px){ .entrance{grid-template-rows:minmax(0,44svh) auto} .entrance-say{padding:22px 24px 30px} } /* ══ THE SEAM, AND THE ARRIVAL OF THE QUESTION ═════════════════════════════ Her words, 1 September 2026: I love the beautiful cloud to start off with, but it's so jarring — and if you're going to do something that needs to animate, it's too boring, it's too flat. THE JARRING PART WAS A HARD HORIZONTAL EDGE. Her world stopped dead on a straight line and a flat white band began. Her artwork is cloud at its lower edge and the ground beneath is cloud as well, so there was never any need for a border between them — the picture now dissolves into the ground and the join disappears. AND THE QUESTION WAS A FADE, which is the flattest move there is. It rises through the last of the weather word by word, the letters drawing in from too wide to their proper place, and her magenta phrase arrives last with a breath of portal light behind it. */ .entrance{grid-template-rows:minmax(0,60svh) auto} .entrance-world::after{content:"";position:absolute;left:0;right:0;bottom:-1px; height:34%;z-index:4;pointer-events:none; background:linear-gradient(180deg,rgba(247,250,253,0) 0%, rgba(247,250,253,.55) 46%,rgba(247,250,253,.92) 82%,var(--cloud,#F7FAFD) 100%)} .entrance-say{margin-top:-8svh;padding-top:0} @media(max-height:560px){.entrance-say{margin-top:-5svh}} .entrance-say h1 .w{display:inline-block} @media (prefers-reduced-motion:no-preference){ .entrance-say h1{opacity:1;animation:none} .entrance-say h1 .w{opacity:0; animation:wordUp 1250ms cubic-bezier(.19,1,.22,1) both} .entrance-say h1 .w:nth-child(1){animation-delay:1100ms} .entrance-say h1 .w:nth-child(2){animation-delay:1240ms} .entrance-say h1 .w:nth-child(3){animation-delay:1380ms} .entrance-say h1 .w:nth-child(4){animation-delay:1520ms} .entrance-say h1 em .w:nth-child(1){animation-delay:1820ms} .entrance-say h1 em .w:nth-child(2){animation-delay:1960ms} .entrance-say h1 em .w:nth-child(3){animation-delay:2100ms} .entrance-say h1 > .w:last-child{animation-delay:2260ms} @keyframes wordUp{ 0% {opacity:0;transform:translate3d(0,28px,0);filter:blur(7px);letter-spacing:.24em} 62% {opacity:1;filter:blur(0)} 100%{opacity:1;transform:none;filter:blur(0);letter-spacing:normal}} /* Her magenta arrives carrying a breath of the portal, which then settles. */ .entrance-say h1 em{position:relative} .entrance-say h1 em::before{content:"";position:absolute;inset:-42% -14%;z-index:-1; background:radial-gradient(60% 60% at 50% 50%,rgba(212,33,187,.30),transparent 72%); opacity:0;animation:portalBreath 3400ms ease-out 1820ms both} @keyframes portalBreath{0%{opacity:0;transform:scale(.7)} 38%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.28)}} .entrance-line{opacity:0;animation:nameSay 1200ms ease-out 2700ms both} .entrance-in{opacity:0;animation:nameSay 1100ms ease-out 3200ms both} } /* THE DISSOLVE STAYS, THE WORDS COME OFF THE PICTURE. Pulling the question up into the artwork killed the seam and broke her own finding of 20 August in the same move — tested across three arrival screens, words over a photograph lose. The fade now reaches much further up the picture, so by the point the first word begins the ground under it is already her cloud. Soft join, clean ground, both. */ .entrance-world::after{height:52%; background:linear-gradient(180deg,rgba(247,250,253,0) 0%, rgba(247,250,253,.42) 34%,rgba(247,250,253,.86) 66%, var(--cloud,#F7FAFD) 88%,var(--cloud,#F7FAFD) 100%)} .entrance-say{margin-top:-2svh} @media(max-height:560px){ .entrance{grid-template-rows:minmax(0,50svh) auto} .entrance-say{margin-top:-1svh;padding-bottom:24px} .entrance-line{margin-top:12px} .entrance-in{margin-top:18px} } /* ══ WHO DID YOU JUST THINK OF ═════════════════════════════════════════════ Six people, each one standing somewhere doing something. They arrive one after another, so a reader meets them at reading speed rather than as a block to be scanned. */ .knew{max-width:1080px;margin:0 auto;padding:0 24px;display:grid;gap:22px} @media(min-width:820px){.knew{grid-template-columns:1fr 1fr;gap:26px 52px}} .knew p{margin:0;font-family:var(--serif);font-weight:300; font-size:clamp(17px,4.4vw,21px);line-height:1.55; padding-left:20px;border-left:1px solid rgba(212,33,187,.34)} .knew b{font-weight:400;font-style:normal;color:var(--magenta-ink,#D0008C)} @media (prefers-reduced-motion:no-preference){ .knew p{opacity:0;transform:translateY(14px); animation:wkIn 900ms cubic-bezier(.2,.8,.25,1) both} .knew p:nth-child(1){animation-delay:60ms} .knew p:nth-child(2){animation-delay:200ms} .knew p:nth-child(3){animation-delay:340ms} .knew p:nth-child(4){animation-delay:480ms} .knew p:nth-child(5){animation-delay:620ms} .knew p:nth-child(6){animation-delay:760ms} } /* ══ HER FILM AT THE ENTRANCE ══════════════════════════════════════════════ The film fills the world above the words. Her own first frame sits behind it as the still, so nothing ever flashes to another picture. */ .entrance-film,.entrance-still{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 46%;display:block} .entrance-still{z-index:0} .entrance-film{z-index:1} /* STILLNESS IS HONOURED BY NOT STARTING IT, NEVER BY DELETING HER WORLD. HER WORDS, 3 SEPTEMBER 2026: the film still does not work, and it is not my laptop or phone. She was right on both counts and this line is why. display:none removed her film ENTIRELY for anybody whose machine has Reduce Motion switched on in Accessibility — and her poster is the film's own first frame, so what that person meets is her portal, sharp, correct, and frozen forever with no way on earth to start it. A STILL THAT NEVER MOVES, exactly as she described it, caused by the site rather than by her device. Her law is that reduced motion is a person telling us movement hurts them and it is still honoured. IT IS HONOURED HERE BY NOT PLAYING ON ITS OWN. The film stays in the page, nothing moves unless they ask, and the quiet underlined word is there for anybody who wants to see her world. */ @media (prefers-reduced-motion:reduce){ .entrance-film{display:block} } /* THE WORDS SIT ABOVE THE DISSOLVE, NEVER UNDER IT. The fade that melts her film into the cloud was given z-index 4 and the words z-index 3, in the same stacking context — so the overlay painted across the top of her question. On a wide screen the words began below the fade's reach and it never showed; on a phone the taller crop pushed the first line straight under it, and "What Is Your" was sliced in half. */ .entrance-say{z-index:6;position:relative} .entrance-world::after{z-index:4} @media(max-width:700px){ .entrance-say{margin-top:0} .entrance{grid-template-rows:minmax(0,54svh) auto} } /* ══ THE ENTRANCE NEVER DEPENDS ON A VIEWPORT UNIT TO EXIST ════════════════ Her words: it's not working, and I've just gone into a private window. Measured on the live site: the world was 223 BY ZERO PIXELS. Her film was there, loaded, readyState 4, no error — inside a box with no height, so nothing could be seen and nothing would play. THE CAUSE. Every height on this entrance was written in svh. When svh resolves to nothing — a browser that predates it, a window reporting no size, iOS mid address-bar transition — minmax(0, 54svh) becomes zero, the row collapses, and her whole world disappears while every file involved sits there perfectly correct. SO HEIGHT COMES FROM HER FILM ITSELF NOW. It is three by two, so the world is three by two, and it exists whatever the viewport claims. svh only ever trims it on a tall screen — an improvement rather than a foundation. A picture cannot vanish because a browser could not answer how tall a window is. */ .entrance{grid-template-rows:auto auto!important} .entrance-world{aspect-ratio:3/2;width:100%;min-height:220px;height:auto} @media(min-height:1px){ .entrance-world{max-height:56svh} } @media(min-width:900px){ .entrance-world{max-height:62svh;min-height:340px} } @media(max-width:700px){ .entrance-world{max-height:54svh;min-height:260px} } .entrance-film,.entrance-still{position:absolute;inset:0;width:100%;height:100%} /* ══ THE WORLD IS A PRESENCE, AND IT STILL CANNOT COLLAPSE ═════════════════ The aspect-ratio floor that stopped her film vanishing then capped it at 250 pixels on an 812 pixel phone — a small band across the top rather than a world to arrive in. Measured: 375 by 260 where it should be over 400. SO THE RATIO IS THE FALLBACK, NEVER THE RULE. Any browser that can answer how tall a window is gets a real share of it. Any browser that cannot falls back to her film's own three-by-two, which always has height. Neither road can reach zero. */ .entrance-world{aspect-ratio:3/2;min-height:300px;max-height:none;height:auto} @supports (height:1svh){ .entrance-world{aspect-ratio:auto;height:56svh;min-height:300px} @media(min-width:900px){.entrance-world{height:62svh;min-height:360px}} @media(max-height:560px){.entrance-world{height:50svh;min-height:220px}} } /* The world is given the room a world needs, and her magenta only on the word that matters in it. */ .wonder{padding-top:96px;padding-bottom:34px} .wonder h2{font-size:clamp(29px,7.6vw,50px);line-height:1.14;max-width:20ch; margin-left:auto;margin-right:auto} .wonder h2 em{font-style:italic;color:var(--magenta-ink,#D0008C)} .wonder .lede{max-width:44ch;margin-left:auto;margin-right:auto;margin-top:26px} @media(min-width:900px){.wonder{padding-top:130px}.wonder h2{max-width:22ch}} /* Her film holds where it ends rather than snapping back to its beginning. */ .entrance-film{transition:none} /* ══ HER FILM IS NEVER CROPPED, AND NOTHING OF MINE SITS ON IT ═════════════ HER WORDS, 3 SEPTEMBER 2026: I tell you there's a problem, and you spend a whole day and can't even get the image right. MEASURED RATHER THAN REASONED, which is her own law after the night this world rendered 223 pixels by nought: her film is 1920 by 1280, a clean three by two, and I was showing it in a box 1280 by 446. NEARLY HALF OF HER OWN FILM WAS BEING CUT OFF, every time, on every screen. I DID IT WITH A VIEWPORT UNIT — minmax(0,60svh) — which is the exact mechanism written into her own file as the thing that collapsed this entrance once already. Her law there is precise: HEIGHT COMES FROM THE ASSET'S OWN ASPECT RATIO, and svh may only ever trim it. I had made svh decide the height outright. AND I PUT MY WEATHER BACK OVER HER FILM. A session before me had already taken it off, on her ruling that her film opens in cloud and clears itself, so mine was doubling her own idea and hiding it behind my version. My dissolve went straight back on top of it tonight. It is off again. HER FILM, WHOLE, AT ITS OWN RATIO. Then her question, on clean ground. */ .entrance{display:block;min-height:0;background:var(--cloud,#F7FAFD)} .entrance-world{position:relative;width:100%;aspect-ratio:3/2;min-height:0; overflow:hidden;background:var(--pale,#EAF1F8)} .entrance-world .entrance-film, .entrance-world .entrance-still{position:absolute;inset:0;display:block; width:100%;height:100%;object-fit:cover;object-position:center center; animation:none;transform:none} /* The film sits over its own first frame, so nothing flashes and nothing is ever an empty box. */ .entrance-world .entrance-still{z-index:1} .entrance-world .entrance-film{z-index:2} /* NOTHING OF MINE OVER HER FILM. Her ruling, twice now. */ .entrance-world::after{content:none} .entrance-world .mist{display:none} .entrance-say{margin-top:0;padding:44px 24px 52px} @media(min-width:900px){.entrance-say{padding:56px 32px 64px}} /* ══ ONE ARRIVAL, RATHER THAN TWO THINGS ON A PAGE ═════════════════════════ Her ruling, 3 September 2026: you can't even get me an entrance. It was her film in a box with a headline underneath it. The question was already sitting there before her world had begun, so there was never a moment where the world resolved and then turned and spoke to the person standing in it. NOW: THE FILM PLAYS. THE WORLD SETTLES. THEN IT ASKS YOU. And her film's lower edge meets the page rather than stopping at a box — the ground beneath is her cloud and her film ends in cloud, so the join is simply removed. This is the JOIN, not weather: it lives in the last tenth of the frame and nothing of mine sits over her world. */ .entrance-world::after{content:"";position:absolute;left:0;right:0;bottom:-1px; height:11%;z-index:3;pointer-events:none; background:linear-gradient(180deg,rgba(247,250,253,0),var(--cloud,#F7FAFD))} .entrance-say{opacity:0} .entrance.is-open .entrance-say{opacity:1} @media (prefers-reduced-motion:reduce){ .entrance-say{opacity:1} } @media (prefers-reduced-motion:no-preference){ /* Held until her world has finished, then it rises out of the cloud. */ .entrance-say h1 .w,.entrance-line,.entrance-in{animation-play-state:paused} .entrance.is-open .entrance-say h1 .w, .entrance.is-open .entrance-line, .entrance.is-open .entrance-in{animation-play-state:running} .entrance-say{transition:opacity 600ms ease-out} } /* Shown only when her film has genuinely failed to start — never otherwise. */ .entrance-start{display:none} .entrance.film-held .entrance-start{display:inline-block;position:absolute; left:50%;bottom:6%;transform:translateX(-50%);z-index:5; font-family:var(--display);font-weight:300;font-size:14px;letter-spacing:.14em; text-transform:uppercase;color:var(--magenta-ink,#D0008C); text-decoration:underline;text-underline-offset:6px; text-decoration-color:var(--magenta,#D421BB);background:none;border:0;padding:6px 2px} .entrance.film-held .entrance-start:hover{color:var(--magenta,#D421BB)} /* ══════════════════════════════════════════════════════════════════════════ THE ENTRANCE, WHOLE. Written last so it settles every argument above it. Her words, 3 September 2026: there's no magic, there is no wonder — take a person of any age to the point where they go, I need this in my life. ONE WORLD, FLOOR TO CEILING. Her film is not a banner with a caption under it. It fills the screen, it is never cropped, and the cloud it ends in keeps going down the page so there is no edge anywhere — the reader is standing inside it before a single word arrives. THEN THE WORLD ASKS THEM SOMETHING. Her question rises out of that cloud with her portal breathing behind it, and the way on is a quiet underlined word in her red — the gesture she named herself as gentle rather than in your face. ══════════════════════════════════════════════════════════════════════════ */ .entrance{display:block!important;min-height:0!important;position:relative; background:var(--cloud,#F7FAFD)!important;grid-template-rows:none!important} .entrance-world{position:relative!important;width:100%!important; aspect-ratio:3/2!important;height:auto!important;max-height:none!important; min-height:0!important;overflow:hidden!important; background:var(--pale,#EAF1F8)} @media(min-width:1100px){ /* On a wide screen her film is given the room to be a place rather than a strip, while still never being cut: the width does the growing. */ .entrance-world{aspect-ratio:3/2!important} } .entrance-film,.entrance-still{position:absolute!important;inset:0!important; width:100%!important;height:100%!important;object-fit:cover!important; object-position:center 46%!important;display:block!important} .entrance-still{z-index:0!important} .entrance-film{z-index:1!important} /* NO EDGE. Her film ends in cloud and the page is cloud, so the last tenth of the frame simply becomes the page. This is the join and nothing else — no weather of mine sits over her world. */ .entrance-world::after{content:""!important;position:absolute;left:0;right:0; bottom:-1px;height:14%;z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(247,250,253,0),var(--cloud,#F7FAFD))!important} /* HER QUESTION, RISING OUT OF THE CLOUD, WITH THE PORTAL BEHIND IT. */ .entrance-say{position:relative;z-index:3;margin-top:0!important; padding:clamp(38px,7vw,86px) 24px clamp(52px,8vw,104px)!important; text-align:center;display:block!important;overflow:visible} .entrance-say::before{content:"";position:absolute;left:50%;top:6%; width:min(128vw,1180px);aspect-ratio:1;transform:translateX(-50%); z-index:-1;pointer-events:none; background:radial-gradient(closest-side,rgba(212,33,187,.16),rgba(47,168,224,.07) 46%,transparent 72%)} @media (prefers-reduced-motion:no-preference){ .entrance-say::before{animation:portalAlive 17s ease-in-out infinite alternate} @keyframes portalAlive{ from{opacity:.72;transform:translateX(-50%) scale(.94)} to {opacity:1;transform:translateX(-50%) scale(1.1)}} } .entrance-say h1{margin:0 auto!important;max-width:15ch!important; font-family:var(--serif);font-weight:300;font-style:normal; font-size:clamp(38px,9.6vw,96px)!important;line-height:1.04!important; letter-spacing:-.015em} .entrance-say h1 em{font-style:italic;color:var(--magenta-ink,#D0008C)} .entrance-line{margin:clamp(20px,3vw,32px) auto 0!important;max-width:36ch; font-family:var(--serif);font-weight:300;font-style:italic; font-size:clamp(17px,2.2vw,24px)!important;opacity:.8} /* The way on: her own gesture, never a pill. */ .entrance-on{margin-top:clamp(28px,4vw,44px)} .entrance-on a{font-family:var(--display);font-weight:300;font-size:14.5px; letter-spacing:.2em;text-transform:uppercase;color:var(--magenta-ink,#D0008C); text-decoration:underline;text-underline-offset:8px; text-decoration-thickness:1px;text-decoration-color:var(--magenta,#D421BB)} .entrance-on a:hover{color:var(--magenta,#D421BB)} /* Her line carries the entrance, so it is given the weight of a line rather than the weight of a caption. The second half is her turn — italic, in her magenta, and on its own breath. */ .entrance-line{font-style:normal!important;opacity:1!important; max-width:26ch!important;line-height:1.34!important; font-size:clamp(20px,2.9vw,32px)!important} .entrance-line em{display:inline-block;margin-top:.28em;font-style:italic; color:var(--magenta-ink,#D0008C)} /* ══ THE OPENING ═══════════════════════════════════════════════════════════ Her ruling, 7 September 2026: they don't care about a month. Create the joy, create the magic, show how important this is — and the statistic comes low. Every version before this sold the mechanism. */ .entrance-say h1{max-width:16ch!important; font-size:clamp(40px,10vw,104px)!important;line-height:1.02!important} .entrance-line{font-family:var(--serif)!important;font-style:italic!important; font-size:clamp(21px,3.4vw,38px)!important;color:var(--magenta-ink,#D0008C)!important; opacity:1!important;max-width:22ch!important;margin-top:clamp(18px,2.4vw,28px)!important} .entrance-hers{margin:clamp(30px,4vw,46px) auto 0;max-width:30ch; font-family:var(--serif);font-weight:300;font-size:clamp(16px,1.9vw,21px); line-height:1.5;color:var(--ink,var(--iq-ink,#2F5A8C));opacity:.72} .entrance-hers em{font-style:italic;color:var(--magenta-ink,#D0008C)} @media (prefers-reduced-motion:no-preference){ .entrance-hers{opacity:0;animation:nameSay 1200ms ease-out 3200ms both} .entrance.is-open .entrance-hers{animation-play-state:running} } /* ══════════════════════════════════════════════════════════════════════════ THE HOMEPAGE LEAD, AS SHE SETTLED IT LIVE — 7 September 2026 ══════════════════════════════════════════════════════════════════════════ */ /* HER UNICORN LINE STANDS ALONE. Nothing paired under it — she struck that herself when she tried it. */ .entrance-say h1{max-width:15ch!important; font-size:clamp(36px,7.4vw,86px)!important;line-height:1.08!important; font-family:var(--serif)!important;font-weight:300!important} .entrance-say h1 em{font-style:italic;color:var(--magenta-ink,#D0008C)} /* ── THREE BEATS, A PICTURE BESIDE THEM. Never a wall of words. ── */ .beats{padding:clamp(60px,8vw,120px) 0;background:var(--cloud,#F7FAFD)} .beats-in{max-width:1220px;margin:0 auto;padding:0 26px;display:grid;gap:clamp(34px,5vw,64px)} @media(min-width:940px){.beats-in{grid-template-columns:1fr 1fr;align-items:center}} .beats-say{display:grid;gap:clamp(22px,3vw,38px)} .beat{margin:0;font-family:var(--serif);font-weight:300;line-height:1.18; font-size:clamp(23px,3.4vw,40px);color:var(--ink,var(--iq-ink,#2F5A8C))} .beat.last{font-size:clamp(26px,4vw,50px)} .beat.last em{font-style:italic;color:var(--magenta-ink,#D0008C)} .beats-pic img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px;display:block} @media (prefers-reduced-motion:no-preference){ .beat{opacity:0;transform:translateY(16px); animation:beatIn 1100ms cubic-bezier(.19,1,.22,1) both} .beat:nth-child(1){animation-delay:.15s} .beat:nth-child(2){animation-delay:1.15s} .beat:nth-child(3){animation-delay:2.25s} @keyframes beatIn{to{opacity:1;transform:none}} } /* ── THE IMAGINE SEQUENCE ────────────────────────────────────────────────── HER BUILD REQUIREMENT, not a copy note: never a stacked block of text. Each line floats in on its own and floats out before the next arrives. IT FAILS READABLE. Without animation — no support, or a person who has asked for stillness — all five simply stand and can be read. */ .imagine{padding:clamp(56px,7vw,104px) 0;background:linear-gradient(180deg, var(--cloud,#F7FAFD),var(--sky,#EAF1F8) 60%,var(--cloud,#F7FAFD))} .imagine-stage{max-width:1000px;margin:0 auto;padding:0 26px;display:grid;gap:26px; text-align:center} .imagine-stage p{margin:0;font-family:var(--serif);font-weight:300; font-size:clamp(24px,3.9vw,48px);line-height:1.16;color:var(--ink,var(--iq-ink,#2F5A8C))} .imagine-stage p em{font-style:italic;color:var(--magenta-ink,#D0008C)} .imagine-stage p.found{font-family:var(--display);font-weight:200; font-size:clamp(19px,2.6vw,32px);letter-spacing:.02em} @media (prefers-reduced-motion:no-preference){ /* One at a time, in the same place, each arriving as the last one leaves. */ .imagine-stage{display:grid;gap:0;min-height:clamp(190px,22vw,300px); place-items:center} .imagine-stage p{grid-area:1/1;opacity:0; animation:floatLine 22s cubic-bezier(.33,0,.2,1) infinite; animation-delay:calc(var(--n) * 4.4s)} /* EAGLE EYE MEASURED THE STAGE GOING EMPTY, sampling every half-second across a full loop: eight blank ticks of forty-seven, up to a second at each handoff. Never two lines at once, which was the fault I feared — but a stutter on her hero rather than a designed breath. Each line now holds until the next has arrived. The plateau runs to 21% and the next begins at 20%, so they cross for a beat and the stage never blanks. */ @keyframes floatLine{ 0% {opacity:0;transform:translateY(22px) scale(.99)} 3.2% {opacity:1;transform:none} 20% {opacity:1;transform:none} 23% {opacity:0;transform:translateY(-18px) scale(1.01)} 100% {opacity:0;transform:translateY(22px) scale(.99)}} } /* The audience line, introducing the six. Hers, settled 7 September 2026. */ .audience{padding-top:clamp(50px,6vw,84px);padding-bottom:clamp(26px,3vw,40px)} .audience h2{font-family:var(--serif);font-weight:300;line-height:1.1; font-size:clamp(30px,5vw,62px);max-width:16ch;margin:0 auto} .audience h2 em{font-style:italic;color:var(--magenta-ink,#D0008C)} .audience .lede{margin:clamp(20px,2.6vw,30px) auto 0;max-width:34ch; font-family:var(--serif);font-weight:300;font-size:clamp(18px,2.3vw,26px); line-height:1.4;color:var(--ink,var(--iq-ink,#2F5A8C))} .audience .lede em{font-style:italic;color:var(--magenta-ink,#D0008C)} /* ══ NOTHING ESCAPES ITS FRAME, AND HER PAGE NEVER SLIDES SIDEWAYS ═════════ Measured at 390 wide: 40 pixels of horizontal overflow, so the whole page could be dragged left. The mist layers sit deliberately outside their frame — inset:-16% -24% — so the weather drifts in from beyond the edge, and every frame holding one must clip it. The six cards already did. The plates did not, so six of them were pushing her page off the screen on a phone. */ .misty{overflow:hidden} .up-frame{overflow:hidden} html,body{overflow-x:hidden;max-width:100%} /* ── THE DRAWING ROOM ───────────────────────────────────────────────── The shared atelier arrives wearing her ground and her ink already, and with nothing filled in it — no coloured pill anywhere, which is the gesture her moments law actually turns on. THREE THINGS IT CANNOT KNOW, AND THEY ARE WHAT MAKES IT HERS. The question came out in the utility sans, so it read as a field label rather than as the moment; it carries her serif here, at the size the rest of her world asks a question in. The answer was a hard-ruled rectangle. **A box with four sides is the single most form-shaped object on any screen**, however gently it is coloured, so it becomes one quiet line to write on instead. And Keep This is her own gesture, said in her own words about the link that got this right: it's gentle, it's not in your face — it's just in red, and it's got the red underline. AND IT HAS TO OUTWEIGH THE MODULE, WHICH PRINTS ITS OWN STYLING AS AN INLINE BLOCK AT THE END OF THE DOCUMENT — measured, rather than argued about: it is the last stylesheet on the page, so at equal weight it wins and the first version of this changed nothing at all. Every selector below carries the room as well as the part. */ .lam-atelier{max-width:760px} .lam-atelier .lam-atelier__asks{ font-family:var(--serif);font-weight:300; font-size:clamp(25px,3.1vw,38px);line-height:1.22; letter-spacing:.002em;color:var(--ink);text-transform:none} .lam-atelier .lam-atelier__because{ font-family:var(--font-util);font-size:15px;line-height:1.62; color:var(--ink-soft);opacity:1;margin-bottom:1.9rem} .lam-atelier .lam-atelier__said{ font-family:var(--serif);font-size:22px;line-height:1.6;color:var(--ink); background:transparent;border:0;border-bottom:1px solid rgba(47,90,140,.22); border-radius:0;padding:.4rem 0 .7rem; transition:border-color .25s ease} .lam-atelier .lam-atelier__said:focus{ outline:0;border-bottom-color:var(--magenta-ink)} .lam-atelier .lam-atelier__keep{ font-family:var(--font-util);font-size:15px;letter-spacing:.02em; color:var(--magenta-ink);background:transparent;border:0;padding:0; text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:6px; text-decoration-color:rgba(208,0,140,.45); transition:text-decoration-color .25s ease} .lam-atelier .lam-atelier__keep:hover,.lam-atelier .lam-atelier__keep:focus-visible{ background:transparent;color:var(--magenta-ink); text-decoration-color:var(--magenta-ink)} .lam-atelier .lam-atelier__later,.lam-atelier .lam-atelier__change{ font-family:var(--font-util);font-size:14px;color:var(--ink-soft)} /* Her ending, where the whole sitting is read back. */ .lam-atelier .lam-atelier__asked{color:var(--ink-soft)} .lam-atelier .lam-atelier__hers{font-family:var(--serif);font-size:20px;color:var(--ink)} /* ══ THE DRAWER ══════════════════════════════════════════════════════ What they made, kept. Nothing here counts, ranks or marks anything — her law that a wall showing only the ones that worked teaches everybody to hold back the hard ones. Every card is the same size whatever is in it, deliberately. */ .drawer{display:grid;gap:14px;grid-template-columns:1fr;max-width:44rem; margin:0 auto;padding:0 24px} @media (min-width:720px){.drawer{grid-template-columns:1fr 1fr;max-width:56rem}} .drawer .kept{background:var(--white);border:1px solid var(--hair); border-radius:3px;padding:20px 22px} .drawer .kept b{display:block;font-family:var(--display);font-weight:400; font-size:1.12rem;color:var(--ink);letter-spacing:.01em} .drawer .kept .kept-who{display:block;font-family:var(--display);font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:var(--magenta-ink); margin:6px 0 0} .drawer .kept p{margin:12px 0 0;font-family:var(--serif);font-size:1.04rem; line-height:1.5;color:var(--ink-soft)} /* Putting one in is two lines and a quiet press, never a panel of fields. */ .iq-keep{margin:30px auto 0;max-width:30rem;text-align:left} .iq-keep label{display:block;margin:0 0 20px} .iq-keep label span{display:block;font-family:var(--serif);font-size:1.02rem; color:var(--ink-soft);margin:0 0 6px} .iq-keep input,.iq-keep textarea,.iq-keep select{width:100%;box-sizing:border-box; background:transparent;border:0;border-bottom:1px solid var(--hair); border-radius:0;font-family:var(--display);font-size:1.05rem;font-weight:300; color:var(--ink);padding:8px 2px;transition:border-color 220ms ease} .iq-keep textarea{resize:vertical;line-height:1.5} .iq-keep input:focus,.iq-keep textarea:focus,.iq-keep select:focus{ outline:none;border-bottom-color:var(--magenta)} .iq-keep p{text-align:center} .iq-keep button.enter{cursor:pointer;font-family:var(--display); -webkit-appearance:none;appearance:none} .iq-keep button.enter:hover{background:var(--magenta);color:var(--white)} /* ══ HER RULING, 29 SEPTEMBER 2026, AND IT GOVERNS EVERY SCREEN ═══════════ Her words, and she said she would not repeat them: "Every fucking image or video goes all the way across the site. You don't train a unicorn now needs to sit on the left on the video itself. I want to see the video just going the whole site. Nothing will sit next to one another. Apart from the six, the six different program cards." SO: EDGE TO EDGE, ONE AT A TIME, EVERYWHERE. No picture on this world shares a row with anything — not with another picture and not with words. The six programme cards are the single exception she named herself, and they are left exactly as they are. AND HER LINE NOW LIVES ON THE FILM. Her finding of 20 August — words on their own ground, never over a photograph — is struck by her here, plainly, for this screen. Her word governs the moment she says it. Every declaration carries !important because the entrance above is written that way from end to end and nothing quieter can move it. */ /* ── THE FILM, THE WHOLE WIDTH, AND HER LINE ON THE LEFT OF IT ── */ .entrance{display:block!important;position:relative!important; padding:0!important;margin:0!important;max-width:none!important} .entrance-world{width:100%!important;max-width:none!important;margin:0!important} /* Her words need ground under them wherever the film happens to be pale or busy. This is the film's own cloud brought forward on the left, never a panel sitting on top of her artwork. */ .entrance::before{content:"";position:absolute;left:0;top:0;bottom:0; width:min(74%,980px);z-index:4;pointer-events:none; background:linear-gradient(90deg, rgba(247,250,253,.94) 0%,rgba(247,250,253,.80) 34%, rgba(247,250,253,.42) 66%,rgba(247,250,253,0) 100%)} .entrance-say{position:absolute!important;left:0;top:0;bottom:0;z-index:5; display:flex!important;align-items:center!important; width:min(52%,720px)!important; padding:0 clamp(20px,4vw,72px)!important;margin:0!important; text-align:left!important;overflow:visible} .entrance-say h1{margin:0!important;max-width:13ch!important; font-size:clamp(30px,5.4vw,92px)!important;line-height:1.02!important} /* ── AND IT ARRIVES AT ONCE, NOT AFTER HER FILM ────────────────────────────── Hers, 29 September 2026: the H1 about the unicorn is too small and it comes in too slow. THE WAITING WAS RIGHT WHEN THE LINE SAT UNDER THE FILM — her world played, settled, and then spoke to the person standing in it. Now her line is ON the film, so holding it back until the film is nearly over leaves the screen saying nothing for six seconds. Her own three-second law: somebody needs to know what this is within three seconds of landing. So her line no longer waits on the film at all. It rises out of the cloud on its own, a third of a second in, and is settled before the first second is out. Everything else on the entrance still waits for her world to finish. */ .entrance-say{opacity:1!important;transition:none!important} @media (prefers-reduced-motion:no-preference){ /* Hers, 29 September 2026: the text needs to come in straight away. No wait at all now — it begins the instant the page does. */ .entrance-say h1{opacity:0; animation:iqLineUp 620ms cubic-bezier(.19,1,.22,1) 0ms both!important} @keyframes iqLineUp{ from{opacity:0;transform:translate3d(0,20px,0);filter:blur(6px)} to {opacity:1;transform:none;filter:blur(0)}} } /* On a narrow screen the film is a short wide band, so her line takes the whole of it rather than half — still on the left, still on the film. */ @media(max-width:899px){ .entrance::before{width:100%; background:linear-gradient(90deg, rgba(247,250,253,.92) 0%,rgba(247,250,253,.72) 52%,rgba(247,250,253,.26) 100%)} .entrance-say{width:100%!important;padding:0 22px!important} /* The frame is short and wide here, so her line takes the width rather than a column of it — a narrow ribbon of type in the middle of a film reads as an accident. */ .entrance-say h1{max-width:none!important;width:100%!important; font-size:clamp(23px,6.8vw,34px)!important;line-height:1.08!important} } /* ── EVERY PICTURE, THE WHOLE WIDTH, AND NEVER CUT ── */ .plate:not(.logo){width:100%!important;max-width:none!important;margin:0!important; aspect-ratio:auto!important;background:var(--cloud,#F7FAFD)} .plate:not(.logo) img{width:100%!important;height:auto!important; object-fit:contain!important;display:block!important} /* THE THREE-ACROSS ON EVERY PATHWAY PAGE IS NO LONGER ACROSS. Three squares in a row, cropped to fit, inside a 1020px rail — three of her rules broken in one block. One under another now, each the whole width, each whole. */ .strip{display:block!important;grid-template-columns:none!important; max-width:none!important;margin:0!important;padding:0!important;gap:0!important} .strip img{width:100%!important;height:auto!important; aspect-ratio:auto!important;object-fit:contain!important; display:block!important;grid-column:auto!important} /* ── THE THREE LINES, CENTRED, ARRIVING ONE AFTER ANOTHER ────────────────── Hers, the same day: under the hero image, the words fading in, all centred in the middle. Nothing beside them. */ .beats-in{grid-template-columns:minmax(0,1fr);max-width:980px;justify-items:center} .beats-say{text-align:center;justify-items:center} .beat{max-width:30ch;margin-inline:auto} /* ONE, AND IT GOES. TWO, AND IT GOES. THREE STAYS. Hers, 29 September 2026: these three should fade in slowly, so you don't see three lines of stuff — one, and it goes; two, and it goes; three. The last one can probably stay. So they share one place on the screen rather than stacking, and the stage keeps its height so nothing under it jumps as they pass. It begins when she reaches it, not on a clock that ran out while she was still at the film. IT FAILS READABLE. With no script, or for anybody who has asked for stillness, all three simply stand there one under another and can be read. */ @media (prefers-reduced-motion:no-preference){ /* The section itself holds still; only her lines move. */ .js-float .beats.float{opacity:1;transform:none} .js-float .beats .beats-say{gap:0;place-items:center; min-height:clamp(170px,19vw,260px)} .js-float .beats .beat{grid-area:1/1;opacity:0;transition:none; animation-fill-mode:both;animation-play-state:paused; animation-timing-function:cubic-bezier(.33,0,.2,1)} .js-float .beats.is-in .beat{animation-play-state:running} .js-float .beats .beat:nth-child(1){animation-name:beatPass;animation-duration:3.6s;animation-delay:.25s} .js-float .beats .beat:nth-child(2){animation-name:beatPass;animation-duration:3.6s;animation-delay:3.45s} .js-float .beats .beat:nth-child(3){animation-name:beatStay;animation-duration:1.2s;animation-delay:6.65s} /* Each holds until the next has arrived, so the stage never goes empty — the fault Eagle Eye measured on her Imagine lines, avoided here. */ @keyframes beatPass{ 0% {opacity:0;transform:translateY(18px)} 24% {opacity:1;transform:none} 76% {opacity:1;transform:none} 100%{opacity:0;transform:translateY(-16px)}} @keyframes beatStay{ from{opacity:0;transform:translateY(18px)} to {opacity:1;transform:none}} } /* ══ THE IMAGINE LINES WAIT UNTIL SHE REACHES THEM ════════════════════════ Hers, 29 September 2026: when I get to it, it's landing on the wrong thing. You've got that last line, This Is Where They Found It — it means absolutely nothing if the other things have already passed. So don't start that fading until someone gets to it. THEY WERE ON A CLOCK THAT STARTED WHEN THE PAGE DID. Four lines could pass while she was still at the film, so she arrived at the resolution of something she had never seen begin. AND IT NO LONGER LOOPS, which is the same fault one turn later: it ran through, wiped her last line and started again. It goes once and holds on This Is Where They Found It — her own ruling on the three lines above, the last one can probably stay there. One word from her puts the loop back. */ .js-float .imagine.float{opacity:1!important;transform:none!important} @media (prefers-reduced-motion:no-preference){ /* FILL BOTH, OR THE LAST LINE VANISHES THE MOMENT IT ARRIVES. The rule above sets `animation` as a shorthand, which resets fill-mode to none — so every line falls back to its own opacity:0 the instant its run ends, and This Is Where They Found It blinked and went. Measured, not reasoned. */ .imagine-stage p{animation-play-state:paused;animation-iteration-count:1; animation-fill-mode:both} .imagine.is-in .imagine-stage p{animation-play-state:running} /* The last line arrives and stays, rather than fading out behind nothing. */ .imagine-stage p.found{animation-name:imagineStay;animation-duration:1400ms; animation-timing-function:cubic-bezier(.19,1,.22,1)} @keyframes imagineStay{ from{opacity:0;transform:translateY(22px) scale(.99)} to {opacity:1;transform:none}} } /* ══ HER FILM IS WIDE NOW, SO THE WHOLE OF IT IS ON HER SCREEN ═════════════ Hers, 29 September 2026: it's too high. I'm on a computer and I'm looking, and I can't see the whole video. You need to make one that is wider and not as tall. THREE BY TWO IS 960 PIXELS TALL ON A 1440 SCREEN, and her window is 900 with her own bar above it — so the bottom of her own world was always below the fold, on the machine she actually works on. It is two to one now: 720 tall at that width, whole, with room above and below it. THE FILM ITSELF IS CUT TO THAT SHAPE rather than the frame cropping it, so nothing is squeezed and nothing is guessed at by the browser. Her original is untouched in her own library. */ .entrance-world{aspect-ratio:2/1!important} @media(min-width:1100px){.entrance-world{aspect-ratio:2/1!important}} /* A SLOT THAT HOLDS A FILM LOOKS EXACTLY LIKE ONE THAT HOLDS A PICTURE. Hers, 29 September 2026 — she put a film in the big slot under her three lines. Same width, same true shape, never cut. */ .plate:not(.logo) video{width:100%!important;height:auto!important; object-fit:contain!important;display:block!important} /* ══ HER COUPLET, ARRIVING AS TWO THINGS ═══════════════════════════════════ Hers, 29 September 2026: it's a site about discovering your magic, and the hero is just sitting there. Make it come in as two different things. Make it magical. We've got to have different sizing, or different weighting, between the two lines. THE FIRST BEAT IS THE STATEMENT AND THE SECOND IS THE TURN. She gave the shape herself — a first part that lands and sits on you, and then the line that changes what the first one meant. So they are not the same size and they do not arrive together. THE FIRST draws itself in out of nothing, its letters pulling in from too wide, the way something being remembered comes back. THE SECOND rises a beat later, larger, with her portal breathing behind the magenta and a light passing through it once as it settles. */ .entrance-say h1.two-beats{display:grid;gap:.16em;justify-items:start} .entrance-say h1 .h1-one{display:block;font-size:.56em;font-weight:300; line-height:1.1;opacity:.9} .entrance-say h1 .h1-two{display:block;font-size:1em;line-height:1.0} @media (prefers-reduced-motion:no-preference){ /* The whole line no longer arrives as one block. */ .entrance-say h1{opacity:1!important;animation:none!important} .entrance-say h1 .h1-one{opacity:0; animation:iqSaidIt 940ms cubic-bezier(.19,1,.22,1) 60ms both} .entrance-say h1 .h1-two{opacity:0; animation:iqTurnIt 1150ms cubic-bezier(.19,1,.22,1) 1180ms both} @keyframes iqSaidIt{ 0% {opacity:0;letter-spacing:.36em;filter:blur(10px);transform:translate3d(0,10px,0)} 62% {opacity:.9;filter:blur(0)} 100%{opacity:.9;letter-spacing:normal;filter:blur(0);transform:none}} @keyframes iqTurnIt{ 0% {opacity:0;transform:translate3d(0,30px,0) scale(.985);filter:blur(8px)} 56% {opacity:1;filter:blur(0)} 100%{opacity:1;transform:none;filter:blur(0)}} /* Her portal opens behind the words that carry the magic, once. */ .entrance-say h1 .h1-two em{position:relative;display:inline-block} .entrance-say h1 .h1-two em::before{content:"";position:absolute; inset:-52% -18%;z-index:-1;pointer-events:none; background:radial-gradient(58% 58% at 50% 50%,rgba(212,33,187,.36), rgba(47,168,224,.14) 46%,transparent 74%); opacity:0;animation:iqPortalOpens 2800ms ease-out 1700ms both} @keyframes iqPortalOpens{ 0% {opacity:0;transform:scale(.6)} 32% {opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.36)}} } /* On a phone the film is a short wide band and the first beat was down to fourteen pixels — too quiet to be a statement. The two keep their difference and both stay readable. */ @media(max-width:899px){ .entrance-say h1{font-size:clamp(24px,7.2vw,34px)!important} .entrance-say h1 .h1-one{font-size:.7em} .entrance-say h1.two-beats{gap:.1em} } /* ══ AND IT WAS AROUND THE WRONG WAY ═══════════════════════════════════════ Hers, 29 September 2026: it's around the wrong way. Have the first one in capitals, and then you remember you were. SO THE STATEMENT CARRIES THE WEIGHT AND THE TURN IS SAID QUIETLY. I had it the other way — the setup whispered and the turn shouted, which makes the second line an announcement rather than a realisation. Hers is better: the thing everybody already believes is stated flat out in capitals, and then the correction arrives underneath it, almost said rather than declared. HER WORDS ARE UNTOUCHED. She read the second line back with a stumble in it while saying this, and a stumble in a transcript is never a rewrite — if she does want it reworded it is one line on her own Words screen. */ .entrance-say h1 .h1-one{font-size:.94em;font-weight:400;line-height:1.0; opacity:1;text-transform:uppercase;letter-spacing:.005em} .entrance-say h1 .h1-two{font-size:.5em;font-weight:300;line-height:1.18; opacity:.88} .entrance-say h1.two-beats{gap:.28em} @media (prefers-reduced-motion:no-preference){ /* The capitals settle to full, not to the quieter opacity the setup had. */ @keyframes iqSaidIt{ 0% {opacity:0;letter-spacing:.34em;filter:blur(10px);transform:translate3d(0,10px,0)} 62% {opacity:1;filter:blur(0)} 100%{opacity:1;letter-spacing:.005em;filter:blur(0);transform:none}} @keyframes iqTurnIt{ 0% {opacity:0;transform:translate3d(0,22px,0);filter:blur(6px)} 58% {opacity:.88;filter:blur(0)} 100%{opacity:.88;transform:none;filter:blur(0)}} /* Her portal still opens behind the magenta, softer now that it is quiet. */ .entrance-say h1 .h1-two em::before{ background:radial-gradient(58% 58% at 50% 50%,rgba(212,33,187,.28), rgba(47,168,224,.11) 46%,transparent 74%)} } @media(max-width:899px){ .entrance-say h1 .h1-one{font-size:.92em} .entrance-say h1 .h1-two{font-size:.58em} .entrance-say h1.two-beats{gap:.22em} } /* ══ UNICORN, PINK AND IN CAPITALS ════════════════════════════════════════ Hers, 29 September 2026: I think we remove Savoye LET, just make it pink in caps and bold for UNICORN. SO THE SCRIPT IS STRUCK. It had asked the word to step out of the capitals the rest of the line is set in, because a roundhand in capitals cannot be read — which meant the magic word was the one word breaking the line's shape. Her way keeps the line whole and spends the emphasis where it carries: her magenta, and a real weight above the 500 around it. AND IT IS MARKED IN HER OWN WRITING rather than matched by name, so the emphasis belongs to whichever word she puts stars around. Stars give her the magenta on either line now, which is one rule instead of two. Her Words screen says so. */ .entrance-say h1 .h1-one em{ font-family:inherit;font-style:normal;font-weight:700; text-transform:uppercase;letter-spacing:inherit; font-size:1em;line-height:inherit; color:var(--magenta-ink,#D0008C)} /* ══ WEIGHT ON TOP, SIZE UNDERNEATH ════════════════════════════════════════ Hers, 29 September 2026, correcting me: no, you've got it round the wrong way. Don't turn the weighting around. The top bit should be heavier, but not as big. The bottom bit should be larger. I HAD READ HER FIRST CORRECTION AS SIZE and made the capitals the big line. She meant the two things separately: the statement carries WEIGHT — firm, capital, tracked — and the turn carries SIZE. So the first line is said like something everybody already knows, and the second is the one that opens up. */ .entrance-say h1 .h1-one{font-size:.42em;font-weight:500;line-height:1.14; letter-spacing:.065em;text-transform:uppercase;opacity:1} .entrance-say h1 .h1-two{font-size:1em;font-weight:300;line-height:1.0;opacity:1} .entrance-say h1.two-beats{gap:.2em} @media (prefers-reduced-motion:no-preference){ /* Both settle at full now — the quiet one is quiet by weight, not by fading. */ @keyframes iqTurnIt{ 0% {opacity:0;transform:translate3d(0,26px,0);filter:blur(7px)} 58% {opacity:1;filter:blur(0)} 100%{opacity:1;transform:none;filter:blur(0)}} } @media(max-width:899px){ .entrance-say h1 .h1-one{font-size:.5em;letter-spacing:.05em} .entrance-say h1 .h1-two{font-size:1em} .entrance-say h1.two-beats{gap:.16em} } /* THE KEYFRAME WAS WINNING THE TRACKING ARGUMENT. `animation-fill-mode: both` holds the last keyframe's value over the rule that set it, so her capitals settled to the old .005em however many times the declaration was rewritten. Measured on the live page, not read off the file. */ @media (prefers-reduced-motion:no-preference){ @keyframes iqSaidIt{ 0% {opacity:0;letter-spacing:.38em;filter:blur(10px);transform:translate3d(0,10px,0)} 62% {opacity:1;filter:blur(0)} 100%{opacity:1;letter-spacing:.065em;filter:blur(0);transform:none}} } /* ══ WISDOM OPENS WITH HER QUESTION, AND THE PICTURE ANSWERS IT ═════════════ Hers, 29 September 2026: she split her own paragraph out loud. The question goes right up the top; *You Retired From Work, Not Life* goes on the picture. So a person meets a question on clean ground and the picture underneath answers it as a statement. HER LINE SITS STRAIGHT ON HER PICTURE WITH NO SCRIM, and that was measured before it was built rather than hoped for: the darkest two per cent of the patch her words occupy reads 5.68:1 against her ink, and the patch averages 8.93:1. A scrim would have meant the ground was wrong. If she ever swaps that picture for a dark one the words will need measuring again — the wrapper is `.plate-on`, the words are `.plate-said`. */ .wis-ask{padding-bottom:clamp(14px,2.4vw,26px)} .wis-ask .ask{margin:0;max-width:28ch;font-family:var(--serif);font-weight:300; font-size:clamp(29px,5.9vw,60px);line-height:1.12;letter-spacing:-.01em; color:var(--ink,var(--iq-ink,#2F5A8C))} .wis-ask .ask em{font-style:normal;color:var(--magenta-ink,#D0008C)} .wis-ask .irony{margin:clamp(14px,2.4vw,22px) 0 0;max-width:30ch; font-family:var(--serif);font-style:italic;font-weight:300; font-size:clamp(17px,2.2vw,22px);line-height:1.5;color:var(--ink,var(--iq-ink,#2F5A8C));opacity:.72} .pathway-open .golden{margin:1.1rem 0 0;max-width:34ch;font-family:var(--serif); font-weight:300;font-size:clamp(18px,2.4vw,24px);line-height:1.5; color:var(--ink,var(--iq-ink,#2F5A8C))} .pathway-open .turn{margin:1.4rem 0 0;font-family:var(--display);font-weight:400; font-size:clamp(19px,2.6vw,27px);letter-spacing:.02em; color:var(--magenta-ink,#D0008C)} /* AT 379 THE PICTURE IS SHORT, so her line on it comes down to something that still fits inside its own bottom-left corner rather than climbing the frame. */ /* THREE THINGS MEASURED ON THE REAL PAGE AT 379 RATHER THAN REASONED ABOUT. The question mark was falling onto a line of its own, because the magenta clause fills the line and the punctuation after it has nowhere to go. It now sits inside her emphasis, so it can never be orphaned again. Her quiet line sat hard left under a centred heading, which read as two different pages. It follows the heading now. And her line on the picture was running at sixteen pixels on a two-hundred- and-fifty pixel picture, which is a caption rather than a statement. */ .wis-ask .irony{margin-left:auto;margin-right:auto;text-align:center} /* HER SOPHIA LOREN, off her own iRETIRE flyer. Set as a quotation rather than as a sentence on the page, the same as Sir Ken on the home page, because it is a real person's words and must always look like hers-to-quote rather than ours. */ .wis-quote{margin:0;padding:0 0 0 clamp(16px,2.4vw,28px); border-left:2px solid var(--magenta,#D421BB)} .wis-quote p{margin:0;font-family:var(--serif);font-weight:300;font-style:italic; font-size:clamp(20px,3.1vw,33px);line-height:1.38;color:var(--ink,var(--iq-ink,#2F5A8C))} .wis-quote cite{display:block;margin:1.1rem 0 0;font-style:normal; font-family:var(--display);font-weight:400;letter-spacing:.14em; text-transform:uppercase;font-size:.8rem;opacity:.72} .wis-ask .kick{margin:0 0 clamp(12px,1.8vw,18px)} /* ══ HER NINE WISDOM BLOCKS, ONE PER ROW ═══════════════════════════════════ Recovered off her own iRETIRE page. Each one is a statement, so each one gets the whole width and a person meets one at a time — her law of this morning: nothing will sit next to one another, apart from the six programme cards. */ .wis-block{padding-top:clamp(34px,5vw,64px);padding-bottom:clamp(34px,5vw,64px)} .wis-block h2{margin:0 0 .7rem;max-width:24ch;font-family:var(--serif); font-weight:300;font-size:clamp(27px,4.6vw,49px);line-height:1.12; letter-spacing:-.01em;color:var(--ink,var(--iq-ink,#2F5A8C))} .wis-block h2 em{font-style:normal;color:var(--magenta-ink,#D0008C)} .wis-block .lede{margin:0;max-width:44ch} .wis-brill{padding-top:clamp(30px,4.4vw,54px);padding-bottom:0} .wis-brill p{margin:0;max-width:22ch;font-family:var(--serif);font-weight:300; font-size:clamp(26px,4.4vw,46px);line-height:1.14;color:var(--ink,var(--iq-ink,#2F5A8C))} .wis-brill p em{font-style:normal;color:var(--magenta-ink,#D0008C)} /* ══ WISDOM, GIVEN A SHAPE RATHER THAN A STACK ══════════════════════════════ Hers, 29 September 2026: *we have to sexy it up, obviously, but a lot of the words are probably right.* Her words off her own old page; this is the part that stops it looking like the page they came off. THREE JOBS, THREE TREATMENTS. A BIG statement gets the air of a chapter opening and nothing shares its screen. A SAY arrives short and one at a time with a hairline above it, so four of them read as a rhythm rather than a list. A QUIET closes, set back and smaller, the way somebody lowers their voice at the end of a thought. */ .wis-big{padding-top:clamp(56px,9vw,132px);padding-bottom:clamp(56px,9vw,132px)} .wis-big h2{margin:0 0 clamp(18px,2.6vw,30px);max-width:21ch; font-family:var(--serif);font-weight:300; font-size:clamp(34px,6.4vw,74px);line-height:1.06;letter-spacing:-.015em; color:var(--ink,var(--iq-ink,#2F5A8C))} .wis-big h2 em{font-style:normal;color:var(--magenta-ink,#D0008C)} .wis-big p{margin:0;max-width:40ch;font-family:var(--serif);font-weight:300; font-size:clamp(18px,2.5vw,26px);line-height:1.52;color:var(--ink,var(--iq-ink,#2F5A8C));opacity:.84} .wis-say{padding-top:clamp(26px,3.4vw,42px);padding-bottom:clamp(26px,3.4vw,42px); border-top:1px solid var(--hair,#DFE7F0)} .wis-say h2{margin:0 0 .45rem;font-family:var(--display);font-weight:400; font-size:clamp(20px,2.6vw,29px);line-height:1.2;letter-spacing:.01em; color:var(--ink,var(--iq-ink,#2F5A8C))} .wis-say h2 em{font-style:normal;color:var(--magenta-ink,#D0008C)} .wis-say p{margin:0;max-width:52ch;font-family:var(--serif);font-weight:300; font-size:clamp(17px,2.05vw,21px);line-height:1.56;color:var(--ink,var(--iq-ink,#2F5A8C));opacity:.8} /* The first of the four opens the run, so it carries no rule above it. */ .wis-say-wrap:not(.wis-say-wrap + .wis-say-wrap) + .wis-say-wrap .wis-say{border-top:1px solid var(--hair,#DFE7F0)} .wis-quiet{padding-top:clamp(44px,6.4vw,88px);padding-bottom:clamp(44px,6.4vw,88px)} .wis-quiet h2{margin:0 0 .8rem;max-width:20ch;font-family:var(--serif); font-weight:300;font-size:clamp(26px,4.2vw,44px);line-height:1.12; color:var(--ink,var(--iq-ink,#2F5A8C))} .wis-quiet h2 em{font-style:normal;color:var(--magenta-ink,#D0008C)} .wis-quiet p{margin:0;max-width:46ch;font-family:var(--serif);font-weight:300; font-style:italic;font-size:clamp(17px,2.1vw,22px);line-height:1.55; color:var(--ink,var(--iq-ink,#2F5A8C));opacity:.78} /* ══ THE WISDOM ARRIVAL ════════════════════════════════════════════════════ Hers, 29 September 2026: *get your fucking design brain on.* She landed on an empty pale screen with a twenty-word question floating in it, on a world whose entire language is pictures. She was right and this is the mend. THE PICTURE ARRIVES FIRST, hard under the navigation with no gap above it, at its own true shape because nothing on this world is cropped. Her two shortest lines sit on it, bottom left, in her ink: the kicker small and tracked, the statement large underneath. Measured before it was built rather than hoped for — the darkest two per cent of that patch reads 5.68:1 against her ink, so it carries them with no scrim. A scrim would have meant the ground was wrong. HER QUESTION THEN OPENS THE PAGE PROPERLY. Twenty words cannot be a poster, so it is set as the first thing SAID rather than as a headline shouted: tight enough to break in three or four lines, with real air under the picture and her italic line following it like a breath. */ .wis-arrive{position:relative;margin-top:0} .wis-arrive .plate{margin-top:0!important} /* THE WORDS SIT WHERE THE PICTURE IS EMPTY, AND WHERE A SCREEN CAN SEE THEM. She stands on the right of her own picture facing the portal, so the left is sky. And the picture at its true three-to-two is 853px tall on a 1280 screen, so anything pinned to its bottom edge falls below the fold and she meets a picture with no words on it. Anchored from the TOP at 44% instead: on the left where the composition is open, and on screen whatever the window. */ .wis-arrive .plate-words{position:absolute;z-index:3; left:clamp(20px,5vw,86px);top:44%; max-width:min(80%,26ch)} .wis-arrive .plate-kick{margin:0 0 clamp(10px,1.3vw,18px);white-space:nowrap; font-family:var(--display);font-weight:400; font-size:clamp(10px,1.1vw,13px);letter-spacing:.22em;text-transform:uppercase; color:var(--magenta-ink,#D0008C)} .wis-arrive .plate-said{margin:0;font-family:var(--serif);font-weight:300; font-size:clamp(27px,3.5vw,52px);line-height:1.08;letter-spacing:-.012em; color:var(--ink,var(--iq-ink,#2F5A8C))} .wis-ask{padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(30px,4.4vw,60px)} /* TWENTY WORDS NEED ROOM TO BREATHE SIDEWAYS. At 22ch her question broke into six lines on a desktop and read as a paragraph in a big font. Wider measure, three lines, and it reads as one thought. */ .wis-ask .ask{margin:0;max-width:34ch;font-family:var(--serif);font-weight:300; font-size:clamp(26px,3.9vw,52px);line-height:1.14;letter-spacing:-.008em; color:var(--ink,var(--iq-ink,#2F5A8C))} .wis-ask .ask em{font-style:normal;color:var(--magenta-ink,#D0008C)} .wis-ask .irony{margin:clamp(16px,2.2vw,26px) auto 0;max-width:34ch; font-family:var(--serif);font-style:italic;font-weight:300; font-size:clamp(17px,2vw,21px);line-height:1.5; color:var(--ink,var(--iq-ink,#2F5A8C));opacity:.7;text-align:center} .wis-ask .ask{margin-left:auto;margin-right:auto} @media(max-width:899px){ /* Measured at 379: at 17ch her line broke as *From Work, Not / Life*, which orphans the half of it that carries the meaning. Narrower, so it falls the way she says it: You Retired / From Work, / Not Life. */ .wis-arrive .plate-words{max-width:min(86%,13ch);left:18px;top:auto;bottom:16px} .wis-arrive .plate-said{font-size:clamp(22px,6.2vw,32px)} .wis-arrive .plate-kick{font-size:9.5px;letter-spacing:.18em;margin-bottom:8px} } /* THE HIERARCHY UNDER HER QUESTION. It had gone flat — a huge question, then a tiny italic, then small grey text, then a magenta line competing with the button beneath it. Her lede comes up to reading size, and her closing line is said in her ink with only the one word that matters in magenta, so the only magenta anybody presses on this screen is Begin. */ .wis-ask + .pathway-open{padding-top:clamp(6px,1vw,12px)} .wis-ask + .pathway-open .lede{font-size:clamp(18px,1.9vw,23px);line-height:1.55; max-width:46ch;margin-left:auto;margin-right:auto;opacity:.86} .pathway-open .turn{margin:clamp(22px,2.8vw,36px) 0 0;font-family:var(--serif); font-weight:300;font-size:clamp(23px,2.9vw,34px);letter-spacing:-.005em; line-height:1.2;color:var(--ink,var(--iq-ink,#2F5A8C))} .pathway-open .turn em{font-style:normal;color:var(--magenta-ink,#D0008C)} /* ══ CENTRED, THE WAY THE REST OF HER SITE IS ═════════════════════════════ Hers, 29 September 2026: *why is it all left-justified and why is everything so big, and you're screaming at them?* I HAD LEFT-JUSTIFIED THE WHOLE PAGE to solve a real fault — her headings sat centred over left-aligned paragraphs — and solved it in the direction that made this page a stranger to every other one on her world. **The fault was the MIXTURE, not the centring.** So both the heading and the body are centred now and the page matches her site. AND THE SIZES CAME DOWN EVERYWHERE, which is the other half of what she said. A page set in statements at forty-nine and seventy-four pixels is not confident, it is loud — and loud at a man of eighty-five is the opposite of what this page is for. */ .wis-ask,.wis-big,.wis-say,.wis-quiet,.wis-brill{ max-width:820px;margin-left:auto;margin-right:auto;text-align:center} .wis-ask .ask,.wis-ask .irony, .wis-big h2,.wis-big p,.wis-say h2,.wis-say p, .wis-quiet h2,.wis-quiet p,.wis-brill p{ margin-left:auto;margin-right:auto;text-align:center} /* THE HIERARCHY UNDER HER QUESTION. It had gone flat — a huge question, then a tiny italic, then small grey text, then a magenta line competing with the button beneath it. Her lede comes up to reading size, and her closing line is said in her ink with only the one word that matters in magenta, so the only magenta anybody presses on this screen is Begin. */ .wis-ask + .pathway-open{padding-top:clamp(6px,1vw,12px)} .wis-ask + .pathway-open .lede{font-size:clamp(18px,1.9vw,23px);line-height:1.55; max-width:46ch;margin-left:auto;margin-right:auto;opacity:.86} .pathway-open .turn{margin:clamp(22px,2.8vw,36px) 0 0;font-family:var(--serif); font-weight:300;font-size:clamp(23px,2.9vw,34px);letter-spacing:-.005em; line-height:1.2;color:var(--ink,var(--iq-ink,#2F5A8C))} .pathway-open .turn em{font-style:normal;color:var(--magenta-ink,#D0008C)} /* ══ CENTRED, THE WAY THE REST OF HER SITE IS ═════════════════════════════ Hers, 29 September 2026: *why is it all left-justified and why is everything so big, and you're screaming at them?* THE PAGE HAD BEEN FIGHTING ITSELF — her headings sat centred while the paragraphs under them ran left, because the house rule centres a heading and left-aligns body text above 700px. I mended that by left-justifying the whole page, which made this page a stranger to every other one on her world. **The fault was the MIXTURE, not the centring.** Heading and body are both centred now, and Wisdom looks like her site again. */ .wis-ask,.wis-big,.wis-say,.wis-quiet,.wis-brill, .wis-ask + .pathway-open{ text-align:center!important;max-width:880px!important; margin-left:auto!important;margin-right:auto!important; padding-left:clamp(20px,4vw,40px)!important;padding-right:clamp(20px,4vw,40px)!important} .wis-ask .ask,.wis-ask .irony, .wis-big h2,.wis-big p,.wis-say h2,.wis-say p,.wis-quiet h2,.wis-quiet p, .wis-brill p,.wis-ask + .pathway-open .lede,.wis-ask + .pathway-open .turn{ margin-left:auto!important;margin-right:auto!important;text-align:center!important} .wis-ask ~ ul.gains{max-width:44ch;margin:0 auto;padding-left:22px;padding-right:22px} .wis-ask + .pathway-open > p{text-align:center!important} .wis-ask + .pathway-open .rule{margin-left:auto;margin-right:auto} /* ══ THE WHOLE PAGE, SPOKEN RATHER THAN SHOUTED ═════════════════════════════ Hers: *why is everything so big, and you're screaming at them?* Every size on Wisdom comes down, and the air between the blocks comes down with it so the page still breathes without being a series of posters. */ .wis-arrive .plate-said{font-size:clamp(20px,2.3vw,32px)!important;line-height:1.14!important} .wis-arrive .plate-kick{font-size:clamp(9px,.82vw,11px)!important;letter-spacing:.2em!important} .wis-ask{padding-top:clamp(32px,4.4vw,60px)!important;padding-bottom:clamp(22px,3vw,38px)!important} .wis-ask .ask{max-width:28ch!important;font-size:clamp(21px,2.4vw,33px)!important; line-height:1.2!important} .wis-ask .irony{font-size:clamp(15px,1.4vw,17px)!important;max-width:38ch!important; margin-top:clamp(12px,1.5vw,18px)!important} .wis-ask + .pathway-open .lede{font-size:clamp(15.5px,1.5vw,18px)!important;max-width:52ch!important} .pathway-open .turn{font-size:clamp(18px,1.8vw,22px)!important; margin-top:clamp(16px,2vw,26px)!important} .wis-big{padding-top:clamp(38px,5.2vw,82px)!important;padding-bottom:clamp(38px,5.2vw,82px)!important} .wis-big h2{max-width:26ch!important;font-size:clamp(22px,2.5vw,33px)!important; line-height:1.18!important;margin-bottom:clamp(12px,1.5vw,20px)!important} .wis-big p{max-width:52ch!important;font-size:clamp(15.5px,1.45vw,18px)!important; line-height:1.6!important} .wis-say{padding-top:clamp(20px,2.4vw,30px)!important;padding-bottom:clamp(20px,2.4vw,30px)!important} .wis-say h2{font-size:clamp(16.5px,1.5vw,19px)!important;margin-bottom:.4rem!important} .wis-say p{max-width:56ch!important;font-size:clamp(14.5px,1.3vw,16.5px)!important; line-height:1.6!important} .wis-quiet{padding-top:clamp(34px,4.6vw,66px)!important;padding-bottom:clamp(34px,4.6vw,66px)!important} .wis-quiet h2{max-width:24ch!important;font-size:clamp(19px,2vw,26px)!important} .wis-quiet p{max-width:52ch!important;font-size:clamp(15px,1.35vw,17px)!important} .wis-brill{padding-top:clamp(30px,3.8vw,52px)!important;padding-bottom:0!important} .wis-brill p{max-width:26ch!important;font-size:clamp(20px,2.2vw,29px)!important} .wis-quote p{font-size:clamp(17px,1.9vw,25px)!important;line-height:1.45!important} /* ══ HER TWO SHORT LISTS ══════════════════════════════════════════════════ How Your Program Works, and What It Gives You. Both hers, both off her own iRETIRE page, and both set as a run of short lines with a hairline between rather than as bullets — a bullet in front of *Brain health.* makes it a specification. */ .wis-list{max-width:820px;margin:0 auto;padding:clamp(30px,4vw,56px) 22px} .wis-list h2{margin:0 0 clamp(14px,1.8vw,22px);text-align:center; font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.1vw,28px); line-height:1.2;color:var(--ink,var(--iq-ink,#2F5A8C))} .wis-list h2 em{font-style:normal;color:var(--magenta-ink,#D0008C)} .wis-list ol,.wis-list ul{list-style:none;margin:0 auto;padding:0;max-width:44ch} .wis-list li{padding:clamp(11px,1.3vw,16px) 0;text-align:center; border-top:1px solid var(--hair,#DFE7F0); font-family:var(--serif);font-weight:300;font-size:clamp(15.5px,1.45vw,18px); line-height:1.5;color:var(--ink,var(--iq-ink,#2F5A8C))} .wis-list li:first-child{border-top:0} @media(max-width:899px){ .wis-arrive .plate-said{font-size:clamp(19px,5.2vw,26px)!important} .wis-ask .ask{max-width:24ch!important} } /* ══ THREE REGISTERS, AND HER PORTAL BEHIND THE MOMENTS ════════════════════ Hers, 29 September 2026: *I think we need to do much better than this.* Every line she has written was on the page and every one of them looked the same — twenty-two headings of equal weight, which is an inventory rather than a page. SO THE PAGE HAS A SPINE NOW. Three MOMENTS carry it and nothing else is allowed to look like them. CHAPTERS explain. BEATS are her short ones, set as a small tracked kicker and a sentence, so eight of them read as one run instead of eight more headings. AND THE MOMENTS SIT INSIDE HER OWN PORTAL. The magenta ring is the thing her whole visual world is built on — what is possible, ahead of her — so it is drawn behind the three lines that say exactly that, at an opacity that lifts the ground rather than decorating it. It is never used anywhere a person has to read a paragraph. */ .wis-moment{position:relative;isolation:isolate; padding-top:clamp(74px,11vw,170px)!important;padding-bottom:clamp(74px,11vw,170px)!important; text-align:center!important;max-width:980px!important;margin:0 auto!important} .wis-moment::before{content:"";position:absolute;z-index:-1; left:50%;top:50%;transform:translate(-50%,-50%); width:min(720px,88vw);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle, rgba(212,33,187,.17) 0%, rgba(212,33,187,.085) 38%, rgba(47,168,224,.05) 58%, rgba(212,33,187,0) 72%)} .wis-moment h2{margin:0 auto;max-width:17ch;font-family:var(--serif);font-weight:300; font-size:clamp(30px,4.4vw,58px)!important;line-height:1.08;letter-spacing:-.015em; color:var(--ink,var(--iq-ink,#2F5A8C));text-align:center} .wis-moment h2 em{font-style:normal;color:var(--magenta-ink,#D0008C)} .wis-moment p{margin:clamp(20px,2.6vw,32px) auto 0;max-width:46ch; font-family:var(--serif);font-weight:300; font-size:clamp(16px,1.5vw,19px)!important;line-height:1.62; color:var(--ink,var(--iq-ink,#2F5A8C));opacity:.82;text-align:center} /* HER ANSWER SITS TIGHT UNDER HER QUESTION, so the two read as one exchange rather than as two sections that happen to follow each other. */ .wis-answer{padding-top:clamp(40px,6vw,86px)!important; padding-bottom:clamp(54px,8vw,118px)!important} .wis-answer h2{max-width:15ch} .wis-chapter{padding-top:clamp(44px,5.6vw,88px)!important; padding-bottom:clamp(44px,5.6vw,88px)!important; text-align:center!important;max-width:880px!important;margin:0 auto!important} .wis-chapter h2{margin:0 auto clamp(12px,1.5vw,20px);max-width:24ch; font-family:var(--serif);font-weight:300; font-size:clamp(21px,2.3vw,30px);line-height:1.2;color:var(--ink,var(--iq-ink,#2F5A8C))} .wis-chapter h2 em{font-style:normal;color:var(--magenta-ink,#D0008C)} .wis-chapter p{margin:0 auto;max-width:50ch;font-family:var(--serif);font-weight:300; font-size:clamp(15.5px,1.45vw,18px);line-height:1.62;color:var(--ink,var(--iq-ink,#2F5A8C));opacity:.84} /* HER SHORT ONES, AS A RUN. No heading look at all — her own title becomes a small tracked line in her magenta, and her sentence carries the weight. */ .wis-beat{padding-top:clamp(18px,2.1vw,26px)!important; padding-bottom:clamp(18px,2.1vw,26px)!important; text-align:center!important;max-width:820px!important;margin:0 auto!important} .wis-beat .beat-kick{margin:0 0 .5rem;font-family:var(--display);font-weight:400; font-size:clamp(9.5px,.88vw,11.5px);letter-spacing:.24em;text-transform:uppercase; color:var(--magenta-ink,#D0008C)} .wis-beat .beat-says{margin:0 auto;max-width:54ch;font-family:var(--serif); font-weight:300;font-size:clamp(15.5px,1.45vw,18px);line-height:1.6; color:var(--ink,var(--iq-ink,#2F5A8C))} @media (prefers-reduced-motion:reduce){ .wis-moment::before{opacity:.8} } @media(max-width:899px){ .wis-moment h2{font-size:clamp(26px,7vw,36px)!important;max-width:14ch} .wis-moment::before{width:min(420px,94vw)} } /* ══ HER THESIS ON THE ARRIVAL ═════════════════════════════════════════════ Hers, 29 September 2026: *There's no age limit on brilliance. That should be in the hero.* Three tiers on the open left of her picture — her flyer line small and tracked, her thesis large, and the line she asked for on this picture beneath it. The patch was measured before the words were put in it: 5.41:1 against her ink at its darkest, so nothing sits behind them. */ /* THE COLUMN STOPS BEFORE SHE DOES. Her picture puts the woman from about 55% across, so the words live in the open 46% to her left — wide enough that *There Is No Age Limit On Brilliance* falls in two lines rather than five one-word stubs, and narrow enough never to run under her. */ .wis-arrive .plate-words{top:32%!important;max-width:min(46%,30ch)!important} .wis-arrive .plate-brill{margin:0 0 clamp(12px,1.4vw,18px); font-family:var(--serif);font-weight:300; font-size:clamp(28px,3.2vw,48px);line-height:1.08;letter-spacing:-.015em; color:var(--ink,var(--iq-ink,#2F5A8C));text-wrap:balance} .wis-arrive .plate-brill em{font-style:normal;color:var(--magenta-ink,#D0008C)} .wis-arrive .plate-said{font-size:clamp(15px,1.5vw,20px)!important; line-height:1.35!important;opacity:.8;letter-spacing:0!important} @media(max-width:899px){ .wis-arrive .plate-words{top:auto!important;bottom:16px;max-width:min(76%,18ch)!important} .wis-arrive .plate-brill{font-size:clamp(24px,6.6vw,34px)} .wis-arrive .plate-said{font-size:clamp(13.5px,3.6vw,16px)!important} } /* ══ HER LAST WORD ═════════════════════════════════════════════════════════ Hers, 29 September 2026: *remove Grow Bolder, Not Older — maybe that can be the very, very last line before the footer.* It sits on her pale sky with a lot of air and nothing after it, so the page ends on her voice rather than on a button. */ .wis-goodbye{padding:clamp(56px,8vw,120px) 22px clamp(56px,8vw,120px); text-align:center;background:var(--sky,#EAF1F8)} .wis-goodbye p{margin:0 auto;max-width:18ch;font-family:var(--serif); font-weight:300;font-size:clamp(26px,3.4vw,46px);line-height:1.1; letter-spacing:-.012em;color:var(--ink,var(--iq-ink,#2F5A8C))} .wis-goodbye p em{font-style:normal;color:var(--magenta-ink,#D0008C)} /* ══ THE CURRENT RUNS DOWN THE PAGE, AND THE MOMENTS ARE PORTALS ═══════════ Hers, 29 September 2026: *are you fucking kidding me that that's what you're putting as my H1 headings? You get your design freak on now. We're designing for 2046. This website is all about your imagination. Make it fucking brilliant.* SHE IS RIGHT AND MORE TYPOGRAPHY WAS NEVER THE ANSWER. What was on the page was centred serif at four sizes — a document with good pictures. So this is built out of her own two colours instead, doing the two jobs she gave them and no other: MAGENTA IS THE PORTAL — what is possible, ahead of her. It is drawn as an actual ring around the two moments that say exactly that, because a glowing magenta ring is what her whole visual world is made of. BLUE IS THE CURRENT — what is running through her. Her artwork runs it along the sleeves and back of a person's clothing like a circuit, and it is the innovation sensation made visible. So it runs down the edge of the page as a circuit, from her question to her last word, with a node at every statement and a lit node at every portal. It is her own metaphor built into the structure of the page rather than printed on it. NEITHER IS DECORATION AND NEITHER IS SPENT IDLY, which is the law on this world. The current never crosses a word; it runs in the margin. The ring only ever encloses a line about what is possible. */ .wis-run{position:relative} .wis-run::before{content:"";position:absolute;z-index:0;pointer-events:none; left:clamp(14px,3.6vw,62px);top:0;bottom:0;width:1px; background:linear-gradient(180deg, rgba(47,168,224,0) 0, rgba(47,168,224,.42) 6%, rgba(47,168,224,.42) 94%, rgba(47,168,224,0) 100%)} .wis-run > *{position:relative;z-index:1} /* A NODE WHERE EVERY STATEMENT MEETS THE CURRENT. */ .wis-run .wis-moment,.wis-run .wis-chapter,.wis-run .wis-beat, .wis-run .wis-list,.wis-run > .onwhite > .ground{position:relative} .wis-run .wis-chapter::before,.wis-run .wis-beat::before{ content:"";position:absolute;z-index:2; left:calc(clamp(14px,3.6vw,62px) - 2px);top:50%;margin-top:-2px; width:5px;height:5px;border-radius:50%; background:var(--current,#2FA8E0);opacity:.55} .wis-run .wis-moment::after{content:"";position:absolute;z-index:2; left:calc(clamp(14px,3.6vw,62px) - 4px);top:50%;margin-top:-4px; width:9px;height:9px;border-radius:50%; background:var(--magenta,#D421BB); box-shadow:0 0 0 5px rgba(212,33,187,.14),0 0 16px 3px rgba(212,33,187,.42)} /* THE RING ITSELF. Thin, wide, and behind her words rather than around a box — the portal she is looking at in her own artwork. */ .wis-moment::before{ width:min(860px,92vw)!important; border:1px solid rgba(212,33,187,.26); background:radial-gradient(circle, rgba(212,33,187,.15) 0%, rgba(212,33,187,.055) 40%, rgba(47,168,224,.045) 62%, rgba(212,33,187,0) 74%)!important} /* THE TWO MOMENTS ARE THE ONLY LARGE TYPE ON THE PAGE, so they can be large. */ .wis-moment h2{font-size:clamp(34px,5.6vw,84px)!important;line-height:1.0!important; max-width:14ch!important;letter-spacing:-.022em!important;text-wrap:balance} /* HER QUESTION IS THE ONE H1 AND IT IS BUILT LIKE ONE. Balanced breaks, tight leading, the turn in her magenta, and a hairline of the current above it so it arrives connected to everything under it rather than floating. */ .wis-ask .ask{font-size:clamp(28px,3.6vw,56px)!important;line-height:1.08!important; max-width:19ch!important;letter-spacing:-.018em!important;text-wrap:balance} .wis-ask{position:relative} .wis-ask::before{content:"";position:absolute;left:50%;transform:translateX(-50%); top:clamp(14px,2vw,26px);width:1px;height:clamp(18px,2.6vw,34px); background:linear-gradient(180deg,rgba(47,168,224,0),var(--current,#2FA8E0))} /* HER BEATS TAKE THE CURRENT, NOT THE PORTAL, because a beat is something running through a person rather than something ahead of them. Her own table. */ .wis-beat .beat-kick{color:var(--current-ink,#17698F)!important;opacity:.92} /* HER LAST WORD SITS AT THE END OF THE CURRENT. */ .wis-goodbye{position:relative} .wis-goodbye::before{content:"";position:absolute;left:50%;transform:translateX(-50%); top:0;width:1px;height:clamp(26px,3.4vw,44px); background:linear-gradient(180deg,var(--current,#2FA8E0),rgba(47,168,224,0))} @media(max-width:899px){ .wis-run::before,.wis-run .wis-chapter::before, .wis-run .wis-beat::before,.wis-run .wis-moment::after{left:12px} .wis-run .wis-chapter::before,.wis-run .wis-beat::before{left:10px} .wis-run .wis-moment::after{left:8px} .wis-moment h2{font-size:clamp(30px,8.4vw,44px)!important;max-width:12ch!important} .wis-ask .ask{font-size:clamp(26px,7.4vw,38px)!important;max-width:16ch!important} .wis-moment::before{width:min(430px,96vw)!important} } /* MEASURED, NOT EYEBALLED — two faults in the build above. HER QUESTION WAS RUNNING TO SIX LINES. Twenty words at 46px inside a 19ch measure is a column, not a headline. A long question wants a moderate size and a wide measure so it falls in three. */ .wis-ask .ask{font-size:clamp(25px,2.9vw,42px)!important;max-width:100%!important; line-height:1.12!important} /* AND THE PORTAL WAS BIGGER THAN THE ROOM IT STANDS IN — an 860px ring inside a 484px section puts a hard magenta edge across the picture above it. The room opens up and the ring comes in, so the whole circle is inside her own space. */ .wis-moment{padding-top:clamp(96px,13vw,210px)!important; padding-bottom:clamp(96px,13vw,210px)!important} .wis-moment::before{width:min(600px,86vw)!important} @media(max-width:899px){ .wis-moment::before{width:min(360px,88vw)!important} .wis-moment{padding-top:96px!important;padding-bottom:96px!important} } /* HER PARAGRAPHS STOP BEING A COLUMN. Hers, 29 September 2026: *why do you have it so fucking narrow? It looks stupid.* Every measure under her question was set for a magazine caption — 38, 46 and 52 characters — which on a 1280 screen puts a thin ribbon of text down the middle of an empty page. Reading measure for a serif this size is 65 to 75 characters, and that is what they get. */ .wis-ask .irony{max-width:60ch!important;font-size:clamp(16px,1.6vw,20px)!important} .wis-ask + .pathway-open .lede{max-width:68ch!important; font-size:clamp(16px,1.65vw,20px)!important} .wis-chapter p{max-width:68ch!important;font-size:clamp(16px,1.55vw,19px)!important} .wis-beat .beat-says{max-width:72ch!important;font-size:clamp(16px,1.55vw,19px)!important} .wis-moment p{max-width:62ch!important;font-size:clamp(16px,1.6vw,20px)!important} .wis-chapter{max-width:1000px!important} .wis-beat{max-width:1000px!important} .wis-ask{max-width:1000px!important} .wis-ask + .pathway-open{max-width:1000px!important} /* ══ HER QUESTION, BUILT LIKE AN H1 ════════════════════════════════════════ Hers, 29 September 2026: *it doesn't look like a freaking heading that is worthy of being an H1. The words are right, it's the way you've styled it pathetically, or lack of styling more like it.* IT WAS PLAIN CENTRED SERIF AT THE SAME SIZE AS EVERYTHING NEAR IT, which is a sentence, not a heading. Her own two-beat pattern from the home page fixes it: the ask said quietly and tracked, the turn large enough to land, and her magenta on the four words the whole question is driving at. She moves the break herself by pressing return in her own box. */ .wis-ask .ask{display:block;margin:0 auto} .wis-ask .ask .ask-one{display:block;margin:0 auto clamp(14px,1.8vw,22px); max-width:46ch; font-family:var(--display);font-weight:300; font-size:clamp(14px,1.35vw,17px)!important;line-height:1.5; letter-spacing:.2em;text-transform:uppercase; color:var(--current-ink,#17698F);opacity:.9} .wis-ask .ask .ask-two{display:block;margin:0 auto;max-width:17ch; font-family:var(--serif);font-weight:300; font-size:clamp(32px,5.4vw,82px)!important;line-height:1.0; letter-spacing:-.028em;color:var(--ink,var(--iq-ink,#2F5A8C));text-wrap:balance} .wis-ask .ask .ask-two em{font-style:normal;color:var(--magenta-ink,#D0008C)} .wis-ask{padding-top:clamp(44px,6.4vw,96px)!important; padding-bottom:clamp(26px,3.4vw,46px)!important} @media(max-width:899px){ .wis-ask .ask .ask-one{font-size:12px!important;letter-spacing:.16em;max-width:34ch} .wis-ask .ask .ask-two{font-size:clamp(28px,8.6vw,44px)!important;max-width:14ch} } /* HER QUESTION USES THE WHOLE ROOM. Hers, 29 September 2026: *why is this so stupidly done, so fucking narrowly?* A 17ch measure on a seventy-one character sentence is a column four or five lines deep with empty page either side of it. No measure cap at all now — it takes the full width of her own container and falls in two or three lines, balanced, which is what a heading does. */ .wis-ask .ask .ask-two{max-width:none!important; font-size:clamp(29px,4.6vw,66px)!important;line-height:1.02!important} .wis-ask .ask .ask-one{max-width:none!important} @media(max-width:899px){ .wis-ask .ask .ask-two{max-width:none!important; font-size:clamp(26px,7.4vw,38px)!important} .wis-ask .ask .ask-one{max-width:none!important} } /* ══ THE ARRIVAL, BUILT AS A LOCKUP INSTEAD OF TWO PARAGRAPHS ══════════════ Hers, 29 September 2026: *the words that are on the hero image — why are they like a… and the second line is like normal body text out of a book. Push yourself and get creative.* And: *the first time I gave you this website you made me cry, it was so beautiful.* IT WAS TWO PARAGRAPHS SITTING ON A PICTURE and that is exactly what it looked like. This is a lockup, and the typography is HER OWN — on her iRETIRE page she wrote *There is no age limit on BRILLIANCE*, shouting that one word herself. So the sentence is said quietly and light, and the word she shouted is the event: set huge, in her magenta, letter-spaced the way her own artwork sets a word. A hairline of her magenta under it, and then her second line as a small tracked display line rather than a sentence out of a book. */ .wis-arrive .plate-brill{font-size:clamp(20px,2.05vw,34px)!important; line-height:1.16!important;letter-spacing:.005em!important; margin:0 0 clamp(4px,.5vw,8px)!important; color:var(--ink,var(--iq-ink,#2F5A8C));font-weight:300} .wis-arrive .plate-brill em{display:block;font-style:normal; font-size:2.32em;line-height:.92;letter-spacing:.012em; text-transform:uppercase;font-weight:300; color:var(--magenta-ink,#D0008C); margin-top:clamp(2px,.4vw,7px)} .wis-arrive .plate-said{position:relative; margin-top:clamp(16px,1.9vw,28px)!important;padding-top:clamp(14px,1.7vw,24px)!important; font-family:var(--display)!important;font-weight:400!important; font-size:clamp(10px,1.02vw,13px)!important;line-height:1.5!important; letter-spacing:.24em!important;text-transform:uppercase; color:var(--ink,var(--iq-ink,#2F5A8C))!important;opacity:1!important} .wis-arrive .plate-said::before{content:"";position:absolute;left:0;top:0; width:clamp(48px,5.4vw,84px);height:1px;background:var(--magenta,#D421BB);opacity:.75} .wis-arrive .plate-words{max-width:min(50%,34ch)!important;top:30%!important} @media(max-width:899px){ .wis-arrive .plate-words{max-width:min(84%,22ch)!important;top:auto!important;bottom:18px} .wis-arrive .plate-brill{font-size:clamp(15px,4.1vw,20px)!important} .wis-arrive .plate-brill em{font-size:2.15em} .wis-arrive .plate-said{font-size:9.5px!important;letter-spacing:.2em!important; margin-top:13px!important;padding-top:11px!important} } /* THE LOCKUP GETS A PREDICTABLE ROOM. `34ch` was measured against the wrapper's inherited font rather than the words inside it, so her tracked line broke with LIFE. orphaned on a line of its own. Real pixels, and the box is sized to the widest thing in it — the word BRILLIANCE. */ .wis-arrive .plate-words{max-width:min(52%,620px)!important} .wis-arrive .plate-said{max-width:none!important;text-wrap:balance} @media(max-width:899px){ .wis-arrive .plate-words{max-width:min(86%,330px)!important} } /* ══ NOTHING TINY IN A HERO. EVER. ═════════════════════════════════════════ Hers, 29 September 2026: *ever show me that little tiny font again in a hero, I'm going to fucking scream.* HER SECOND LINE WAS 13 PIXELS ON A DESKTOP AND 9.5 ON A PHONE — a caption under a photograph, set as micro-type because micro-type looks tidy in a layout. It is not tidy, it is unreadable, and on a world for a man of eighty-five it is worse than that. **The floor in a hero is twenty pixels and there is no exception to it.** Her line is said in her serif at reading scale now, sentence case, under a hairline of her magenta — a statement, not a caption — and the whole lockup goes up with it so the arrival is an arrival. */ .wis-arrive .plate-brill{font-size:clamp(23px,2.5vw,42px)!important} .wis-arrive .plate-brill em{font-size:2.28em;letter-spacing:.014em} .wis-arrive .plate-said{ font-family:var(--serif)!important;font-weight:300!important; font-size:clamp(20px,1.85vw,27px)!important;line-height:1.3!important; letter-spacing:0!important;text-transform:none!important; margin-top:clamp(18px,2.1vw,30px)!important;padding-top:clamp(16px,1.9vw,26px)!important; opacity:.92!important} .wis-arrive .plate-said::before{width:clamp(56px,6vw,96px)} .wis-arrive .plate-words{max-width:min(54%,700px)!important;top:27%!important} @media(max-width:899px){ .wis-arrive .plate-brill{font-size:clamp(18px,4.6vw,24px)!important} .wis-arrive .plate-brill em{font-size:2.2em} .wis-arrive .plate-said{font-size:clamp(20px,5.2vw,23px)!important; margin-top:14px!important;padding-top:13px!important} .wis-arrive .plate-words{max-width:min(88%,360px)!important;top:auto!important;bottom:20px} } /* THE LOCKUP GETS ROOM AT EVERY SIZE, NOT JUST ON A BIG SCREEN. On an iPad the box was capped at 360px, so BRILLIANCE was being squeezed down to 53px to fit a box rather than sized to the picture it sits on. Three bands, each with a room wide enough for the word to be the event it is. */ @media(min-width:600px) and (max-width:1023px){ .wis-arrive .plate-words{max-width:min(78%,600px)!important;top:auto!important; bottom:clamp(26px,4vw,48px)!important} .wis-arrive .plate-brill{font-size:clamp(25px,3.7vw,34px)!important} .wis-arrive .plate-brill em{font-size:2.3em} .wis-arrive .plate-said{font-size:clamp(22px,2.6vw,26px)!important; margin-top:clamp(16px,2vw,24px)!important;padding-top:clamp(15px,1.9vw,22px)!important} } @media(max-width:599px){ .wis-arrive .plate-words{max-width:min(90%,400px)!important} .wis-arrive .plate-brill{font-size:clamp(19px,5.2vw,25px)!important} .wis-arrive .plate-brill em{font-size:2.22em} .wis-arrive .plate-said{font-size:clamp(20px,5.4vw,23px)!important} } /* ══ HER LAW, AND HER WORDS UP IN THE SKY ══════════════════════════════════ Hers, 29 September 2026: *why is it so fucking low down? Get it up in the sky.* And: *every heading has a capital first letter on every fucking word. That is my fucking law.* I HAD LOWERCASED HER HEADINGS on my own reasoning that a long question reads better in sentence case. Her law is not a preference I get to weigh against my taste. Nothing on this world applies a text-transform to a heading any more — her words arrive on the page exactly as she capitalised them, and the only shout is the one she wrote herself. */ .wis-ask .ask .ask-one{text-transform:none!important; font-family:var(--serif)!important;font-weight:300!important; letter-spacing:.01em!important; font-size:clamp(20px,2.05vw,30px)!important; color:var(--current-ink,#17698F)!important;opacity:1!important} .wis-arrive .plate-said{text-transform:none!important} /* UP IN THE SKY. The lockup sat at 27% down on a desktop and hard at the bottom on everything smaller, so her words were in the water instead of the air. */ .wis-arrive .plate-words{top:15%!important;bottom:auto!important} @media(min-width:600px) and (max-width:1023px){ .wis-arrive .plate-words{top:14%!important;bottom:auto!important} } @media(max-width:599px){ .wis-arrive .plate-words{top:12%!important;bottom:auto!important} } /* ══ NOTHING TINY, NOTHING FORCED INTO CAPITALS, ANYWHERE ON WISDOM ════════ Walked properly and three faults came out of the measuring rather than the looking: her beat labels were 9.5px AND force-capitalised by CSS, her quotation credit 12.8px and capitalised, and the Rhythm label 12px and capitalised. All three break the two laws she gave tonight in one go. THE TWENTY-PIXEL FLOOR IS THE WHOLE PAGE, not only the hero. A page built for a man of eighty-five has no business setting anything at nine pixels, and her words arrive capitalised exactly as she typed them. */ .wis-run .beat-kick,.wis-quote cite,.wis-run .kick, .wis-list h2,.wis-chapter h2,.wis-moment h2,.wis-quiet h2{ text-transform:none!important} .wis-beat .beat-kick{font-family:var(--serif)!important;font-weight:400!important; font-size:clamp(20px,1.9vw,26px)!important;letter-spacing:0!important; line-height:1.25!important;margin-bottom:.5rem!important; color:var(--current-ink,#17698F)!important} .wis-beat .beat-says{font-size:clamp(17px,1.6vw,20px)!important} .wis-quote cite{font-family:var(--serif)!important;font-style:italic!important; font-size:clamp(17px,1.5vw,20px)!important;letter-spacing:0!important; font-weight:300!important;opacity:.8} /* AND THE PAGE AFTER THE ARRIVAL STOPS BEING SMALLER THAN THE ARRIVAL. A 44px moment under a 69px hero reads as the page losing its nerve. */ .wis-moment h2{font-size:clamp(34px,5.8vw,78px)!important} .wis-moment p{font-size:clamp(17px,1.7vw,21px)!important} .wis-chapter h2{font-size:clamp(25px,3vw,40px)!important;line-height:1.14!important} .wis-chapter p{font-size:clamp(17px,1.6vw,20px)!important} .wis-list h2{font-size:clamp(24px,2.6vw,34px)!important} .wis-list li{font-size:clamp(17px,1.7vw,21px)!important} .wis-quiet h2{font-size:clamp(24px,2.7vw,36px)!important} .wis-quiet p{font-size:clamp(17px,1.6vw,20px)!important} .wis-quote p{font-size:clamp(20px,2.2vw,30px)!important} .wis-ask .irony{font-size:clamp(18px,1.8vw,22px)!important} .wis-ask + .pathway-open .lede{font-size:clamp(18px,1.8vw,22px)!important} .pathway-open .turn{font-size:clamp(20px,2vw,26px)!important} .wis-goodbye p{font-size:clamp(28px,3.6vw,52px)!important} /* THE LAST OF IT, AND THE WORST WAS THE BUTTON. Begin Wisdom — the one thing on the page a person is meant to press — was set at TWELVE PIXELS and forced into capitals. Her five were at fifteen, her What Grows heading was being shouted by CSS, and her Sophia Loren credit sat under twenty. The floor is the whole page. */ .wis-run ~ * .enter,.wis-ask + .pathway-open .enter,.wis-run .enter{ font-size:clamp(20px,1.85vw,24px)!important;text-transform:none!important; letter-spacing:.03em!important;padding:.85em 2.1em!important} .wis-ask + .pathway-open .after,.wis-ask + .pathway-open .after a{ font-size:clamp(18px,1.6vw,20px)!important} .wis-run ul.gains li,.wis-ask ~ ul.gains li{ font-size:clamp(18px,1.8vw,22px)!important;line-height:1.5!important} .wis-run h2.plain,.wis-ask ~ .ground h2.plain{ text-transform:none!important;font-family:var(--serif)!important; font-weight:300!important;font-size:clamp(24px,2.6vw,34px)!important; letter-spacing:0!important} .wis-quote cite{font-size:clamp(18px,1.6vw,21px)!important} /* ══ THE TAIL OF WISDOM: THE RHYTHM, THE FOUR WEEKS AND BEGIN ══════════════ Her four-week rhythm and her Begin block were set at twelve pixels with CSS shouting every label — on the one page built for a man of eighty-five, and on the one button he is meant to press. Scoped to Wisdom so the other five pathways are not quietly restyled tonight; they need the same and it is named in the project's laws. */ .wis-tail .kick,.wis-tail .wk-name,.wis-tail .wk-no,.wis-tail h3, .wis-tail .enter,.wis-tail dt,.wis-tail .lead,.wis-tail .begin-kick{ text-transform:none!important;letter-spacing:.01em!important} .wis-tail .kick{font-family:var(--serif)!important;font-weight:400!important; font-size:clamp(20px,1.9vw,25px)!important;color:var(--current-ink,#17698F)!important; opacity:1!important} .wis-tail h2{font-size:clamp(25px,3vw,40px)!important;text-transform:none!important} .wis-tail h3,.wis-tail .wk-name{font-family:var(--serif)!important; font-weight:400!important;font-size:clamp(19px,1.8vw,23px)!important} .wis-tail p,.wis-tail li,.wis-tail dd{font-size:clamp(17px,1.6vw,20px)!important; line-height:1.6!important} .wis-tail .enter{font-size:clamp(20px,1.85vw,24px)!important; padding:.85em 2.1em!important} .wis-tail .after,.wis-tail .after a,.wis-tail small{font-size:clamp(17px,1.5vw,19px)!important} .wis-tail .price,.wis-tail .amount{font-size:clamp(28px,3vw,44px)!important} /* HER WEEK LABELS ARE BARE INSIDE .week, which is why naming classes missed them twice. Named by what they are instead, with everything else in the tail that was still under eighteen. */ .wis-tail .week b,.wis-tail b,.wis-tail .kick,.wis-tail .chip, .wis-tail .choose-label,.wis-tail .family,.wis-tail .bundle, .wis-tail .bundle-name,.wis-tail .current,.wis-tail small,.wis-tail cite{ font-size:clamp(19px,1.8vw,23px)!important;text-transform:none!important; letter-spacing:.01em!important;line-height:1.35!important} .wis-tail .week b{font-family:var(--serif)!important;font-weight:400!important; color:var(--current-ink,#17698F)!important;display:block;margin-bottom:.35rem} .wis-tail .week p,.wis-tail .week{font-size:clamp(17px,1.6vw,20px)!important} .wis-tail .kick{color:var(--current-ink,#17698F)!important} /* The last one on the page: her price note, a bare inside .price. */ .wis-tail .price span{font-size:clamp(19px,1.7vw,22px)!important; text-transform:none!important;letter-spacing:.01em!important} .wis-tail .price b{font-size:clamp(32px,3.4vw,50px)!important} /* ══ THE MENU'S FONT IS THE HEADING FONT, ON EVERY PAGE ════════════════════ Hers, 30 September 2026: *go through the entire website, pull through whatever font we've got on the menu, and then I don't think we can have a serif font as the main heading font. Is there something elegant and fine but not serif, and quite upright?* THE ANSWER WAS ALREADY ON HER OWN MENU. Jost — a geometric sans, fine at its light weights, and upright in the exact way she means: vertical stems, circular bowls, no slant and no calligraphic swell. It is the font her IMAGENIQ wordmark is set in, so the headings now agree with her own logo instead of arguing with it. Nothing new was added; her site was already carrying it. HEADINGS ONLY. Her body copy stays in Cormorant, which is what a geometric sans wants underneath it — the pairing is deliberate, not a leftover. AND A GEOMETRIC SANS NEEDS DIFFERENT SETTING FROM A SERIF: lighter weights as the size goes up, and negative tracking on anything large, or it reads as a sign rather than a heading. */ h1,h2,h3,h4,h5,h6, .ask,.ask-one,.ask-two,.pathway-name, .plate-brill,.plate-said,.plate-kick,.beat-kick, .wis-goodbye p,.pathway-open .turn,.kick,.wis-tail .week b, .entrance-say h1,.entrance-say .part,.entrance-say .whole span, .bundle-name,.price b,.price span,.choose-label,h2.plain{ font-family:var(--display)!important} /* WEIGHT COMES DOWN AS SIZE GOES UP. */ .wis-moment h2,.wis-goodbye p,.ask-two,.plate-brill em,.entrance-say h1{ font-weight:200!important;letter-spacing:-.024em!important} .wis-chapter h2,.wis-quiet h2,.wis-list h2,h2.plain,.plate-brill,.wis-tail h2{ font-weight:300!important;letter-spacing:-.012em!important} .beat-kick,.plate-said,.wis-tail .week b,.kick,.ask-one{ font-weight:400!important;letter-spacing:.005em!important} /* JOST READS LARGER THAN CORMORANT AT THE SAME SIZE — its x-height is far taller — so the big ones come back a step to hold the same presence on the page. */ .wis-moment h2{font-size:clamp(30px,4.9vw,66px)!important;line-height:1.04!important} .ask-two{font-size:clamp(26px,3.9vw,56px)!important;line-height:1.06!important} .wis-goodbye p{font-size:clamp(25px,3.1vw,44px)!important} .plate-brill em{font-size:2.15em!important} .wis-chapter h2{font-size:clamp(23px,2.7vw,35px)!important} .wis-quiet h2{font-size:clamp(22px,2.4vw,31px)!important} .wis-list h2,h2.plain{font-size:clamp(22px,2.3vw,30px)!important} /* Her quotation stays in the serif. It is somebody speaking, not a heading. */ .wis-quote p,.wis-quote cite,.wis-ask .irony{font-family:var(--serif)!important} /* THREE HEADINGS WERE STILL IN THE SERIF because earlier rules name three classes each and out-weigh a bare element selector however late it sits. Named at the same weight so they follow her menu like everything else. */ .wis-ask .ask .ask-one{font-family:var(--display)!important;font-weight:400!important; letter-spacing:.06em!important;font-size:clamp(15px,1.35vw,18px)!important} .wis-beat .beat-kick{font-family:var(--display)!important;font-weight:400!important; font-size:clamp(19px,1.75vw,23px)!important;letter-spacing:.005em!important} .wis-arrive .plate-said{font-family:var(--display)!important;font-weight:300!important; letter-spacing:.01em!important} .wis-tail .week b{font-family:var(--display)!important;font-weight:400!important} .wis-tail .kick{font-family:var(--display)!important;font-weight:400!important} /* THE LAST FOUR, and they were losing to class-named rules further up the file — .wis-tail h3, .audience h2, .moment h2, h2.opener, h1.pathway-name and the weeks block. Named at their own weight rather than hoping a bare element selector wins. */ .wis-tail h3,.wis-tail .wk-name,.wis-tail h2,.wis-tail h1, .moment h1,.moment h2,h2.opener,h1.pathway-name, .audience h2,.wk h1,.wk h2,.wk h3,.cell h3,.close h2,.onwhite h2,.ground h2{ font-family:var(--display)!important} .wis-tail h3,.wis-tail .wk-name,.cell h3{font-weight:400!important; letter-spacing:-.008em!important} .wis-tail h2,.moment h1,.moment h2,h2.opener,h1.pathway-name, .audience h2,.close h2,.onwhite h2,.ground h2{ font-weight:300!important;letter-spacing:-.014em!important} /* What Grows — the one remaining, held by `.wis-run h2.plain`. */ .wis-run h2.plain,.wis-ask ~ .ground h2.plain,.wis-run .ground h2.plain{ font-family:var(--display)!important;font-weight:300!important; letter-spacing:-.012em!important} /* ══ THE MAIN HEADINGS ARE THEIR OWN FONT ══════════════════════════════════ Hers, 30 September 2026: *I didn't say pull it through the entire website. It's fine, but now the main headings need to be something different.* I HAD IT BACKWARDS. She asked for the menu's font to run through the site AND THEN for the main headings to be something else again — elegant, fine, not a serif, and upright. So Jost stays everywhere it landed — the labels, the beats, the week names, the chapters, the buttons — and only the BIG ones take a face of their own. THREE ARE LOADED AND SHE CHOOSES BY PRESSING A LINK. Each is elegant, fine, sans and upright, and each is upright in a different way: TENOR SANS classical Roman proportions, wide, couture. The columns and the lit doorway of her own Lucid Futurism, in a typeface. JULIUS SANS ONE thinner and more severe, Roman capitals without their serifs. URBANIST 200 geometric and futurist, the finest of the three. The default is Tenor Sans. When she has chosen, the winner is written in here and the switch comes out. */ :root{--head:"Tenor Sans","Jost",system-ui,sans-serif} body.head-julius{--head:"Julius Sans One","Jost",system-ui,sans-serif} body.head-urbanist{--head:"Urbanist","Jost",system-ui,sans-serif} /* ONLY THE BIG ONES. Her hero, her question, her moments and her last word. */ .plate-brill,.plate-brill em, .wis-ask .ask .ask-two, .wis-moment h2, .wis-goodbye p, .entrance-say h1, h1.pathway-name,h2.opener{ font-family:var(--head)!important} /* TENOR SANS AND JULIUS SANS ONE HAVE ONE WEIGHT EACH, so the fineness has to come from size and tracking rather than from a light cut. Urbanist keeps its 200. And all three run wider than Jost, so the measures come back a touch. */ .plate-brill em,.wis-ask .ask .ask-two,.wis-moment h2,.wis-goodbye p,.entrance-say h1{ font-weight:400!important;letter-spacing:-.006em!important} body.head-urbanist .plate-brill em, body.head-urbanist .wis-ask .ask .ask-two, body.head-urbanist .wis-moment h2, body.head-urbanist .wis-goodbye p, body.head-urbanist .entrance-say h1{font-weight:200!important;letter-spacing:-.02em!important} .plate-brill{font-weight:400!important;letter-spacing:.005em!important} .plate-brill em{letter-spacing:.03em!important} /* ══ SHE RULED: URBANIST FOR THE MAIN HEADINGS, JOST IN CAPS FOR THE REST ══ Hers, 30 September 2026: *Urbanist for main heading and Jost in caps for eyebrows and other smaller headings.* So the three-font switch is gone and Urbanist is written in. It is geometric, upright and the finest of the three at 200 — the 2046 one. And every smaller heading takes her menu's font in capitals, tracked, which gives the page two registers you can tell apart at a glance rather than four sizes of the same thing. THIS IS HER CHOOSING CAPITALS HERE, and it stands beside her law of yesterday rather than against it: her words are still typed and stored exactly as she capitalises them, and it is the small headings only — never a line of her writing, never a paragraph, never the big ones. */ :root{--head:"Urbanist","Jost",system-ui,sans-serif} .plate-brill em,.wis-ask .ask .ask-two,.wis-moment h2,.wis-goodbye p,.entrance-say h1{ font-weight:200!important;letter-spacing:-.022em!important} .plate-brill{font-weight:300!important;letter-spacing:0!important} .plate-brill em{letter-spacing:.012em!important} /* HER EYEBROWS AND HER SMALLER HEADINGS — Jost, capitals, tracked. Tracking opens as the size comes down, which is what capitals need to stay readable. */ .wis-ask .ask .ask-one,.wis-beat .beat-kick,.wis-tail .kick,.wis-run .kick, .wis-tail .week b,.wis-tail h3,.cell h3, .wis-chapter h2,.wis-quiet h2,.wis-list h2,h2.plain,.wis-run h2.plain{ font-family:var(--display)!important;text-transform:uppercase!important; font-weight:400!important} .wis-chapter h2,.wis-quiet h2,.wis-list h2,h2.plain,.wis-run h2.plain{ font-size:clamp(20px,2vw,26px)!important;letter-spacing:.1em!important; line-height:1.4!important;max-width:30ch!important} .wis-beat .beat-kick,.wis-tail .week b,.wis-tail h3,.cell h3{ font-size:clamp(19px,1.7vw,22px)!important;letter-spacing:.13em!important; line-height:1.4!important} .wis-ask .ask .ask-one,.wis-tail .kick,.wis-run .kick{ font-size:clamp(19px,1.6vw,21px)!important;letter-spacing:.17em!important; line-height:1.5!important} /* Her hero's second line is a statement, not an eyebrow, so it keeps its own case — she told me plainly what tiny tracked capitals there did to her. */ .wis-arrive .plate-said{text-transform:none!important;letter-spacing:.01em!important} /* ══ THE WHOLE HERO LOCKUP IN CAPITALS, AND SET A LITTLE LOWER ═════════════ Hers, 30 September 2026: *I said the other headings in capitals. Complete capitals. There Is No Age Limit On should be in capitals. You Retired From Work, Not Life, capitals. Looking at the Wisdom page, bring the heading down a little bit.* All three lines are capitals now, not only the word she shouted herself. Each one is tracked for its own size — capitals close up as they get bigger, so the letter-spacing comes down as the type goes up, which is the opposite of what a lowercase setting wants. */ .wis-arrive .plate-brill{text-transform:uppercase!important; letter-spacing:.09em!important;font-weight:300!important; font-size:clamp(20px,2vw,30px)!important;line-height:1.3!important} .wis-arrive .plate-brill em{text-transform:uppercase!important; letter-spacing:.012em!important;font-size:2.4em!important;line-height:.98!important} .wis-arrive .plate-said{text-transform:uppercase!important; letter-spacing:.13em!important;font-weight:300!important; font-size:clamp(20px,1.65vw,24px)!important;line-height:1.45!important} /* DOWN A LITTLE. It sat at 15% from the top; 24% puts it in the open sky with the city under it rather than tight beneath the navigation. */ .wis-arrive .plate-words{top:24%!important;bottom:auto!important} @media(min-width:600px) and (max-width:1023px){ .wis-arrive .plate-words{top:22%!important;bottom:auto!important} .wis-arrive .plate-brill{font-size:clamp(20px,2.7vw,26px)!important} } @media(max-width:599px){ .wis-arrive .plate-words{top:20%!important;bottom:auto!important} .wis-arrive .plate-brill{font-size:clamp(20px,4.6vw,23px)!important;letter-spacing:.07em!important} .wis-arrive .plate-brill em{font-size:2.1em!important} .wis-arrive .plate-said{font-size:20px!important;letter-spacing:.1em!important} } /* ══ THE LOCKUP IS A LOCKUP: BOTH EDGES LINE UP ════════════════════════════ Hers, 30 September 2026: *look at the balance here. BRILLIANCE should be that big that it equals the end of the top line. That's what I'm talking about. You just haven't got any fucking design going on there.* SHE IS DESCRIBING A LOCKUP AND I HAD DRAWN THREE SEPARATE LINES. Measured: her top line ran 315px of ink and BRILLIANCE only 246 — twenty-eight per cent short, so the block had a ragged right edge and no shape at all. THE RATIO IS SIZE-INDEPENDENT AND THAT IS WHY IT CAN BE SET ONCE. Both lines are Urbanist, both carry their tracking in `em`, and BRILLIANCE is sized in `em` of the line above — so every width in the lockup scales together and one multiplier holds at every screen. 315 ÷ 246 = 1.2805, so 2.4em becomes 3.073em and the phone's 2.1em becomes 2.689em. IF SHE REWRITES EITHER LINE THE EDGES WILL SHIFT, because no rule can measure her words for her. Re-measure with a Range over each line's text node and reset the multiplier — it is two numbers, and it is in this comment for whoever needs it next. */ .wis-arrive .plate-brill em{font-size:3.073em!important} /* HER SECOND LINE: LETTERS CLOSER, AND FIFTEEN PIXELS FURTHER DOWN. Hers: *bring those letters in a little bit closer… drop it down about 15px, but bring the letter spacing in a titchy bit.* */ .wis-arrive .plate-said{letter-spacing:.075em!important; margin-top:clamp(29px,2.1vw,45px)!important} @media(min-width:600px) and (max-width:1023px){ .wis-arrive .plate-brill em{font-size:2.945em!important} .wis-arrive .plate-said{margin-top:clamp(31px,2vw,39px)!important} } @media(max-width:599px){ .wis-arrive .plate-brill em{font-size:2.689em!important} .wis-arrive .plate-said{letter-spacing:.055em!important;margin-top:29px!important} } /* CORRECTED ON THE REAL PAGE. The first ratio was taken while the pane was at a phone width, where a different clamp band is active — so it was measured on one band and applied to all three, and BRILLIANCE came out 400px against a 363px top line. Measured at each band this time and set from that. */ .wis-arrive .plate-brill em{font-size:2.789em!important} @media(min-width:600px) and (max-width:1023px){ .wis-arrive .plate-brill em{font-size:2.673em!important} } @media(max-width:599px){ .wis-arrive .plate-brill em{font-size:2.440em!important} } /* ══ IT IS AN H1. FIFTEEN PER CENT BIGGER, THE WHOLE LOCKUP ════════════════ Hers, 30 September 2026: *make the whole thing 15% bigger than what you've got. Like, this is a fucking H1 heading.* Every line in the lockup goes up by 1.15 together, so the edges she just had me align stay aligned — the multiplier that locks BRILLIANCE to the top line is untouched. */ .wis-arrive .plate-brill{font-size:clamp(23px,2.3vw,34.5px)!important} .wis-arrive .plate-said{font-size:clamp(23px,1.9vw,27.6px)!important} .wis-arrive .plate-words{max-width:min(58%,720px)!important} @media(min-width:600px) and (max-width:1023px){ .wis-arrive .plate-brill{font-size:clamp(23px,3.1vw,30px)!important} .wis-arrive .plate-said{font-size:clamp(25px,3vw,30px)!important} .wis-arrive .plate-words{max-width:min(84%,690px)!important} } @media(max-width:599px){ .wis-arrive .plate-brill{font-size:clamp(23px,5.3vw,26px)!important} .wis-arrive .plate-said{font-size:23px!important} .wis-arrive .plate-words{max-width:min(93%,420px)!important} } /* ALL THREE EDGES, NOT TWO. With BRILLIANCE locked to the top line at 417px each, her third line still ran 458 — forty-one past them, which is the one thing left making the block look ragged rather than set. She had already asked for those letters closer, so the last of it comes out of the tracking rather than the size: thirty-one gaps, forty-one pixels, .054em. */ .wis-arrive .plate-said{letter-spacing:.021em!important} @media(max-width:599px){ .wis-arrive .plate-said{letter-spacing:.015em!important} } /* THE PHONE BAND, MEASURED ON THE PHONE. Desktop locked at 417/417/416 while 379 still read 315/285/202 with her third line wrapping — the proof of the rule above, that a ratio from one breakpoint is not a ratio. 315 ÷ 285 = 1.105, so 2.440em becomes 2.697em; her third line loses the last of its tracking so it holds one line and lands on the same edge. */ @media(max-width:599px){ .wis-arrive .plate-words{max-width:min(95%,430px)!important} .wis-arrive .plate-brill em{font-size:2.697em!important} .wis-arrive .plate-said{letter-spacing:0!important;font-size:22px!important} } /* ══ EVERY HEADING IN CAPITALS, ON EVERY PAGE ══════════════════════════════ Hers, 30 September 2026: *all the headings need to be capitals. Got BRILLIANCE as a capital on Wisdom. So yeah, every heading must be capital.* Her words are still typed and stored exactly as she capitalises them; this is the setting, not her writing. Tracking opens as the size comes down, because that is what capitals need to stay readable. */ h1,h2,h3,h4, .ask-one,.ask-two,.pathway-name,h2.opener,h2.plain, .entrance-say h1,.entrance-say .part, .plate-brill,.plate-said,.plate-kick,.beat-kick,.kick, .wis-goodbye p,.wis-tail .week b,.cell h3,.bundle-name,.choose-label{ text-transform:uppercase!important} h1,.ask-two,.entrance-say h1,.wis-goodbye p{letter-spacing:.012em!important} h2,h3,h2.opener,h2.plain,.cell h3{letter-spacing:.06em!important} h4,.beat-kick,.kick,.plate-kick,.bundle-name,.choose-label{letter-spacing:.14em!important} /* Never a paragraph, never a quotation, never her body copy. */ p:not(.plate-brill):not(.plate-said):not(.plate-kick):not(.beat-kick):not(.kick):not(.eyebrow):not(.ready):not(.wis-goodbye p), .wis-quote p,.wis-quote cite,.lede,.irony,.gains li,.wis-list li,li,dd,blockquote{ text-transform:none!important} .wis-goodbye p,.beat-kick,.kick,.plate-brill,.plate-said{text-transform:uppercase!important} /* ══ NO SERIF ANYWHERE ON THIS WORLD ═══════════════════════════════════════ Hers, 30 September 2026: *you've got that serif font going all the way through the homepage. All the others.* The `--serif` token is Jost now, so every place that reached for a serif — body copy, ledes, her quotations, the italics — takes her menu's font instead. Cormorant is no longer loaded at all, which also takes a font file off every page. Urbanist still carries the main headings. */ body,p,li,dd,blockquote,figcaption,input,textarea,select,button{ font-family:var(--display)!important} .wis-quote p,.wis-quote cite,.wis-ask .irony,.lede,.soft{ font-family:var(--display)!important} /* A synthesised oblique on a geometric sans is ugly, so her quotations and asides are set upright and told apart by colour and measure instead. */ .wis-quote p,.wis-ask .irony,em.said,.wk-close{font-style:normal!important} /* HER SUBHEADING UNDER IMAGINE THE POSSIBILITIES, and both come down in size. Hers, 30 September 2026: *two massive big headings on top of each other. They're too big.* */ .audience .six-sub{margin:0 auto clamp(10px,1.2vw,16px);max-width:34ch; font-family:var(--display);font-weight:400; font-size:clamp(20px,1.9vw,25px)!important;line-height:1.35;letter-spacing:.09em; text-transform:uppercase;color:var(--ink,var(--iq-ink,#2F5A8C));opacity:.9} .audience .six-sub em{font-style:normal;color:var(--magenta-ink,#D0008C)} .audience h2.opener,h2.opener{font-size:clamp(27px,3.2vw,44px)!important; line-height:1.1!important;letter-spacing:-.014em!important;max-width:24ch} .audience .lede{font-size:clamp(18px,1.7vw,21px)!important;margin-top:clamp(8px,1vw,14px)} /* ══ SMALL LINE, THEN THE BIG ONE — THE SITE'S RULE ════════════════════════ Hers, 30 September 2026: *I want a smaller heading and then a bigger heading. This basic shit I shouldn't have to tell you.* It is the same pattern she ruled on her home H1 and again on the Wisdom H1. An eyebrow is small, tracked and quiet; the heading under it is the one that lands. Never two shouting at each other, and never the big one on top. */ .eyebrow{margin:0 auto clamp(10px,1.3vw,18px);max-width:40ch; font-family:var(--display);font-weight:400; font-size:clamp(19px,1.5vw,21px)!important;line-height:1.4;letter-spacing:.2em; text-transform:uppercase;color:var(--current-ink,#17698F)} .eyebrow em{font-style:normal;color:var(--magenta-ink,#D0008C)} .audience h2.opener,h2.opener{font-family:var(--head)!important;font-weight:200!important; font-size:clamp(30px,4.2vw,62px)!important;line-height:1.04!important; letter-spacing:-.022em!important;max-width:20ch;margin-left:auto;margin-right:auto} .audience h2.opener em,h2.opener em{font-style:normal;color:var(--magenta-ink,#D0008C)} .audience .six-sub{display:none} /* ══ THE SIX: THE HEADING STOPS FLOATING IN AN EMPTY FIELD ═════════════════ Hers, 30 September 2026: *it still doesn't work. There's just something missing.* Measured on the real page, three things were: THE AIR WAS DOING NOTHING. Roughly 180px of empty pale above her eyebrow and the same below the heading, so the words hung in a void with no relation to the six cards they introduce. Space is only generous when it belongs to something. THE MEASURE BROKE HER LINE INTO FOUR. Twenty characters on a fifty-eight character heading gave *MORE THAN PROGRAMS — / THEY ARE YOUR / IMAGINATION'S / PLAYGROUND*, with the magenta half running over two lines of its own. AND NOTHING CONNECTED IT DOWNWARD. Her blue current already does that job on Wisdom, so it does it here: a hairline out of the eyebrow and another into the six, which is the innovation sensation running through the page rather than a decoration. */ .audience{position:relative; padding-top:clamp(40px,5vw,72px)!important; padding-bottom:clamp(18px,2.2vw,30px)!important} .audience::before{content:"";position:absolute;left:50%;transform:translateX(-50%); top:clamp(10px,1.4vw,20px);width:1px;height:clamp(20px,2.8vw,38px); background:linear-gradient(180deg,rgba(47,168,224,0),var(--current,#2FA8E0))} .audience::after{content:"";position:absolute;left:50%;transform:translateX(-50%); bottom:calc(clamp(18px,2.2vw,30px) * -0.55);width:1px;height:clamp(18px,2.4vw,32px); background:linear-gradient(180deg,var(--current,#2FA8E0),rgba(47,168,224,0))} .audience .eyebrow{margin-bottom:clamp(12px,1.5vw,20px)} .audience h2.opener{max-width:26ch!important; font-size:clamp(28px,3.7vw,54px)!important;line-height:1.06!important; text-wrap:balance} .six-up{margin-top:clamp(20px,2.6vw,38px)} /* ══ SIR KEN, SECOND ON THE PAGE, THE WAY SHE HAD HIM ══════════════════════ Her tagline above him, his words set as a quotation, and her question under him. Her eyebrow rule holds: the small line first, then the one that lands. */ .ken-quote{margin:clamp(22px,2.8vw,38px) auto 0;max-width:46ch;padding:0; border:0;text-align:center} .ken-quote p{margin:0;font-family:var(--display);font-weight:300; font-size:clamp(18px,1.9vw,24px)!important;line-height:1.5; color:var(--ink,var(--iq-ink,#2F5A8C));text-transform:none!important} .ken-quote cite{display:block;margin:clamp(12px,1.4vw,18px) 0 0;font-style:normal; font-family:var(--display);font-weight:400; font-size:clamp(17px,1.4vw,19px)!important;letter-spacing:.14em; text-transform:uppercase;opacity:.75} .ready{margin:clamp(26px,3.2vw,46px) auto 0;max-width:24ch; font-family:var(--head);font-weight:200; font-size:clamp(24px,2.9vw,40px)!important;line-height:1.1;letter-spacing:-.018em; text-transform:uppercase;color:var(--ink,var(--iq-ink,#2F5A8C))} .ready em{font-style:normal;color:var(--magenta-ink,#D0008C)} /* ══ EVERY SECTION EARNS ITS PLACE, AND ARRIVES ════════════════════════════ Hers, 30 September 2026: *use moments. Each section of the website has to earn its place, and there needs to be a moment there. Have the words floating in. Make sure you do something special. It doesn't have to be the traditional floating in.* SO IT IS NOT A FADE. It is her own world doing the work: THE CURRENT DRAWS FIRST. The blue hairline into a section grows downward out of nothing before a word appears — the innovation sensation arriving ahead of the thought, which is exactly what she says it is. THE WORDS SURFACE OUT OF THE CLOUD. Each line is clipped at its own baseline and rises through itself with the blur clearing, so it comes INTO FOCUS rather than fading up. Cloud and pale sky is the ground of this whole world; the words come out of it. AND A MOMENT OPENS ITS PORTAL. On the two magenta-ring statements the ring breathes open from 0.88 behind the line, so the words arrive THROUGH it. EVERY PART OF IT IS GUARDED. Nothing here exists unless `html.js-float` is on the page, and every animation carries `both`, so a browser that never fires the observer, or a person who has asked for less movement, gets the finished state and not an empty screen. Her law: nothing that must be seen may depend on something that might not happen. */ @media (prefers-reduced-motion:no-preference){ .js-float .audience .eyebrow, .js-float .audience h2.opener, .js-float .ken-quote, .js-float .ready, .js-float .wis-moment h2, .js-float .wis-chapter h2, .js-float .wis-chapter p, .js-float .wis-beat .beat-kick, .js-float .wis-beat .beat-says{ opacity:0} .js-float .is-in .eyebrow, .js-float .is-in.wis-beat .beat-kick{ animation:iqSurface 900ms cubic-bezier(.19,1,.22,1) 80ms both} .js-float .is-in h2.opener, .js-float .is-in.wis-moment h2, .js-float .is-in.wis-chapter h2{ animation:iqSurface 1150ms cubic-bezier(.19,1,.22,1) 240ms both} .js-float .is-in .ken-quote, .js-float .is-in.wis-chapter p, .js-float .is-in.wis-beat .beat-says{ animation:iqSurface 1000ms cubic-bezier(.19,1,.22,1) 420ms both} .js-float .is-in .ready{ animation:iqSurface 1100ms cubic-bezier(.19,1,.22,1) 640ms both} /* THE CURRENT ARRIVES FIRST, DRAWN DOWNWARD. */ .js-float .audience::before,.js-float .audience::after{ transform-origin:top center;transform:translateX(-50%) scaleY(0)} .js-float .audience.is-in::before{ animation:iqCurrent 620ms cubic-bezier(.4,0,.2,1) 0ms both} .js-float .audience.is-in::after{ animation:iqCurrent 620ms cubic-bezier(.4,0,.2,1) 700ms both} /* AND THE PORTAL BREATHES OPEN BEHIND A MOMENT. */ .js-float .wis-moment::before{transform:translate(-50%,-50%) scale(.88);opacity:0} .js-float .wis-moment.is-in::before{ animation:iqPortal 1600ms cubic-bezier(.19,1,.22,1) 60ms both} @keyframes iqSurface{ from{opacity:0;clip-path:inset(0 0 105% 0);transform:translateY(15px);filter:blur(9px)} 55% {opacity:1;filter:blur(0)} to {opacity:1;clip-path:inset(0 0 -12% 0);transform:none;filter:blur(0)}} @keyframes iqCurrent{ from{transform:translateX(-50%) scaleY(0);opacity:0} to {transform:translateX(-50%) scaleY(1);opacity:1}} @keyframes iqPortal{ from{transform:translate(-50%,-50%) scale(.88);opacity:0} to {transform:translate(-50%,-50%) scale(1);opacity:1}} } /* ══ HER IMAGINE LINES: A PURPOSEFUL SPLIT, AND SMALLER ════════════════════ Hers, 30 September 2026: *the bit that says imagine… it's a bit too big. I'm looking on the computer, and make sure you have the second line in pink on the second line. Make sure that there's the purposeful split between the two lines.* Her magenta half was wrapping wherever the measure happened to break, so the split was an accident rather than a decision. It is its own line now — every one of them turns in the same place — and the whole run comes down in size for a desktop. */ .imagine p{font-size:clamp(22px,2.6vw,38px)!important;line-height:1.16!important; max-width:26ch!important;letter-spacing:-.012em!important} .imagine p em{display:block!important;font-style:normal!important; color:var(--magenta-ink,#D0008C)!important; margin-top:.16em;text-wrap:balance} .imagine p.found{font-size:clamp(25px,3.1vw,46px)!important} @media(max-width:899px){ .imagine p{font-size:clamp(21px,5.4vw,28px)!important;max-width:20ch!important} .imagine p.found{font-size:clamp(23px,6.2vw,32px)!important} } /* AND HER FIRST HALF GETS ONE LINE. A 26ch measure wrapped it, so what she asked for — a two-line block, the pink one second — was coming out as three. The measure opens so her opening clause holds one line, and her full stop now lives inside her magenta so it can never be orphaned beneath it. */ .imagine p{max-width:46ch!important;font-size:clamp(20px,2.25vw,31px)!important} .imagine p.found{max-width:24ch!important;font-size:clamp(24px,3vw,44px)!important} @media(max-width:899px){ .imagine p{max-width:24ch!important;font-size:clamp(20px,5vw,26px)!important} .imagine p.found{max-width:16ch!important} } /* ══ HER SECTION: HER HEADLINE, HER WOMAN, HIS QUOTE ═══════════════════════ Built from her own screenshot of 16 August. Her headline is hers and carries no name above it — her line, in her magenta, in capitals, across the top. Her portrait sits to the left of his quote, which is the one place on this world she has asked for two things side by side. His name appears once, under his own words, and nowhere else. */ .ken-block{padding:clamp(44px,5.6vw,92px) 0} .ken-block h2.hers{font-family:var(--head)!important;font-weight:200!important; color:var(--magenta-ink,#D0008C)!important; font-size:clamp(26px,3.6vw,52px)!important;line-height:1.08!important; letter-spacing:-.018em!important;max-width:24ch;margin:0 auto} .ken-block h2.hers em{font-style:normal;color:var(--magenta-ink,#D0008C)} .ken-put{display:grid;gap:clamp(24px,3.6vw,56px);align-items:center; max-width:1060px;margin:clamp(30px,4vw,60px) auto 0; padding:0 clamp(20px,4vw,40px)} @media(min-width:800px){.ken-put{grid-template-columns:minmax(0,300px) minmax(0,1fr)}} .ken-face img{display:block;width:100%;height:auto; border-radius:50% 50% 12px 12px;box-shadow:0 18px 50px -28px rgba(47,90,140,.35)} .ken-block .ken-quote{margin:0;max-width:44ch;text-align:left;border:0;padding:0} .ken-block .ken-quote p{margin:0;font-family:var(--display);font-weight:300; font-style:italic;font-size:clamp(18px,1.8vw,23px)!important;line-height:1.55; color:var(--ink,var(--iq-ink,#2F5A8C));text-transform:none!important} .ken-block .ken-quote cite{display:block;margin:clamp(14px,1.6vw,22px) 0 0; font-style:italic;font-family:var(--display);font-weight:400; font-size:clamp(17px,1.4vw,19px)!important;letter-spacing:.1em; text-transform:uppercase;color:var(--magenta-ink,#D0008C);opacity:1} .ken-block .ready{margin:clamp(30px,3.6vw,54px) auto 0;max-width:none; text-transform:none!important} .ken-block .ready .enter{font-size:clamp(19px,1.7vw,22px)!important; text-transform:none!important;letter-spacing:.01em!important} @media(max-width:799px){ .ken-face{max-width:280px;margin:0 auto} .ken-block .ken-quote{text-align:center;margin:0 auto} } /* ══ HER FOUR CORRECTIONS, 30 SEPTEMBER 2026 ══════════════════════════════ *Why are you forgetting my rules here, that smaller headings need to be capitals? ANY heading needs to be a capital.* — including the ones inside her Sir Ken section and the blocks recovered from her U-GENIUS screens. Three were slipping through: her eyebrow, because it is a `

` and the rule that keeps paragraphs out of capitals was catching it, and her two portal moments. *Why is my groovy woman in an arch? It does not belong. And why is it over to the left? That should be centred. ALL of it should be centred.* The arch was a shape I put on her artwork. It is gone, and her whole section stands on one centred axis — her woman above, his words beneath her. */ h1,h2,h3,h4,h5,h6, .ken-block h2.hers,.ken-block .ken-quote cite, .wis-moment h2,.wis-chapter h2,.wis-quiet h2,.wis-list h2, .cell h3,.wis-tail .week b,h2.opener,h2.plain, p.eyebrow,p.beat-kick,p.kick,p.plate-brill,p.plate-said,p.plate-kick, .audience p.eyebrow,.wis-beat p.beat-kick,.wis-tail p.kick{ text-transform:uppercase!important} .ken-put{display:block!important;max-width:820px!important; margin-left:auto!important;margin-right:auto!important;text-align:center!important} .ken-face{max-width:min(340px,72vw)!important;margin:0 auto!important} .ken-block .ken-face img,.ken-face img{border-radius:0!important;box-shadow:none!important} .ken-block .ken-quote{margin:clamp(26px,3.2vw,44px) auto 0!important; max-width:44ch!important;text-align:center!important} .ken-block .ken-quote p,.ken-block .ken-quote cite{text-align:center!important} /* AND HER SECTION STOPS FLOATING. The same fault she has named twice — a heading with a field of empty pale above and below it. Her headline, her woman and his words are one thing, so they sit together. */ .ken-block{padding:clamp(34px,4vw,64px) 0 clamp(30px,3.6vw,56px)!important} .ken-put{margin-top:clamp(22px,2.6vw,38px)!important} .ken-block .ready{margin-top:clamp(24px,2.8vw,40px)!important} /* ══ HER ARCH IS HERS, AND THE PAGE BREATHES WITHOUT GAPING ════════════════ Hers, 30 September 2026: *I want her in an arch, I told you.* I had read her earlier line as the arch being wrong when what was wrong was where the picture sat. The arch was always hers — it is in her own screenshot — so it is back, and true: a half-round top on a flat base, not a soft-cornered box. And: *there's too much blank space between stuff. Don't squish everything, but just move things a bit closer together.* So every vertical gap comes down about a quarter. Nothing is squashed; the page simply stops gaping. */ .ken-block .ken-face img,.ken-face img{ border-radius:50% 50% 0 0 / 42% 42% 0 0 !important; box-shadow:0 20px 48px -30px rgba(47,90,140,.4)!important} .ground{padding-top:clamp(28px,3.4vw,52px)!important; padding-bottom:clamp(28px,3.4vw,54px)!important} .ground.close{padding-top:clamp(34px,4vw,62px)!important} .audience{padding-top:clamp(30px,3.6vw,54px)!important; padding-bottom:clamp(14px,1.8vw,24px)!important} .wis-moment{padding-top:clamp(64px,8.4vw,132px)!important; padding-bottom:clamp(64px,8.4vw,132px)!important} .wis-chapter{padding-top:clamp(32px,4vw,62px)!important; padding-bottom:clamp(32px,4vw,62px)!important} .wis-beat{padding-top:clamp(14px,1.7vw,22px)!important; padding-bottom:clamp(14px,1.7vw,22px)!important} .wis-quiet{padding-top:clamp(26px,3.4vw,48px)!important; padding-bottom:clamp(26px,3.4vw,48px)!important} .wis-list{padding-top:clamp(24px,3vw,44px)!important; padding-bottom:clamp(24px,3vw,44px)!important} .wis-goodbye{padding-top:clamp(42px,5.6vw,84px)!important; padding-bottom:clamp(42px,5.6vw,84px)!important} .imagine{padding-top:clamp(30px,3.6vw,56px)!important; padding-bottom:clamp(30px,3.6vw,56px)!important} .six-up{margin-top:clamp(14px,1.8vw,26px)!important} /* ══ NO ARCH. HERS, 30 SEPTEMBER 2026 ═════════════════════════════════════ *I do not want the arch. You put it in an arch. You just arched it. I hate the arch.* Her word, and it is the last word — her picture is her picture, with no shape of mine cut into it. Plain, centred, nothing else. */ .ken-block .ken-face img,.ken-face img{ border-radius:0!important;box-shadow:none!important; clip-path:none!important;mask-image:none!important} /* ══ HER QUOTE SITS NEXT TO HER. HERS, 30 SEPTEMBER 2026 ══════════════════ *What I had on my website was the text, the quote next to her.* When she said ALL OF IT SHOULD BE CENTRED she meant the block centred on the page — not the picture stacked on top of the words. Her picture on the left, his quote on the right, the pair sitting dead centre in the page. This is the composition she allows: a moment, never a blocky half-and-half. */ .ken-put{display:grid!important; grid-template-columns:minmax(0,300px) minmax(0,1fr)!important; gap:clamp(26px,3.4vw,54px)!important;align-items:center!important; max-width:940px!important;margin-left:auto!important;margin-right:auto!important; text-align:left!important} .ken-face{max-width:300px!important;margin:0!important} .ken-block .ken-quote{margin:0!important;max-width:44ch!important;text-align:left!important} .ken-block .ken-quote p,.ken-block .ken-quote cite{text-align:left!important} @media(max-width:799px){ .ken-put{grid-template-columns:1fr!important;justify-items:center!important; text-align:center!important;max-width:460px!important} .ken-face{max-width:260px!important;margin:0 auto!important} .ken-block .ken-quote,.ken-block .ken-quote p,.ken-block .ken-quote cite{ text-align:center!important} } /* HIS CREDIT IS SMALLER NOW AND IT IS A LINK TO HIS TALK. Hers: *the link that I did have was to go to Sir Ken's TED Talk. So make that smaller.* */ .ken-block .ken-quote cite{font-size:clamp(14px,1.05vw,15px)!important; letter-spacing:.16em!important;opacity:.8!important; margin-top:clamp(12px,1.3vw,18px)!important} .ken-block .ken-quote cite a{color:inherit;text-decoration:none; border-bottom:1px solid rgba(212,33,187,.45);padding-bottom:2px} .ken-block .ken-quote cite a:hover,.ken-block .ken-quote cite a:focus-visible{ color:var(--magenta-ink,#D0008C);border-bottom-color:var(--magenta,#D421BB)} /* ══ HER IMAGINE LINES DRIFT LIKE CLOUD ═══════════════════════════════════ Hers, 30 September 2026: *I love that bit, but we're not making it special enough. Have a little bit more air between the two lines, and I want it coming in like it's on a cloud, not literally on a cloud. But the movement is too small. I want it coming in, then going out, and then the other one coming in. Bigger movement.* IT WAS DRIFTING 22 PIXELS IN AND 18 OUT, which at that size is barely a twitch. It now comes up from seventy, slightly under scale and out of focus — the way something arrives through cloud — holds while she reads it, and leaves upward through the blur before the next one surfaces. A later keyframe of the same name replaces the old one, so there is one animation, not two arguing. AND THE AIR BETWEEN HER TWO LINES OPENS, so the magenta half reads as a turn rather than a wrap. */ .imagine p em{margin-top:.44em!important} .imagine-stage{gap:0} @media (prefers-reduced-motion:no-preference){ @keyframes floatLine{ 0% {opacity:0;transform:translateY(72px) scale(.955);filter:blur(11px)} 4.4% {opacity:1;transform:translateY(0) scale(1);filter:blur(0)} 19% {opacity:1;transform:translateY(0) scale(1);filter:blur(0)} 24.5% {opacity:0;transform:translateY(-64px) scale(1.035);filter:blur(9px)} 100% {opacity:0;transform:translateY(72px) scale(.955);filter:blur(11px)}} /* Her last line surfaces the same way and then stays. */ @keyframes imagineStay{ from{opacity:0;transform:translateY(72px) scale(.955);filter:blur(11px)} 62% {opacity:1;filter:blur(0)} to {opacity:1;transform:none;filter:blur(0)}} .imagine-stage p.found{animation-duration:1900ms!important} } /* ══ THE PORTAL: THE MAGIC OF IT ALL ══════════════════════════════════════ Her argument runs above her chooser. Her formula is the one thing on the page set as an object rather than a sentence — it is a quotient, so it is given the air of one. */ .portal-magic{padding-bottom:clamp(30px,4vw,60px)} .portal-sum{text-align:center} .portal-magic .formula{margin:clamp(14px,1.8vw,24px) auto 0;max-width:22ch; font-family:var(--head);font-weight:200; font-size:clamp(23px,3vw,42px);line-height:1.25;letter-spacing:-.01em; color:var(--ink,var(--iq-ink,#2F5A8C));text-transform:uppercase} .portal-magic .wis-moment h2{font-size:clamp(28px,4.4vw,60px)!important} /* ══ HER SIX — PINK CAPITALS, AND THE BLOCKS PULLED IN ═════════════════════ Hers, 30 September 2026: *I want them pink, and I want them in capitals, and I want those blocks. They're too big. The descriptions, the font size is too big. There's too much air in them.* THE CAPITALS ARE TYPED, NEVER TRANSFORMED — her own law. The names are written POSSIBILITIES, PASSION, WISDOM in front-page.php, so what reaches the page is what is written. AND THIS GOES UNDER HER TWENTY-PIXEL FLOOR ON PURPOSE, at her word. The description was 19px with 1.6 leading and it read as air; it is 17px now. */ .six-up .up-words { padding: 14px 2px 2px; } .six-up .up-words b { font-family: var(--display); font-size: clamp(20px, 2.6vw, 24px); font-weight: 400; letter-spacing: .085em; line-height: 1.16; color: var(--magenta-ink); } .six-up .up-words i { font-family: var(--display); font-size: 13px; font-weight: 400; letter-spacing: .16em; text-transform: none; color: var(--current-ink); display: block; margin-top: .4rem; } .six-up .up-says { display: block; font-family: var(--serif); font-size: 17px; line-height: 1.5; font-weight: 300; color: var(--ink-soft); margin-top: .6rem; } .six-up { row-gap: 2.6rem; } /* HER OWN PROGRAMME CARDS CARRY THE WORDS — 30 SEPTEMBER 2026. Hers: *we should use those images that I had too.* Her six cards have POSSIBILITIES AGES 8-12, PASSION ADULTS, WISDOM SENIORS and the rest painted into the artwork, so the tile says nothing underneath them. The words stay in the markup for a screen reader, and come back the moment she clears a card. */ .six-up .up-words.painted { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ══ EVERYTHING ELSE HER OWN HOME PAGE CARRIED — 30 SEPTEMBER 2026 ══════════ What Is IMAGENIQ, The Method and The Philosophy. Hers: *gather it, put it there, and I can pull it off if I want to.* */ .whatis, .method, .philosophy { padding: 4.5rem 0 1rem; } .whatis .kick.plain { font-family: var(--display); font-size: 20px; font-weight: 400; letter-spacing: .14em; color: var(--magenta-ink); text-transform: none; margin: .6rem 0 1.6rem; } .whatis .lede + .lede { margin-top: 1.1rem; } .phil-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; max-width: 1180px; margin: 2.6rem auto 0; padding: 0 clamp(1rem, 4vw, 2.5rem); } .phil b { display: block; font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: .18em; color: var(--magenta-ink); margin-bottom: .9rem; } .phil p { font-family: var(--serif); font-size: 20px; line-height: 1.6; font-weight: 300; color: var(--ink); margin: 0; } .phil-close { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 27px); line-height: 1.4; color: var(--current-ink); margin: 2.8rem 0 0; text-align: center; } @media (max-width: 860px) { .phil-three { grid-template-columns: 1fr; gap: 2rem; } } /* ══ HER CREATIVITY FIGURES, EXACTLY AS SHE HAD THEM ════════════════════════ Hers, 30 September 2026: *look at what I had on my old website. The image is in the background, right? The most of it is covered by the big blocks of the percentages. Do not put a fucking heading there. Make it narrower, not as high.* READ OFF HER OWN SCREEN rather than designed — her walk of her live home page, 16 August 2026 (Desktop/SCREENSHOTS, 16.22.31), measured pixel by pixel: the band 2.65 : 1 a letterbox. It had been 3:2 and far too tall four blocks 15.1% wide each, at x 9.2 / 32.8 / 54.9 / 75.5 their height 33.4% of the band, from 49% down to 83% their fill #F2DAF3, SOLID her figures #B22D88 her heading #C336B6 THE BLOCKS ARE THE SECTION AND THE PICTURE IS BEHIND THEM. I had it inside out — a tall picture with small pale cards floating on it — which is why she could not read her own numbers. ONE DEPARTURE AND IT IS ONLY THE SMALL LINE. Her block text #C53FB9 on her own ground reads 3.36:1, which is hard at that size; a previous pass answered it by washing her ground out to #FCEEF9, which broke her design and still only reached 3.92. Her ground is kept exactly and only the small line is deepened to #A3237C — 5.21:1, same magenta family. Her big figures are untouched at 4.44:1, which is comfortably over the threshold for text that size. HER HEADING IS TITLE CASE, AS SHE WROTE IT. The blanket h1–h6 rules shout it into capitals with !important, so it is answered here at its own weight. */ .lost { padding: 0; margin: 4rem 0 0; } .lost-plate { position: relative; aspect-ratio: 2.65 / 1; overflow: hidden; } .lost-plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ages { position: absolute; inset: 0; overflow: hidden; } .lost-ask { position: absolute; left: 50%; top: 5%; transform: translateX(-50%); z-index: 2; width: min(92%, 52rem); margin: 0; text-align: center; font-family: var(--head); font-weight: 200; font-size: clamp(26px, 3.4vw, 50px); line-height: 1.12; letter-spacing: -.018em; color: #C336B6; text-transform: none !important; } .lost-figures { position: absolute; left: 0; right: 0; top: 49%; height: 33.4%; z-index: 2; display: grid; grid-template-columns: repeat(4, 15.1%); justify-content: space-between; padding: 0 9.2%; margin: 0; max-width: none; gap: 0; } .lost-one { background: #F2DAF3; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(6px, 1.2vw, 20px) clamp(5px, .9vw, 14px); } .lost-one b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(19px, 3.1vw, 48px); line-height: 1; color: #B22D88; font-variant-numeric: tabular-nums; } .lost-one b span { font-size: .66em; margin-left: 1px; opacity: 1; } .lost-one.is-last b { color: #B22D88; } .lost-say { display: block; margin-top: clamp(3px, .7vw, 10px); font-family: var(--display); font-weight: 300; font-size: clamp(10px, 1.05vw, 17px); line-height: 1.36; color: #A3237C; } .lost-one.is-last .lost-say { color: #A3237C; opacity: 1; } /* NARROW: her four-across cannot hold at 379, so the picture keeps her band and her blocks come underneath it, two by two, at a size somebody can read. */ @media (max-width: 860px) { .lost-plate { aspect-ratio: auto; } .lost-plate > img { position: relative; height: auto; aspect-ratio: 2.65 / 1; } .ages { position: relative; aspect-ratio: 2.65 / 1; } .lost-ask { position: static; transform: none; width: auto; padding: clamp(22px, 6vw, 34px) 20px 0; } .lost-figures { position: static; height: auto; transform: none; grid-template-columns: 1fr 1fr; gap: 12px; padding: clamp(18px, 5vw, 26px) 20px 0; justify-content: stretch; } .lost-one { padding: 20px 14px; } .lost-one b { font-size: clamp(34px, 9vw, 46px); } .lost-say { font-size: 17px; margin-top: 10px; } } /* ══ HER OWN PEOPLE, IN THEIR OWN WORDS — 30 SEPTEMBER 2026 ═════════════════ What Our Mothers Say. Recovered off her own site; every one is a real person who wrote to her, so nothing is trimmed. */ .wis-voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; max-width: 1180px; margin: 0 auto; padding: 4rem clamp(1rem, 4vw, 2.5rem); } .wis-voices .voice { margin: 0; } .wis-voices blockquote { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 20px; line-height: 1.58; color: var(--ink); border-left: 2px solid var(--magenta); padding-left: 1.2rem; } .wis-voices figcaption { margin-top: .9rem; padding-left: 1.3rem; font-family: var(--display); font-size: 20px; font-weight: 400; letter-spacing: .14em; color: var(--magenta-ink); } @media (max-width: 900px) { .wis-voices { grid-template-columns: 1fr; gap: 2.4rem; } } /* HER CREATIVE THINKING QUOTIENT — 30 SEPTEMBER 2026. Her own formula, set large enough to be read as a statement rather than a caption. */ .quotient { padding: 3.4rem 0 1rem; text-align: center; } .quotient .formula { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.4vw, 31px); line-height: 1.45; letter-spacing: .01em; color: var(--magenta-ink); max-width: 60ch; margin: 1.1rem auto 0; } /* ══ HER READING ROOM — 30 SEPTEMBER 2026 ═══════════════════════════════════ Her own essays. A list that reads like a shelf, and a piece that reads like a page rather than a web layout. */ .reading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem; max-width: 1180px; margin: 2.6rem auto 0; padding: 0 clamp(1rem, 4vw, 2.5rem); } .reading .read { display: block; text-decoration: none; padding-bottom: 1.6rem; border-bottom: 1px solid var(--hair); } .reading .read b { display: block; font-family: var(--head); font-weight: 200; font-size: clamp(24px, 2.5vw, 33px); line-height: 1.18; letter-spacing: -.012em; color: var(--ink); } .reading .read i { display: block; font-style: normal; margin-top: .8rem; font-family: var(--serif); font-weight: 300; font-size: 20px; line-height: 1.5; color: var(--ink-soft); } .reading .read:hover b { color: var(--magenta-ink); } .piece-body { max-width: 68ch; margin: 2.4rem auto 0; padding: 0 clamp(1rem, 4vw, 2.5rem); } .piece-body p { font-family: var(--serif); font-weight: 300; font-size: 21px; line-height: 1.72; color: var(--ink); margin: 0 0 1.35rem; } @media (max-width: 860px) { .reading { grid-template-columns: 1fr; gap: 1.8rem; } } /* ══ HER COUNTER, DRESSED BY HER OWN WORLD — 30 SEPTEMBER 2026 ══════════════ Walked as a stranger. The counter markup is shared and carries no gutter of its own, so her heading sat flush at x=0 and the first letter clipped at every width — her own 16px gutter law, broken on the one page where somebody is about to hand over a card. Dressed from her side; nothing shared moved. */ .lam-pay-page { max-width: 560px; margin: 0 auto; padding: 3.5rem clamp(1rem, 5vw, 2rem) 4rem; text-align: center; } .lam-pay-page__said { font-family: var(--head); font-weight: 200; font-size: clamp(30px, 5vw, 52px); line-height: 1.14; letter-spacing: -.015em; color: var(--ink); margin: 0 0 1.6rem; } .lam-pay__card { min-height: 260px; margin: 0 auto 1.6rem; text-align: left; } /* ══ HER OWN LINE WAS TWELVE PIXELS — 30 SEPTEMBER 2026 ═════════════════════ Found by running her own sweep (every childless element measured) across the pages after Wisdom. Her body copy came back clean; the footer did not. *We Haven't Scratched The Surface Of Human Potential* is HER SENTENCE, the one she corrected me for attributing to Sir Ken Robinson — and it sat at 12px in tracked capitals at the foot of every page on her world. Her law is nothing under twenty pixels, and her capitals law is that a transform never does the shouting. It is her serif at reading size now, her magenta, and capitalised the way she writes it rather than by CSS. */ footer .line { font-size: clamp(20px, 2vw, 26px); letter-spacing: 0; text-transform: none; line-height: 1.35; font-family: var(--head); font-weight: 200; color: var(--magenta-ink); max-width: 24ch; margin-left: auto; margin-right: auto; } /* ══ THE GROWN-UP'S YES — 30 SEPTEMBER 2026 ═════════════════════════════════ The Voice's wording, beside the child's details so it is clear what it covers. Readable at her own floor, never the small print of a form. */ .ask--tick .tick { display: flex; gap: .9rem; align-items: flex-start; cursor: pointer; } .ask--tick .tick input { width: 26px; height: 26px; margin: .2rem 0 0; flex: 0 0 auto; accent-color: var(--magenta-ink); } .ask--tick .tick span { font-family: var(--serif); font-weight: 300; font-size: 20px; line-height: 1.55; color: var(--ink); } .ask--tick .why { margin-top: .7rem; } /* ══ A ROOM WITH NO WEBSITE ROUND IT — 30 SEPTEMBER 2026 ════════════════════ Hers: *I don't want them going to what looks like our fucking website.* */ body.iq-alone{background:var(--cloud);margin:0} body.iq-alone .top,body.iq-alone .bar,body.iq-alone footer, body.iq-alone .site-foot,body.iq-alone #wpadminbar{display:none!important} .iq-alone-main{display:block} .iq-alone-mark{margin:0;padding:2.4rem 0 3rem;text-align:center; font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.34em; color:var(--ink-soft)} .iq-alone-mark i{font-style:normal;color:var(--magenta-ink)} /* Her four questions, which are the brief. Nothing numbered, nothing ranked. */ .doc-open{margin:1.6rem 0 0;padding:0;list-style:none;max-width:46rem} .doc-open li{position:relative;padding:0 0 0 1.5rem;margin:0 0 1rem; font-family:var(--serif);font-weight:300; font-size:clamp(21px,2.4vw,26px);line-height:1.55;color:var(--ink)} .doc-open li::before{content:"";position:absolute;left:0;top:.7em; width:7px;height:7px;border-radius:50%;background:var(--magenta)} /* ══ HER IDEA BUBBLES — 30 SEPTEMBER 2026 ═══════════════════════════════════ Hers: *ITOSHII has made these gorgeous bubbles, like cloud, like dream bubbles. They're like idea bubbles. They're fine. They've got a very, very fine gold outline, and they just float up.* Borrowed from her own world, and doing a job rather than decorating: this is the Imagitorium, and ideas are rising in it. */ .doc-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden} .doc-bubbles span{position:absolute;bottom:-18vh;border-radius:50%; border:1px solid rgba(201,162,77,.85); background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.92),rgba(255,255,255,.42) 46%,rgba(255,255,255,.06) 72%); box-shadow:0 0 22px rgba(255,255,255,.7), inset 0 0 26px rgba(255,255,255,.55); animation:iqRise 26s linear infinite both} .doc-bubbles span:nth-child(1){left:7%;width:84px;height:84px;animation-duration:30s;animation-delay:0s} .doc-bubbles span:nth-child(2){left:19%;width:38px;height:38px;animation-duration:22s;animation-delay:4s} .doc-bubbles span:nth-child(3){left:31%;width:120px;height:120px;animation-duration:36s;animation-delay:9s} .doc-bubbles span:nth-child(4){left:46%;width:52px;height:52px;animation-duration:25s;animation-delay:2s} .doc-bubbles span:nth-child(5){left:61%;width:96px;height:96px;animation-duration:33s;animation-delay:13s} .doc-bubbles span:nth-child(6){left:74%;width:30px;height:30px;animation-duration:20s;animation-delay:6s} .doc-bubbles span:nth-child(7){left:85%;width:70px;height:70px;animation-duration:28s;animation-delay:16s} .doc-bubbles span:nth-child(8){left:93%;width:44px;height:44px;animation-duration:24s;animation-delay:11s} @keyframes iqRise{ 0%{transform:translateY(0) translateX(0);opacity:0} 12%{opacity:.85} 80%{opacity:.7} 100%{transform:translateY(-128vh) translateX(22px);opacity:0}} @media (prefers-reduced-motion:reduce){.doc-bubbles{display:none}} /* the three of them, and the retired one carries her own mark */ .doc-three{display:grid;gap:1.6rem;margin:1.6rem 0 .4rem} .doc-one{padding:1.3rem 1.5rem;background:rgba(255,255,255,.66); border-left:2px solid var(--hair)} .doc-one p{margin:0;font-family:var(--serif);font-weight:300; font-size:clamp(20px,2.2vw,24px);line-height:1.55;color:var(--ink)} .doc-one p + p{margin-top:.6rem} .doc-one b{font-weight:400;color:var(--magenta-ink)} .doc-who{font-family:var(--display)!important;font-size:20px!important; letter-spacing:.14em;color:var(--current-ink)!important} .doc-best{border-left-color:var(--magenta);background:rgba(255,255,255,.88)} .doc-aside{margin-top:.7rem!important;font-size:19px!important; color:var(--ink-soft)!important;font-style:normal} /* Four of her people sit two by two, never three and one left alone (1 Oct 2026). */ @media (min-width: 901px) { .wis-voices:has(> .voice:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 60rem; margin-inline: auto; column-gap: 4rem; } } /* ══ 1 OCTOBER 2026 — HER HOME PAGE, AT HER WORD ═══════════════════════════ */ /* Her logo back at the top. */ .top .bar{padding:8px 20px 0} .logo-top{display:inline-block;line-height:0} .logo-top img{height:74px;width:auto;mix-blend-mode:multiply} @media (max-width:700px){.logo-top img{height:52px}} /* How Much Creativity Have You Lost: her heading above the picture, never on it. The ages drift slowly and a mist rolls across them, so the picture breathes. */ .lost{margin-top:clamp(56px,8vw,110px)!important} .lost-ask{position:static!important;transform:none!important;width:auto!important; margin:0 auto clamp(22px,3vw,36px)!important;padding:0 20px!important;text-align:center; font-weight:300!important;font-size:clamp(34px,5.2vw,64px)!important;line-height:1.08!important; color:#C336B6!important} .ages-drift{position:absolute;inset:0;animation:iqdrift 28s ease-in-out infinite alternate;will-change:transform} @keyframes iqdrift{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-2.2%,-1.6%,0)}} .lost-mist{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1} .lost-mist i{position:absolute;left:0;width:200%;background-repeat:repeat-x;background-size:50% 100%; animation:iqmist 70s linear infinite} .lost-mist .far{bottom:22%;height:52%;background-image:url(../img/mist-far.png);opacity:.5} .lost-mist .near{bottom:-8%;height:58%;background-image:url(../img/mist-near.png);opacity:.78;animation-duration:44s} @keyframes iqmist{from{transform:translateX(0)}to{transform:translateX(-50%)}} .lost-figures{z-index:3} @media (prefers-reduced-motion:reduce){.ages-drift,.lost-mist i{animation:none}} /* Type you can read. Her faces stay (Urbanist headings, Jost), heavier and darker. */ body{font-weight:400;color:var(--ink);font-size:17px} p,li,dd,blockquote,figcaption{font-weight:400} .soft,.lede{color:var(--iq-soft,#4D6C94)} .lost-say{font-weight:400!important} /* No circles, anywhere. Hers, 1 October 2026: *all these circles… I hate it.* */ .wis-moment::before{display:none!important} /* Her logo big enough to read her name under the orb; the header scrolls away with the page. */ .top{position:relative!important} .logo-top img{height:124px} @media (max-width:700px){.logo-top img{height:88px}} /* ══ HER LOGO IN THE CORNER, AND THE BURGER THAT FOLDS INTO HER PORTAL ═════════ Hers, 1 October 2026. Her own logo, whole. Three glowing stepping stones that drift out of step and fold into her portal ring. The menu drops in from the corner as a small sky, never over the whole page, and always closes. */ .top.iq-top{position:sticky!important;top:0;z-index:90;display:flex;align-items:center;justify-content:space-between; padding:8px clamp(16px,3vw,40px);background:rgba(247,250,253,.9); -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid rgba(212,33,187,.08)} .top.iq-top .bar,.top.iq-top .ways{display:none!important} .logo-side{display:block;line-height:0} .logo-side img{height:82px;width:auto;mix-blend-mode:multiply} @media (max-width:600px){.logo-side img{height:60px}} .iq-burger{position:relative;width:58px;height:58px;border:0;border-radius:50%;background:transparent;cursor:pointer;padding:0; -webkit-tap-highlight-color:transparent} .iq-burger .st{position:absolute;left:50%;border-radius:50%; background:radial-gradient(ellipse at 50% 30%,#FFFFFF 0%,#F9CFF1 28%,#E23ACB 68%,#B1159A 100%); box-shadow:0 0 10px 1px rgba(226,58,203,.55),0 4px 6px -3px rgba(90,20,100,.35); transition:transform .55s cubic-bezier(.7,0,.2,1),opacity .35s ease,box-shadow .4s ease} .iq-burger .s1{top:15px;width:14px;height:5px;margin-left:-5px;animation:iqbob 3.3s ease-in-out infinite} .iq-burger .s2{top:25px;width:21px;height:6px;margin-left:-13px;animation:iqbob 3.9s ease-in-out -1.2s infinite} .iq-burger .s3{top:36px;width:30px;height:7px;margin-left:-15px;animation:iqbob 4.6s ease-in-out -2.4s infinite} @keyframes iqbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} .iq-burger:hover .st{box-shadow:0 0 16px 3px rgba(226,58,203,.8),0 4px 6px -3px rgba(90,20,100,.35)} .iq-burger i{position:absolute;inset:10px;border-radius:50%;border:2px solid #E23ACB; box-shadow:0 0 14px 2px rgba(226,58,203,.55),inset 0 0 12px rgba(226,58,203,.45); transform:scale(.2);opacity:0;transition:transform .55s cubic-bezier(.2,.9,.25,1.2) .15s,opacity .3s ease .15s} .iq-burger i::before,.iq-burger i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:2px; background:#D421BB;transform:translate(-50%,-50%) rotate(45deg)} .iq-burger i::after{transform:translate(-50%,-50%) rotate(-45deg)} .iq-menu-open .iq-burger .st{animation:none;transform:translateY(0) scale(.1);opacity:0} .iq-menu-open .iq-burger .s1{transform:translate(4px,12px) scale(.1)} .iq-menu-open .iq-burger .s3{transform:translate(-2px,-10px) scale(.1)} .iq-menu-open .iq-burger i{transform:scale(1);opacity:1} .iq-burger:focus-visible{outline:2px solid #D0008C;outline-offset:3px} .iq-menu{position:fixed;inset:0;z-index:70;visibility:hidden;opacity:0; background:rgba(234,241,248,.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); transition:opacity .35s ease,visibility 0s linear .35s} .iq-menu-open .iq-menu{visibility:visible;opacity:1;transition:opacity .35s ease} .iq-menu-panel{position:absolute;top:104px;right:clamp(12px,3vw,40px);width:min(430px,calc(100vw - 24px)); max-height:calc(100vh - 124px);overflow:auto;border-radius:28px;isolation:isolate; background:linear-gradient(170deg,#EEF3FA 0%,#F7F9FD 50%,#FBF1F9 100%); box-shadow:0 30px 70px -30px rgba(120,40,140,.45),0 0 0 1px rgba(212,33,187,.1); transform-origin:top right;transform:translateY(-10px) scale(.94);transition:transform .45s cubic-bezier(.2,.85,.2,1)} .iq-menu-open .iq-menu-panel{transform:none} .iq-menu-sky{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit} .iq-menu-sky b{position:absolute;right:-40%;top:18%;width:110%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(226,58,203,.26) 0%,rgba(212,33,187,.12) 34%,rgba(155,77,255,.06) 52%,rgba(212,33,187,0) 70%)} .iq-menu-sky i{position:absolute;left:0;width:200%;background-repeat:repeat-x;background-size:50% 100%;animation:iqmist 70s linear infinite} .iq-menu-sky .far{bottom:8%;height:26%;background-image:url(../img/mist-far.png);opacity:.5} .iq-menu-sky .near{bottom:-6%;height:30%;background-image:url(../img/mist-near.png);opacity:.8;animation-duration:44s} .iq-menu-in{position:relative;display:flex;flex-direction:column;gap:22px;padding:26px 28px 30px} .iq-six,.iq-more{list-style:none;margin:0;padding:0} .iq-six{display:grid;gap:12px} .iq-six a{display:inline-block;text-decoration:none;color:var(--iq-ink,#2F5A8C);font-family:var(--head,"Urbanist"),sans-serif; font-weight:500;font-size:clamp(24px,3vw,30px);line-height:1.05;letter-spacing:-.01em;transition:color .3s ease} .iq-six small{display:block;margin-top:4px;font-family:var(--display,"Jost"),sans-serif;font-size:11px;font-weight:500; letter-spacing:.22em;text-transform:uppercase;color:#D0008C} .iq-six a:hover,.iq-six a:focus-visible{color:#D0008C;outline:none} .iq-more{display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:16px;border-top:1px solid rgba(212,33,187,.14)} .iq-more a{text-decoration:none;color:var(--iq-soft,#4D6C94);font-family:var(--display,"Jost"),sans-serif;font-size:12px;font-weight:500; letter-spacing:.2em;text-transform:uppercase} .iq-more a:hover,.iq-more a:focus-visible{color:#D0008C;outline:none} .iq-six li,.iq-more li{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1)} .iq-menu-open .iq-six li,.iq-menu-open .iq-more li{opacity:1;transform:none;transition-delay:calc(.1s + var(--n) * 45ms)} @media (prefers-reduced-motion:reduce){ .iq-burger .st{animation:none}.iq-menu-sky i{animation:none} .iq-six li,.iq-more li{transition:none;transform:none} } /* How Much Creativity Have You Lost: her heading in Urbanist, solid and magenta, truly centred; the blocks and figures bigger; each one rises in on its own. */ .lost-ask{font-family:var(--head,"Urbanist"),sans-serif!important;font-weight:500!important;letter-spacing:-.012em!important; color:#D0008C!important;font-size:clamp(38px,5.6vw,74px)!important;text-transform:none!important} @media (min-width:861px){ .lost-figures{grid-template-columns:repeat(4,19.5%)!important;padding:0 5%!important;top:42%!important;height:44%!important} .lost-say{font-size:clamp(13px,1.3vw,21px)!important} } .lost-one b{font-size:clamp(40px,5.6vw,88px)!important;font-weight:500!important} .lost-say{font-weight:500!important} @media (prefers-reduced-motion:no-preference){ .lost-one{opacity:0;transform:translateY(54px) scale(.92)!important; transition:opacity 1100ms ease-out var(--wait,0ms),transform 1500ms cubic-bezier(.2,.85,.2,1) var(--wait,0ms)!important} .lost.is-counted .lost-one{opacity:1;transform:none!important} .lost-one:nth-child(2){--wait:420ms!important} .lost-one:nth-child(3){--wait:840ms!important} .lost-one:nth-child(4){--wait:1260ms!important} } /* Her portal keeps its magic after the film ends (1 Oct 2026). */ .portal-magic{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.4s ease} .portal-magic.is-on{opacity:1} /* The menu speaks, never yells (hers, 1 Oct 2026): one calm size for the six, and the rest readable. */ .iq-menu-panel{width:min(360px,calc(100vw - 24px))} .iq-menu-in{gap:18px;padding:22px 26px 24px} .iq-six{gap:10px} .iq-six a{font-size:20px!important;font-weight:500;letter-spacing:0} .iq-six small{font-size:10.5px;letter-spacing:.2em;margin-top:3px} .iq-more{gap:8px 16px;padding-top:14px} .iq-more a{font-size:12.5px;letter-spacing:.16em} /* Her two lines under the unicorn (1 Oct 2026). */ .entrance-say .hero-sub{margin:clamp(14px,2vw,24px) 0 0;max-width:30ch;font-family:var(--head,"Urbanist"),sans-serif; font-weight:400;font-size:clamp(18px,1.9vw,27px);line-height:1.3;color:var(--iq-ink,#2F5A8C)} .entrance-say .hero-sub-two{margin:clamp(10px,1.2vw,16px) 0 0;font-family:var(--display,"Jost"),sans-serif; font-weight:500;font-size:clamp(11px,1vw,14px);letter-spacing:.24em;text-transform:uppercase;color:#D0008C} /* ══ HER HOME PAGE, ONE TYPE SYSTEM (1 October 2026) ═════════════════════════ Urbanist for everything that is a heading or a spoken line, at a real weight. Jost for reading, larger and darker. Every small line above a heading in her magenta capitals. :not(#iq) lifts these over the older rules without touching any other page. */ html body.home :is(h2,h2.opener,h2.hers,h2.huge,h2.plain,.lost-ask):not(#iq){ font-family:var(--head,"Urbanist"),sans-serif!important;font-weight:400!important; font-size:clamp(32px,4.1vw,58px)!important;line-height:1.08!important;letter-spacing:-.008em!important; color:var(--iq-ink,#2F5A8C)!important;text-transform:uppercase!important} html body.home :is(h2,h2.opener,h2.hers,h2.huge,h2.plain) em:not(#iq){color:#D0008C!important;font-weight:400!important} html body.home h2.hers:not(#iq),html body.home h2.huge:not(#iq),html body.home .lost-ask:not(#iq){color:#D0008C!important} html body.home .lost-ask:not(#iq){text-transform:none!important;font-size:clamp(36px,5vw,66px)!important} html body.home .wis-moment h2:not(#iq){font-size:clamp(38px,5.2vw,74px)!important;line-height:1.04!important} html body.home .entrance-say .h1-two:not(#iq){font-weight:400!important} html body.home :is(p.beat,.imagine p):not(#iq){font-family:var(--head,"Urbanist"),sans-serif!important;font-weight:400!important; font-size:clamp(24px,2.7vw,38px)!important;line-height:1.2!important;color:var(--iq-ink,#2F5A8C)!important} html body.home p.beat.last:not(#iq),html body.home .imagine p.found:not(#iq){font-size:clamp(28px,3.4vw,48px)!important} html body.home :is(p.eyebrow,p.kick,p.kick.plain,p.beat-kick,.method b,.six-up i,.said cite):not(#iq){ font-family:var(--display,"Jost"),sans-serif!important;font-weight:500!important;font-size:13px!important; letter-spacing:.22em!important;text-transform:uppercase!important;color:#D0008C!important;font-style:normal!important} html body.home p.eyebrow em:not(#iq){color:#D0008C!important} html body.home .six-up b:not(#iq),html body.home .philosophy b:not(#iq){font-family:var(--head,"Urbanist"),sans-serif!important; font-weight:500!important;font-size:clamp(22px,1.9vw,27px)!important;letter-spacing:.05em!important;color:#D0008C!important} html body.home :is(p.lede,p.lede.soft,.method p,.philosophy p,p.beat-says,.said p,.six-up .up-says,.ground > p:not([class])):not(#iq){ font-family:var(--display,"Jost"),sans-serif!important;font-weight:400!important;font-size:18px!important;line-height:1.7!important; color:var(--iq-body,#46668F)!important} @media (max-width:700px){html body.home :is(p.lede,p.lede.soft,.method p,.philosophy p,p.beat-says,.said p,.six-up .up-says):not(#iq){font-size:17px!important}} html body.home .ken-block p:not(#iq){font-family:var(--head,"Urbanist"),sans-serif!important;font-weight:400!important; font-size:clamp(21px,2vw,28px)!important;line-height:1.4!important;color:var(--iq-ink,#2F5A8C)!important} html body.home p.phil-close:not(#iq){font-family:var(--head,"Urbanist"),sans-serif!important;font-weight:400!important;color:#D0008C!important; font-size:clamp(22px,2.2vw,30px)!important} html body.home a.enter.big:not(#iq){font-size:14px!important;font-weight:500!important} html body.home section :is(p.kick,p.eyebrow):not(#iq):not(#iq2){font-family:var(--display,"Jost"),sans-serif!important;font-weight:500!important; font-size:13px!important;letter-spacing:.22em!important;text-transform:uppercase!important;color:#D0008C!important} html body.home section p.phil-close:not(#iq):not(#iq2),html body.home p.phil-close:not(#iq):not(#iq2){font-family:var(--head,"Urbanist"),sans-serif!important; font-weight:400!important;color:#D0008C!important;font-size:clamp(22px,2.2vw,30px)!important;line-height:1.35!important} html body.home h2.lost-ask:not(#iq):not(#iq2){color:#D0008C!important;text-transform:none!important;font-size:clamp(36px,5vw,66px)!important} /* ══ HER HOME PAGE, ONE LINE DOWN THE MIDDLE (1 October 2026) ═══════════════ Every label sits over its heading, every paragraph under it on the same centre, and the big statements breathe without leaving half a screen empty. */ html body.home :is(p.kick,p.eyebrow,p.beat-kick):not(#iq):not(#iq2){display:block!important;width:auto!important;max-width:none!important; margin-left:auto!important;margin-right:auto!important;text-align:center!important} html body.home :is(p.lede,p.lede.soft,p.beat-says):not(#iq):not(#iq2){text-align:center!important;width:auto!important;max-width:40rem!important; margin-left:auto!important;margin-right:auto!important} html body.home .wis-moment:not(#iq){padding-top:clamp(48px,6vw,96px)!important;padding-bottom:clamp(48px,6vw,96px)!important} html body.home .wis-beat:not(#iq){padding-top:18px!important;padding-bottom:18px!important} /* Read More — her words wait, never a wall (1 Oct 2026). */ .iq-more-btn{display:block;margin:14px auto 0;padding:0 0 3px;border:0;border-bottom:1px solid rgba(208,0,140,.45);background:none;cursor:pointer; font-family:var(--display,"Jost"),sans-serif;font-weight:500;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#D0008C} .iq-more-btn:hover,.iq-more-btn:focus-visible{border-bottom-color:#D0008C;outline:none} .philosophy .cols .iq-more-btn{margin-left:0} .iq-rise{animation:iqrise .6s ease both} @keyframes iqrise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* The line under the unicorn sits UNDER it, never beside it (1 Oct 2026). */ html body.home .entrance-say:not(#iq){flex-direction:column!important;align-items:flex-start!important;justify-content:center!important} html body.home .entrance-say > h1:not(#iq){width:auto!important} html body.home .entrance-say .hero-sub:not(#iq){max-width:none!important} /* HER HERO ON A PHONE (1 Oct 2026): the picture takes most of the first screen, framed on her hand and the portal, and her words sit beneath it on the sky. */ @media (max-width:700px){ html body.home .entrance:not(#iq){display:block!important;height:auto!important;max-height:none!important;min-height:0!important} html body.home .entrance-world:not(#iq){position:relative!important;height:64svh!important;min-height:64svh!important} html body.home :is(.entrance-film,.entrance-still):not(#iq){object-position:76% 46%!important} html body.home .entrance-say:not(#iq){position:relative!important;inset:auto!important;transform:none!important;margin:-56px 0 0!important; padding:0 22px 34px!important;width:auto!important;max-width:none!important;align-items:center!important;text-align:center!important} html body.home .entrance-say h1:not(#iq){max-width:none!important;margin:0 auto!important;text-align:center!important} html body.home .entrance-say .h1-one:not(#iq){font-size:15px!important} html body.home .entrance-say .h1-two:not(#iq){font-size:clamp(32px,9.4vw,40px)!important;line-height:1.05!important} html body.home .entrance-say .hero-sub:not(#iq){font-size:17px!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important} } /* HER HERO ON A TABLET, THE SAME AS A PHONE (1 Oct 2026): the picture takes most of the first screen, framed on her hand and the portal, and her words sit beneath it on the sky. */ @media (min-width:701px) and (max-width:900px){ html body.home .entrance:not(#iq){display:block!important;height:auto!important;max-height:none!important;min-height:0!important} html body.home .entrance-world:not(#iq){position:relative!important;height:60svh!important;min-height:60svh!important} html body.home :is(.entrance-film,.entrance-still):not(#iq){object-position:70% 46%!important} html body.home .entrance-say:not(#iq){position:relative!important;inset:auto!important;transform:none!important;margin:-56px 0 0!important; padding:0 22px 34px!important;width:auto!important;max-width:none!important;align-items:center!important;text-align:center!important} html body.home .entrance-say h1:not(#iq){max-width:none!important;margin:0 auto!important;text-align:center!important} html body.home .entrance-say .h1-one:not(#iq){font-size:18px!important} html body.home .entrance-say .h1-two:not(#iq){font-size:clamp(40px,6.4vw,54px)!important;line-height:1.05!important} html body.home .entrance-say .hero-sub:not(#iq){font-size:20px!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important} } /* HER HERO ON A BIG SCREEN: the words get the room they need and grow with it. */ @media (min-width:1300px){ html body.home .entrance-say:not(#iq){width:min(48vw,900px)!important;max-width:none!important} html body.home .entrance-say h1:not(#iq){max-width:none!important} html body.home .entrance-say .h1-one:not(#iq){font-size:clamp(30px,1.9vw,40px)!important} html body.home .entrance-say .h1-two:not(#iq){font-size:clamp(70px,5vw,104px)!important;line-height:1.02!important} html body.home .entrance-say .hero-sub:not(#iq){font-size:clamp(24px,1.5vw,32px)!important} } /* The unicorn line never breaks on a big screen (1 Oct 2026). */ @media (min-width:1900px){html body.home .entrance-say:not(#iq){width:min(52vw,1320px)!important}} /* How Much Creativity Have You Lost: equal breathing room above and below her heading, and the pictures clearly alive — each face slowly pushing in as it arrives. */ html body.home .lost:not(#iq){margin-top:0!important;padding-top:clamp(56px,7vw,110px)!important} html body.home h2.lost-ask:not(#iq):not(#iq2){margin:0 auto clamp(56px,7vw,110px)!important} @media (max-width:860px){html body.home h2.lost-ask:not(#iq):not(#iq2){margin-bottom:28px!important}} .ages-drift{animation:none!important} @media (prefers-reduced-motion:no-preference){ .ages .age{animation-name:iqAgesPush!important;transform-origin:50% 40%} } @keyframes iqAgesPush{0%{opacity:0;transform:scale(1.03)}6%{opacity:1}20%{opacity:1}26%{opacity:0;transform:scale(1.2)}100%{opacity:0;transform:scale(1.2)}} /* Discover Your Unique Brand Of Genius: its own voice, in italic and her magenta, arriving after the unicorn line, with room to breathe (1 Oct 2026). */ html body.home .entrance-say .hero-sub:not(#iq):not(#iq2){font-family:var(--head,"Urbanist"),sans-serif!important;font-style:italic!important; font-weight:400!important;color:#D0008C!important;letter-spacing:.01em!important;margin-top:clamp(30px,3.6vw,60px)!important; font-size:clamp(21px,1.8vw,32px)!important} @media (prefers-reduced-motion:no-preference){ html body.home .entrance-say .hero-sub:not(#iq){opacity:0;animation:iqsubin 1.6s cubic-bezier(.2,.8,.2,1) 2.9s both} } @keyframes iqsubin{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}} /* ══ HER BLUES, TO CHOOSE BETWEEN (1 Oct 2026) — ?blues shows her the chooser ══ */ html[data-blue="2"]{--iq-ink:#1F5FBF;--iq-body:#3A62A6;--iq-soft:#4B72B2} html[data-blue="3"]{--iq-ink:#1479BD;--iq-body:#2E6C9E;--iq-soft:#3F7FB0} html[data-blue="4"]{--iq-ink:#3246B0;--iq-body:#4A58A6;--iq-soft:#5B69B4} html[data-blue="5"]{--iq-ink:#0F6F92;--iq-body:#2A6A84;--iq-soft:#3A7C96} html[data-blue="6"]{--iq-ink:#2463C4;--iq-body:#3A62A0;--iq-soft:#4A71AE} html[data-blue="6"] body.home :is(h2,.h1-one,.h1-two,.imagine p,p.beat,.ken-block p,.six-up b,.philosophy b):not(#iq):not(#iq2):not(#iq3){ background:linear-gradient(100deg,#1F6FD6 0%,#4B63E0 45%,#8A4FDC 100%);-webkit-background-clip:text;background-clip:text; color:transparent!important;-webkit-text-fill-color:transparent} html[data-blue="6"] body.home :is(h2,.h1-one,.h1-two,.imagine p,p.beat) em:not(#iq){-webkit-text-fill-color:#D0008C} .iq-blues{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:95;display:flex;gap:6px;flex-wrap:wrap;justify-content:center; padding:8px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 10px 30px -12px rgba(40,60,120,.45); font-family:var(--display,"Jost"),sans-serif;max-width:calc(100vw - 24px)} .iq-blues button{display:flex;align-items:center;gap:7px;border:0;border-radius:999px;padding:7px 12px 7px 8px;background:transparent;cursor:pointer; font-size:12px;font-weight:500;letter-spacing:.08em;color:#333} .iq-blues button i{width:16px;height:16px;border-radius:50%;display:block} .iq-blues button[aria-pressed="true"]{background:#F1F4FB;box-shadow:inset 0 0 0 1.5px currentColor} /* No jump: the still under her film is exactly her film's first frame and never moves on its own (1 Oct 2026). */ .entrance-world img.entrance-still,.entrance-world .entrance-still{animation:none!important;transform:none!important} /* Two beats now (1 Oct 2026): There Isn't A Name passes, It's Magic arrives and stays. */ @media (prefers-reduced-motion:no-preference){.js-float .beats .beat.last{animation-name:beatStay!important;animation-duration:1.2s!important;animation-delay:3.45s!important}} /* Her two lines drop into the dream (1 Oct 2026). */ .beats.beats-drop{position:relative;padding:0!important;background:var(--cloud,#F7FAFD)!important;overflow:hidden} .beats-drop .bd-film{position:relative;margin-top:clamp(200px,30vh,320px);height:min(86vh,52vw);min-height:340px} .beats-drop .bd-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .beats-drop .bd-veil{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,var(--cloud,#F7FAFD) 0%,rgba(247,250,253,.55) 16%,rgba(247,250,253,0) 34%,rgba(247,250,253,0) 78%,var(--cloud,#F7FAFD) 100%), radial-gradient(ellipse 46% 38% at 50% 50%,rgba(255,255,255,.72) 0%,rgba(255,255,255,.35) 55%,rgba(255,255,255,0) 100%)} .beats-drop .bd-words{position:absolute!important;left:0;right:0;top:clamp(40px,6vh,80px);z-index:2;margin:0 auto!important;will-change:transform} .beats-drop .beats-say{min-height:clamp(150px,16vw,230px)!important} /* The veil sits behind her words, never over the girl; and room before the Imagine lines. */ .beats-drop .bd-veil{background:linear-gradient(180deg,var(--cloud,#F7FAFD) 0%,rgba(247,250,253,.5) 14%,rgba(247,250,253,0) 32%,rgba(247,250,253,0) 80%,var(--cloud,#F7FAFD) 100%), radial-gradient(ellipse 44% 22% at 50% 24%,rgba(255,255,255,.7) 0%,rgba(255,255,255,.3) 60%,rgba(255,255,255,0) 100%)!important} @media (max-width:700px){.beats-drop .bd-veil{background:linear-gradient(180deg,var(--cloud,#F7FAFD) 0%,rgba(247,250,253,0) 30%,rgba(247,250,253,0) 80%,var(--cloud,#F7FAFD) 100%), radial-gradient(ellipse 70% 18% at 50% 17%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 100%)!important}} .beats.beats-drop{margin-bottom:clamp(60px,9vw,130px)!important} @media (max-width:700px){.beats-drop .bd-film{height:62vh!important;margin-top:180px!important}} /* Her words carry their own soft glow over the dream, and the first line waits until they are really in view (1 Oct 2026). */ .beats-drop .bd-veil{background:linear-gradient(180deg,var(--cloud,#F7FAFD) 0%,rgba(247,250,253,.45) 14%,rgba(247,250,253,0) 30%,rgba(247,250,253,0) 80%,var(--cloud,#F7FAFD) 100%)!important} .beats-drop .bd-words{opacity:0} .beats-drop .beats-say{position:relative;isolation:isolate} .beats-drop .beats-say::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(880px,108%);height:190%;transform:translate(-50%,-50%); background:radial-gradient(ellipse at center,rgba(255,255,255,.82) 0%,rgba(255,255,255,.55) 38%,rgba(255,255,255,0) 70%);pointer-events:none} .beats-drop .beat{text-shadow:0 0 18px rgba(255,255,255,.9)} @media (prefers-reduced-motion:no-preference){ .js-float .beats.beats-drop .beat{animation-play-state:paused!important} .js-float .beats.beats-drop.bd-go .beat{animation-play-state:running!important} } /* Her four movements as glowing stepping stones, alive (1 Oct 2026). */ .m-stones{display:flex;justify-content:center;align-items:flex-end;gap:clamp(18px,4vw,64px);margin:clamp(34px,5vw,64px) auto 0;padding:0 16px;max-width:980px} .m-stone{display:flex;flex-direction:column;align-items:center;gap:16px} .m-stone b{display:block;width:calc(clamp(70px,9vw,128px) + var(--i) * clamp(6px,1vw,14px));aspect-ratio:3.4/1;border-radius:50%; background:radial-gradient(ellipse at 50% 30%,#FFFFFF 0%,#F9CFF1 26%,#E23ACB 66%,#B1159A 100%); box-shadow:0 0 18px 2px rgba(226,58,203,.35),0 10px 14px -8px rgba(90,20,100,.35); animation:mstoneBob 4.2s ease-in-out infinite;animation-delay:calc(var(--i) * -1.1s)} .m-stone em{font-style:normal;font-family:var(--display,"Jost"),sans-serif;font-weight:500;font-size:clamp(11px,1.1vw,14px);letter-spacing:.22em; text-transform:uppercase;color:var(--iq-ink,#2F5A8C);transition:color .6s ease} @media (prefers-reduced-motion:no-preference){ .m-stone b{animation:mstoneBob 4.2s ease-in-out infinite,mstoneLit 8s ease-in-out infinite;animation-delay:calc(var(--i) * -1.1s),calc(var(--i) * 2s)} .m-stone em{animation:mstoneWord 8s ease-in-out infinite;animation-delay:calc(var(--i) * 2s)} } @keyframes mstoneBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes mstoneLit{0%,30%,100%{box-shadow:0 0 18px 2px rgba(226,58,203,.35),0 10px 14px -8px rgba(90,20,100,.35);filter:none} 10%,20%{box-shadow:0 0 38px 10px rgba(226,58,203,.75),0 0 80px 20px rgba(212,33,187,.25),0 10px 14px -8px rgba(90,20,100,.35);filter:brightness(1.12)}} @keyframes mstoneWord{0%,30%,100%{color:var(--iq-ink,#2F5A8C)}10%,20%{color:#D0008C}} /* Her ™ as a small clean mark, never a circle (1 Oct 2026). */ sup.tm{font-family:var(--display,"Jost"),sans-serif;font-style:normal;font-weight:400;font-size:.32em;vertical-align:super;letter-spacing:0;margin-left:.08em;line-height:0} html body.home .philosophy .iq-more-btn:not(#iq){margin-left:0!important} /* What Is IMAGENIQ: her three lines stacked, as on her own page (1 Oct 2026). */ html body.home p.kick.plain:not(#iq):not(#iq2){line-height:2.1!important} html body.home .whatis-three{display:inline-block;margin-top:4px;text-transform:none;letter-spacing:.02em;font-family:var(--head,"Urbanist"),sans-serif;font-style:italic;font-weight:400;font-size:clamp(18px,1.5vw,22px);color:var(--iq-ink,#2F5A8C)} /* The two lines follow her scroll, not a clock (1 Oct 2026). */ .js-float .beats.beats-drop .beat,.beats.beats-drop .beat{animation:none!important;transition:none!important} .beats.beats-drop .beat{opacity:0} @media (prefers-reduced-motion:reduce){.beats.beats-drop .beat{opacity:1!important;transform:none!important}} /* HER FONTS, TO CHOOSE BETWEEN — ?fonts shows her the chooser (1 Oct 2026). */ html[data-font="2"]{--head:"Montserrat",system-ui,sans-serif} html[data-font="3"]{--head:"Raleway",system-ui,sans-serif} html[data-font="4"]{--head:"Quicksand",system-ui,sans-serif} html[data-font="5"]{--head:"Josefin Sans",system-ui,sans-serif} html[data-font="6"]{--head:"Lexend",system-ui,sans-serif} .iq-fonts{bottom:74px!important} .iq-fonts button{font-size:13px} /* HER HEADING FONT IS MONTSERRAT. Hers, 1 October 2026, chosen on her own page: *montserrat*. */ :root{--head:"Montserrat",system-ui,-apple-system,sans-serif} /* The unicorn line stays on two lines at laptop sizes in Montserrat (1 Oct 2026). */ @media (min-width:901px) and (max-width:1899px){ html body.home .entrance-say:not(#iq){width:min(58vw,900px)!important} html body.home .entrance-say .h1-two:not(#iq){font-size:clamp(50px,4.9vw,80px)!important} } /* HER WILDCARD, TO CHOOSE BETWEEN — ?wild shows her the chooser. The magenta words that sing, in a hand the rest of the page does not use. */ html[data-wild] body.home :is(h1,h2,p.beat,.imagine p,.hero-sub,.ken-block p,p.found) em:not(#iq){text-transform:none!important;letter-spacing:0!important;font-style:normal!important;font-weight:400!important;line-height:.9} html[data-wild="2"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Sacramento",cursive!important;font-size:1.45em} html[data-wild="3"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Allura",cursive!important;font-size:1.4em} html[data-wild="4"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Parisienne",cursive!important;font-size:1.2em} html[data-wild="5"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Italianno",cursive!important;font-size:1.55em} .iq-wild{bottom:132px!important} /* HER BLUE: Portal Blue, a hair darker. Hers, 1 Oct 2026: *Portal blue, but maybe like one tiny shade, the tinsiest bit darker.* */ html[data-blue]{--iq-ink:#106FAE;--iq-body:#2A6594;--iq-soft:#3A76A6} /* HER WILDCARD, NEVER A SCRIPT. Hers: *Like Italiano… I can't be a script.* Tall, slender, elegant. */ html[data-wild="2"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Italiana",serif!important;font-size:1.08em;letter-spacing:.02em!important} html[data-wild="3"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Poiret One",sans-serif!important;font-size:1.08em;letter-spacing:.02em!important} html[data-wild="4"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Tenor Sans",sans-serif!important;font-size:1em;letter-spacing:.02em!important} html[data-wild="5"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Bodoni Moda",serif!important;font-style:italic!important;font-size:1.02em} html[data-wild] body.home :is(h1,h2) em:not(#iq){text-transform:uppercase!important} /* HER WILDCARD, ROUND TWO (1 Oct 2026). Never a script; tall, slender, elegant. Hers: *POIRET one is great, but… in capitals or heavier… I do love Italiana because it's tall and slender and it's Italian.* */ html[data-wild] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-style:normal!important;-webkit-text-stroke:0} html[data-wild="2"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Italiana",serif!important;font-size:1.08em;letter-spacing:.03em!important} html[data-wild="3"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Poiret One",sans-serif!important;text-transform:uppercase!important;-webkit-text-stroke:.9px currentColor;font-size:1.02em;letter-spacing:.04em!important} html[data-wild="4"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Cinzel",serif!important;font-weight:500!important;font-size:.98em;letter-spacing:.02em!important} html[data-wild="5"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Marcellus SC",serif!important;font-size:1em;letter-spacing:.03em!important} html[data-wild="6"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Forum",serif!important;font-size:1.1em;letter-spacing:.03em!important} html[data-wild="7"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Federo",sans-serif!important;font-size:1em;letter-spacing:.02em!important} html[data-wild="8"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Bellefair",serif!important;font-size:1.08em;letter-spacing:.02em!important} html[data-wild="9"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Antonio",sans-serif!important;font-weight:300!important;font-size:1.12em;letter-spacing:.03em!important} html[data-wild="10"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Oswald",sans-serif!important;font-weight:300!important;font-size:1.06em;letter-spacing:.03em!important} html[data-wild="11"] body.home :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Poiret One",sans-serif!important;text-transform:uppercase!important;-webkit-text-stroke:1.5px currentColor;font-size:1.02em;letter-spacing:.05em!important} .iq-wild{max-width:min(1100px,calc(100vw - 24px))!important} /* HER WILDCARD IS POIRET ONE, IN CAPITALS. Hers, 1 October 2026, chosen on her own page: *poiret one caps*. Her magenta words that sing, in every heading on the site and in the spoken lines on her home page. */ html body :is(h1,h2) em:not(#iq):not(#iq2), html body.home :is(p.beat,.imagine p,.ken-block p,p.found) em:not(#iq):not(#iq2){ font-family:"Poiret One",sans-serif!important;text-transform:uppercase!important;font-style:normal!important;font-weight:400!important; -webkit-text-stroke:.9px currentColor;font-size:1.02em;letter-spacing:.04em!important} /* ══ HER HOME PAGE, REBUILT (1 October 2026) — the .v2 story ═════════════════ */ .v2{--v2-gap:clamp(90px,11vw,170px);--mag:#D0008C;--glow:226,58,203} .v2 > section{position:relative;margin:var(--v2-gap) auto 0;padding:0 clamp(18px,4vw,48px);max-width:1240px} .v2 .v2-head{text-align:center;max-width:860px;margin:0 auto clamp(30px,4vw,56px)} .v2 figure{margin:0} .v2 img{display:block;width:100%;height:100%;object-fit:cover} /* Arches: her portals as picture frames, rising softly out of the mist */ .v2-arch{position:relative;border-radius:999px 999px 26px 26px;overflow:hidden;aspect-ratio:4/5; box-shadow:0 30px 70px -36px rgba(var(--glow),.55),0 0 0 1px rgba(var(--glow),.12)} .v2-arch::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(180deg,rgba(247,250,253,0),rgba(247,250,253,.85))} .v2-arch.small{aspect-ratio:3/3.4;max-width:300px;margin:0 auto 22px} .v2-wide{border-radius:28px;overflow:hidden;aspect-ratio:21/9;box-shadow:0 40px 90px -50px rgba(var(--glow),.6);margin-bottom:clamp(30px,4vw,56px)!important} .v2-wide.soft{aspect-ratio:21/8;margin:clamp(30px,4vw,60px) 0!important} @media (prefers-reduced-motion:no-preference){ .v2 .float .v2-arch img,.v2 .float.v2-feel img,.v2 .v2-wide img{transform:scale(1.08);transition:transform 2.6s cubic-bezier(.2,.8,.2,1)} .v2 .float.is-in .v2-arch img,.v2 .float.is-in.v2-feel img,.v2 .is-in .v2-wide img{transform:scale(1)} } /* What it is */ .v2-what{display:grid;gap:clamp(30px,5vw,80px);align-items:center;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} .v2-what .v2-arch{max-width:440px;justify-self:center;width:100%} html body.home .v2-what-say :is(h2,p):not(#iq):not(#iq2){text-align:left!important;margin-left:0!important} @media (max-width:820px){.v2-what{grid-template-columns:1fr}.v2-what .v2-arch{max-width:300px} html body.home .v2-what-say :is(h2,p):not(#iq):not(#iq2){text-align:center!important;margin-left:auto!important}} /* What happens: her stepping stones climbing to the portal */ .v2-stones{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.6vw,26px);align-items:end;padding:40px 0 10px} .v2-mist{position:absolute;left:-10%;right:-10%;bottom:-6%;height:62%;background:url(../img/mist-near.png) repeat-x 0 100%/50% 100%;opacity:.7;pointer-events:none;animation:iqmist 60s linear infinite} .v2-step{position:relative;text-align:center;transform:translateY(calc(var(--i) * -26px))} .v2-step h3{margin:18px 0 8px;font-family:var(--head),sans-serif;font-weight:500;font-size:clamp(14px,1.25vw,18px);letter-spacing:.14em;text-transform:uppercase;color:var(--iq-ink,#106FAE)} .v2-step p{margin:0 auto;max-width:21ch;font-size:15px;line-height:1.55;color:var(--iq-body,#2A6594)} .v2-pebble{position:relative;display:block;margin:0 auto;width:calc(78% + var(--i) * 3%);aspect-ratio:3.1/1} .v2-pebble::before{content:"";position:absolute;left:3%;right:3%;top:26%;bottom:-18%;border-radius:50%; background:radial-gradient(ellipse at 50% 70%,#9E1488 0%,#C2209F 60%,#E07FD0 100%);filter:saturate(1.1)} .v2-pebble b{position:absolute;inset:0;border-radius:50%; background:radial-gradient(ellipse 60% 70% at 44% 30%,#FFFFFF 0%,#FDE6F8 18%,#F59BE2 46%,#E23ACB 74%,#C4179F 100%); box-shadow:inset 0 -4px 10px rgba(150,10,120,.35),inset 0 3px 6px rgba(255,255,255,.7),0 0 26px 4px rgba(var(--glow),.35)} .v2-pebble b::after{content:"";position:absolute;left:22%;top:16%;width:30%;height:22%;border-radius:50%;background:rgba(255,255,255,.75);filter:blur(3px)} .v2-pebble i{position:absolute;left:8%;right:8%;top:118%;height:60%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(var(--glow),.35),rgba(var(--glow),0) 70%);filter:blur(6px)} .v2-step.portal .v2-pebble{width:72%;aspect-ratio:1} .v2-step.portal .v2-pebble::before{display:none} .v2-step.portal .v2-pebble b{background:radial-gradient(circle,#fff 0%,#FBD3F3 22%,rgba(242,120,222,.55) 48%,rgba(212,33,187,.12) 64%,rgba(212,33,187,0) 70%); box-shadow:0 0 0 3px #E23ACB,0 0 30px 8px rgba(var(--glow),.6),inset 0 0 26px rgba(var(--glow),.6)} .v2-step.portal .v2-pebble b::after{display:none} .v2-step.arrive .v2-pebble{width:64%;aspect-ratio:1.45/1} .v2-step.arrive .v2-pebble::before{display:none} .v2-step.arrive .v2-pebble b{border-radius:10px;background:linear-gradient(160deg,#FFFFFF 0%,#FBEFFA 55%,#F3D6EE 100%); box-shadow:0 14px 30px -14px rgba(var(--glow),.7),inset 0 0 0 1px rgba(var(--glow),.25)} .v2-step.arrive .v2-pebble b::after{left:0;right:0;top:0;width:auto;height:58%;border-radius:10px 10px 0 0;background:linear-gradient(160deg,rgba(var(--glow),.18),rgba(var(--glow),.06)); clip-path:polygon(0 0,100% 0,50% 100%);filter:none} @media (prefers-reduced-motion:no-preference){ .v2-pebble{animation:v2bob 5s ease-in-out infinite;animation-delay:calc(var(--i) * -.8s)} .v2-pebble b{animation:v2lit 9s ease-in-out infinite;animation-delay:calc(var(--i) * 1.5s)} .v2-step h3{animation:v2word 9s ease-in-out infinite;animation-delay:calc(var(--i) * 1.5s)} } @keyframes v2bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes v2lit{0%,22%,100%{filter:none}8%,14%{filter:brightness(1.18) drop-shadow(0 0 18px rgba(226,58,203,.9))}} @keyframes v2word{0%,22%,100%{color:var(--iq-ink,#106FAE)}8%,14%{color:#D0008C}} @media (max-width:860px){ .v2-stones{grid-template-columns:1fr;gap:34px;max-width:420px;margin:0 auto} .v2-step{transform:none} .v2-pebble{width:min(240px,70%)} .v2-step.portal .v2-pebble{width:150px}.v2-step.arrive .v2-pebble{width:150px} .v2-mist{display:none} } /* What you will feel */ .v2-feel .v2-wide{aspect-ratio:21/8} /* What grows: her benefits as orbs of light */ .v2-orbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,4vw,60px) clamp(20px,3vw,48px);max-width:1080px;margin:0 auto} .v2-orb{text-align:center} .v2-orb h3{margin:16px 0 6px;font-family:var(--head),sans-serif;font-weight:500;font-size:clamp(17px,1.5vw,22px);color:var(--iq-ink,#106FAE);letter-spacing:.01em} .v2-orb p{margin:0 auto;max-width:26ch;font-size:16px;line-height:1.55;color:var(--iq-body,#2A6594)} .v2-sphere{display:block;margin:0 auto;width:86px;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 36% 30%,#FFFFFF 0%,#FCE2F6 16%,#F27CDB 44%,#D421BB 72%,#9C1290 100%); box-shadow:0 0 30px 6px rgba(var(--glow),.35),inset -6px -8px 16px rgba(110,8,100,.35)} .v2-sphere.small{width:58px} @media (prefers-reduced-motion:no-preference){.v2-sphere{animation:v2float 6s ease-in-out infinite;animation-delay:calc(var(--i) * -1s)}} @keyframes v2float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @media (max-width:760px){.v2-orbs{grid-template-columns:1fr 1fr}.v2-sphere{width:66px}} /* Every age */ .v2-ages{display:grid;gap:clamp(40px,6vw,90px)} .v2-person{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:center;max-width:1040px;margin:0 auto;width:100%} .v2-person.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)} .v2-person.flip .v2-arch{order:2} .v2-person .v2-arch{max-width:360px;width:100%;justify-self:center} html body.home .v2-imagine:not(#iq):not(#iq2){margin:0;text-align:left!important;font-family:var(--head),sans-serif!important;font-weight:400!important; font-size:clamp(26px,3vw,42px)!important;line-height:1.2!important;color:var(--iq-ink,#106FAE)!important} html body.home .v2-imagine em:not(#iq){color:#D0008C!important} @media (max-width:760px){.v2-person,.v2-person.flip{grid-template-columns:1fr}.v2-person.flip .v2-arch{order:0}.v2-person .v2-arch{max-width:260px} html body.home .v2-imagine:not(#iq):not(#iq2){text-align:center!important}} .v2-together{text-align:center} .v2-row{display:flex;justify-content:center;gap:clamp(8px,1.4vw,18px);margin:0 auto clamp(24px,3vw,40px);flex-wrap:wrap} .v2-row span{width:clamp(84px,11vw,150px);aspect-ratio:3/4;border-radius:999px 999px 18px 18px;overflow:hidden;box-shadow:0 20px 40px -24px rgba(var(--glow),.6)} @media (prefers-reduced-motion:no-preference){ .v2-row span{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 140ms)} .v2-together.is-in .v2-row span{opacity:1;transform:none} } html body.home .v2-found:not(#iq):not(#iq2){font-family:var(--head),sans-serif!important;font-weight:400!important;font-size:clamp(30px,3.8vw,54px)!important;color:var(--iq-ink,#106FAE)!important;margin:0} /* The six */ .v2-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)} @media (max-width:900px){.v2-cards{grid-template-columns:1fr 1fr}} @media (max-width:560px){.v2-cards{grid-template-columns:1fr}} .v2-card{display:flex;flex-direction:column;text-decoration:none;border-radius:26px;overflow:hidden;background:#fff; box-shadow:0 26px 60px -38px rgba(var(--glow),.55),0 0 0 1px rgba(var(--glow),.08);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease} .v2-card:hover,.v2-card:focus-visible{transform:translateY(-6px);box-shadow:0 36px 70px -34px rgba(var(--glow),.7),0 0 0 1px rgba(var(--glow),.2);outline:none} .v2-card-pic{display:block;aspect-ratio:3/2;overflow:hidden} .v2-card-pic img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)} .v2-card:hover .v2-card-pic img{transform:scale(1.05)} .v2-card b{margin:20px 24px 4px;font-family:var(--head),sans-serif;font-weight:500;font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:#D0008C} .v2-card i{margin:0 24px;font-style:normal;font-family:var(--display),sans-serif;font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--iq-ink,#106FAE)} .v2-card-says{margin:12px 24px 0;font-size:16px;line-height:1.6;color:var(--iq-body,#2A6594);flex:1} .v2-card-go{margin:18px 24px 24px;font-family:var(--display),sans-serif;font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#D0008C} .v2-card-go::after{content:" →"} /* The soul, the 3i's */ .v2-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,60px);text-align:center} @media (max-width:820px){.v2-three{grid-template-columns:1fr;max-width:460px;margin:0 auto}} .v2-three b{display:block;margin:0 0 10px;font-family:var(--head),sans-serif;font-weight:500;font-size:clamp(20px,1.8vw,26px);letter-spacing:.08em;text-transform:uppercase;color:#D0008C} html body.home .v2-three p:not(#iq):not(#iq2){text-align:center!important;font-size:17px!important} .v2-i .v2-sphere{margin-bottom:18px} html body.home .v2-fourp:not(#iq){text-align:center;margin:clamp(40px,5vw,70px) auto 0;font-family:var(--head),sans-serif;font-size:clamp(20px,2vw,28px);color:#D0008C} .v2-fourp span{display:block;margin-bottom:10px;font-family:var(--display),sans-serif;font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--iq-ink,#106FAE)} /* Who already found it */ .v2-quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);max-width:1000px;margin:0 auto} @media (max-width:760px){.v2-quotes{grid-template-columns:1fr}} .v2-quotes figure{position:relative;padding:44px 34px 30px;border-radius:26px;background:linear-gradient(170deg,#FFFFFF,#FBF2FA);box-shadow:0 26px 60px -40px rgba(var(--glow),.55)} .v2-quotes figure::before{content:"\201C";position:absolute;left:26px;top:-6px;font-family:var(--head),serif;font-size:90px;line-height:1;color:rgba(var(--glow),.35)} .v2-quotes blockquote{margin:0} html body.home .v2-quotes p:not(#iq):not(#iq2){font-size:18px!important;line-height:1.65!important;color:var(--iq-body,#2A6594)!important;text-align:left!important;margin:0!important} .v2-quotes figcaption{margin-top:16px;font-family:var(--display),sans-serif;font-weight:500;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#D0008C} /* The whole world */ html body.home .v2-big:not(#iq):not(#iq2){text-align:center;margin:clamp(50px,7vw,110px) auto;max-width:18ch;font-family:var(--head),sans-serif;font-weight:400; font-size:clamp(36px,5vw,74px);line-height:1.05;text-transform:uppercase;color:var(--iq-ink,#106FAE)} .v2-big em{color:#D0008C} .v2-shine{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,70px);align-items:center;max-width:1040px;margin:0 auto} .v2-shine .v2-arch{max-width:340px;width:100%;justify-self:center} html body.home .v2-shine :is(h2,p):not(#iq):not(#iq2){text-align:left!important;margin-left:0!important} @media (max-width:760px){.v2-shine{grid-template-columns:1fr}.v2-shine .v2-arch{max-width:260px} html body.home .v2-shine :is(h2,p):not(#iq):not(#iq2){text-align:center!important;margin-left:auto!important}} /* Your portal */ .v2-portal{text-align:center;padding-bottom:clamp(60px,8vw,120px)!important} .v2-ring{display:block;margin:0 auto 26px;width:clamp(120px,14vw,180px);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,#fff 0%,#FBD3F3 24%,rgba(242,120,222,.5) 50%,rgba(212,33,187,.1) 66%,rgba(212,33,187,0) 71%); box-shadow:0 0 0 3px #E23ACB,0 0 40px 10px rgba(226,58,203,.5),inset 0 0 30px rgba(226,58,203,.55)} @media (prefers-reduced-motion:no-preference){.v2-ring{animation:v2breathe 5s ease-in-out infinite}} @keyframes v2breathe{0%,100%{transform:scale(1);filter:none}50%{transform:scale(1.05);filter:brightness(1.1)}} .v2 .lost{max-width:none!important;padding-left:0!important;padding-right:0!important} /* v2 polish (1 Oct 2026): her steps' own names, no grey band, big lines in her heading voice. */ .v2-step.v2-portalstep .v2-pebble{width:72%;aspect-ratio:1} .v2-step.v2-portalstep .v2-pebble::before,.v2-step.v2-portalstep .v2-pebble b::after{display:none} .v2-step.v2-portalstep .v2-pebble b{background:radial-gradient(circle,#fff 0%,#FBD3F3 22%,rgba(242,120,222,.55) 48%,rgba(212,33,187,.12) 64%,rgba(212,33,187,0) 70%); box-shadow:0 0 0 3px #E23ACB,0 0 30px 8px rgba(226,58,203,.6),inset 0 0 26px rgba(226,58,203,.6)} .v2-step.v2-arrive .v2-pebble{width:64%;aspect-ratio:1.45/1} .v2-step.v2-arrive .v2-pebble::before{display:none} .v2-step.v2-arrive .v2-pebble b{border-radius:10px;background:linear-gradient(160deg,#FFFFFF 0%,#FBEFFA 55%,#F3D6EE 100%); box-shadow:0 14px 30px -14px rgba(226,58,203,.7),inset 0 0 0 1px rgba(226,58,203,.25)} .v2-step.v2-arrive .v2-pebble b::after{left:0;right:0;top:0;width:auto;height:58%;border-radius:10px 10px 0 0;background:linear-gradient(160deg,rgba(226,58,203,.2),rgba(226,58,203,.06)); clip-path:polygon(0 0,100% 0,50% 100%);filter:none} @media (max-width:860px){.v2-step.v2-portalstep .v2-pebble,.v2-step.v2-arrive .v2-pebble{width:150px}} .v2-mist{display:none!important} html body.home h2.v2-big:not(#iq):not(#iq2){text-align:center!important;margin:clamp(50px,7vw,110px) auto!important;max-width:18ch!important; font-size:clamp(36px,5vw,74px)!important;line-height:1.05!important} .v2-three .iq-more-btn,html body.home .v2-three .iq-more-btn:not(#iq){margin:14px auto 0!important} .v2-portal-pic{max-width:240px;margin:0 auto 30px!important;aspect-ratio:4/5} /* ══ 1 Oct 2026, at her word: the girl's film plays on its own, her two lines sit calmly above it, and the Imagine lines drop down out of the dream. ══ */ .imagine{position:relative;z-index:3;margin-top:calc(-1 * clamp(80px,12vh,150px))!important; background:linear-gradient(180deg,rgba(247,250,253,0) 0%,var(--cloud,#F7FAFD) 34%)!important} @media (prefers-reduced-motion:no-preference){ @keyframes floatLine{ 0% {opacity:0;transform:translateY(-80px) scale(.97);filter:blur(10px)} 4.4% {opacity:1;transform:translateY(0) scale(1);filter:blur(0)} 19% {opacity:1;transform:translateY(0) scale(1);filter:blur(0)} 24.5% {opacity:0;transform:translateY(64px) scale(1.02);filter:blur(9px)} 100% {opacity:0;transform:translateY(-80px) scale(.97);filter:blur(10px)}} @keyframes imagineStay{ from{opacity:0;transform:translateY(-80px) scale(.97);filter:blur(10px)} 62% {opacity:1;filter:blur(0)} to {opacity:1;transform:none;filter:blur(0)}} } /* Her lines drop INTO the film again, and the Imagine lines drop OUT of it (1 Oct 2026, hers: *keep it… I like the words dropping in and then the other words dropping out of the film*). */ .beats.beats-drop{margin-bottom:0!important} /* Her girl film holds after it plays, breathing very slowly (1 Oct 2026). */ @media (prefers-reduced-motion:no-preference){.beats-drop .bd-video.held{animation:bdheld 30s ease-in-out infinite alternate;transform-origin:50% 45%}} @keyframes bdheld{from{transform:scale(1)}to{transform:scale(1.06)}} /* ══ HER HOME PAGE IN 2046 (1 October 2026) ══════════════════════════════════ Luminous, glassy, calm. Built on what she has: her pictures, her words, her order. Nothing framed in shapes; light instead of lines. */ /* The six: glass cards that lift toward you. */ html body.home .six-up:not(#iq){gap:clamp(20px,2.4vw,34px)!important} html body.home .six-up .up:not(#iq){border-radius:26px;overflow:hidden;background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:0 30px 70px -42px rgba(212,33,187,.5),0 0 0 1px rgba(212,33,187,.08),inset 0 0 0 1px rgba(255,255,255,.85); transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .7s ease} html body.home .six-up .up:not(#iq):hover,html body.home .six-up .up:not(#iq):focus-visible{transform:translateY(-8px); box-shadow:0 40px 80px -36px rgba(212,33,187,.6),0 0 0 1px rgba(212,33,187,.18),inset 0 0 0 1px #fff;outline:none} html body.home .six-up .up-frame:not(#iq){border-radius:0!important} html body.home .six-up .up-words:not(#iq){padding:22px 26px 28px!important} /* What Our Clients Say: glass, with a soft mark of light. */ html body.home .said:not(#iq){gap:clamp(18px,2.4vw,30px)!important;max-width:1000px!important} html body.home .said > *:not(#iq){position:relative;padding:40px 32px 28px;border-radius:26px;background:linear-gradient(170deg,rgba(255,255,255,.92),rgba(251,242,250,.8)); box-shadow:0 26px 60px -40px rgba(212,33,187,.5),inset 0 0 0 1px rgba(255,255,255,.9)} html body.home .said > *:not(#iq)::before{content:"\201C";position:absolute;left:24px;top:-4px;font-family:var(--head),serif;font-size:84px;line-height:1;color:rgba(226,58,203,.3)} /* Her buttons glow, and light passes across them. */ html body.home a.enter:not(#iq){position:relative;overflow:hidden;border-radius:999px!important; background:linear-gradient(120deg,#D421BB 0%,#E23ACB 45%,#B04FE6 100%)!important;color:#fff!important; box-shadow:0 16px 36px -14px rgba(212,33,187,.65)!important;transition:transform .4s ease,box-shadow .4s ease} html body.home a.enter:not(#iq)::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .9s ease} html body.home a.enter:not(#iq):hover{transform:translateY(-2px);box-shadow:0 22px 44px -14px rgba(212,33,187,.75)!important} html body.home a.enter:not(#iq):hover::after{left:120%} /* Her full-width pictures melt into the sky at their edges. */ html body.home :is(.plate,.plate.across) img:not(#iq){-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)} /* Her statistics blocks: the same lilac, softened at the corners and lit. */ html body.home .lost-one:not(#iq){border-radius:18px;box-shadow:0 20px 44px -26px rgba(178,45,136,.55),inset 0 0 0 1px rgba(255,255,255,.7)} /* Read More, and every small link, with a quiet glow on hover. */ .iq-more-btn{transition:color .3s ease,border-color .3s ease,text-shadow .3s ease} .iq-more-btn:hover{text-shadow:0 0 12px rgba(226,58,203,.45)} /* Every section breathes the same amount. */ html body.home main > section.float:not(#iq),html body.home .ken-block:not(#iq){scroll-margin-top:90px} /* The six: her words sit inside the glass, never against its edge. */ html body.home .six-up .up > :not(.up-frame):not(#iq){padding-left:26px!important;padding-right:26px!important;box-sizing:border-box;max-width:100%!important;margin-left:0!important;margin-right:0!important} html body.home .six-up .up-says:not(#iq){display:block;padding-bottom:28px!important;text-align:left!important} /* ══ EVERY OTHER PAGE, BROUGHT UP TO HER HOME PAGE (1 October 2026). Hers: *Can you go do every other page on the website like ours now.* ══ */ html body:not(.home) :is(h2,h2.opener,h2.hers,h2.huge,h2.plain,.lost-ask):not(#iq){ font-family:var(--head,"Urbanist"),sans-serif!important;font-weight:400!important; font-size:clamp(32px,4.1vw,58px)!important;line-height:1.08!important;letter-spacing:-.008em!important; color:var(--iq-ink,#2F5A8C)!important;text-transform:uppercase!important} html body:not(.home) :is(h2,h2.opener,h2.hers,h2.huge,h2.plain) em:not(#iq){color:#D0008C!important;font-weight:400!important} html body:not(.home) h2.hers:not(#iq),html body:not(.home) h2.huge:not(#iq),html body:not(.home) .lost-ask:not(#iq){color:#D0008C!important} html body:not(.home) .lost-ask:not(#iq){text-transform:none!important;font-size:clamp(36px,5vw,66px)!important} html body:not(.home) .wis-moment h2:not(#iq){font-size:clamp(38px,5.2vw,74px)!important;line-height:1.04!important} html body:not(.home) .entrance-say .h1-two:not(#iq){font-weight:400!important} html body:not(.home) :is(p.beat,.imagine p):not(#iq){font-family:var(--head,"Urbanist"),sans-serif!important;font-weight:400!important; font-size:clamp(24px,2.7vw,38px)!important;line-height:1.2!important;color:var(--iq-ink,#2F5A8C)!important} html body:not(.home) p.beat.last:not(#iq),html body:not(.home) .imagine p.found:not(#iq){font-size:clamp(28px,3.4vw,48px)!important} html body:not(.home) :is(p.eyebrow,p.kick,p.kick.plain,p.beat-kick,.method b,.six-up i,.said cite):not(#iq){ font-family:var(--display,"Jost"),sans-serif!important;font-weight:500!important;font-size:13px!important; letter-spacing:.22em!important;text-transform:uppercase!important;color:#D0008C!important;font-style:normal!important} html body:not(.home) p.eyebrow em:not(#iq){color:#D0008C!important} html body:not(.home) .six-up b:not(#iq),html body:not(.home) .philosophy b:not(#iq){font-family:var(--head,"Urbanist"),sans-serif!important; font-weight:500!important;font-size:clamp(22px,1.9vw,27px)!important;letter-spacing:.05em!important;color:#D0008C!important} html body:not(.home) :is(p.lede,p.lede.soft,.method p,.philosophy p,p.beat-says,.said p,.six-up .up-says,.ground > p:not([class])):not(#iq){ font-family:var(--display,"Jost"),sans-serif!important;font-weight:400!important;font-size:18px!important;line-height:1.7!important; color:var(--iq-body,#46668F)!important} @media (max-width:700px){html body:not(.home) :is(p.lede,p.lede.soft,.method p,.philosophy p,p.beat-says,.said p,.six-up .up-says):not(#iq){font-size:17px!important}} html body:not(.home) .ken-block p:not(#iq){font-family:var(--head,"Urbanist"),sans-serif!important;font-weight:400!important; font-size:clamp(21px,2vw,28px)!important;line-height:1.4!important;color:var(--iq-ink,#2F5A8C)!important} html body:not(.home) p.phil-close:not(#iq){font-family:var(--head,"Urbanist"),sans-serif!important;font-weight:400!important;color:#D0008C!important; font-size:clamp(22px,2.2vw,30px)!important} html body:not(.home) a.enter.big:not(#iq){font-size:14px!important;font-weight:500!important} html body:not(.home) section :is(p.kick,p.eyebrow):not(#iq):not(#iq2){font-family:var(--display,"Jost"),sans-serif!important;font-weight:500!important; font-size:13px!important;letter-spacing:.22em!important;text-transform:uppercase!important;color:#D0008C!important} html body:not(.home) section p.phil-close:not(#iq):not(#iq2),html body:not(.home) p.phil-close:not(#iq):not(#iq2){font-family:var(--head,"Urbanist"),sans-serif!important; font-weight:400!important;color:#D0008C!important;font-size:clamp(22px,2.2vw,30px)!important;line-height:1.35!important} html body:not(.home) h2.lost-ask:not(#iq):not(#iq2){color:#D0008C!important;text-transform:none!important;font-size:clamp(36px,5vw,66px)!important} /* ══ HER HOME PAGE, ONE LINE DOWN THE MIDDLE (1 October 2026) ═══════════════ Every label sits over its heading, every paragraph under it on the same centre, and the big statements breathe without leaving half a screen empty. */ html body:not(.home) :is(p.kick,p.eyebrow,p.beat-kick):not(#iq):not(#iq2){display:block!important;width:auto!important;max-width:none!important; margin-left:auto!important;margin-right:auto!important;text-align:center!important} html body:not(.home) :is(p.lede,p.lede.soft,p.beat-says):not(#iq):not(#iq2){text-align:center!important;width:auto!important;max-width:40rem!important; margin-left:auto!important;margin-right:auto!important} html body:not(.home) .wis-moment:not(#iq){padding-top:clamp(48px,6vw,96px)!important;padding-bottom:clamp(48px,6vw,96px)!important} html body:not(.home) .wis-beat:not(#iq){padding-top:18px!important;padding-bottom:18px!important} /* The line under the unicorn sits UNDER it, never beside it (1 Oct 2026). */ html body:not(.home) .entrance-say:not(#iq){flex-direction:column!important;align-items:flex-start!important;justify-content:center!important} html body:not(.home) .entrance-say > h1:not(#iq){width:auto!important} html body:not(.home) .entrance-say .hero-sub:not(#iq){max-width:none!important} /* HER HERO ON A PHONE (1 Oct 2026): the picture takes most of the first screen, framed on her hand and the portal, and her words sit beneath it on the sky. */ @media (max-width:700px){ html body:not(.home) .entrance:not(#iq){display:block!important;height:auto!important;max-height:none!important;min-height:0!important} html body:not(.home) .entrance-world:not(#iq){position:relative!important;height:64svh!important;min-height:64svh!important} html body:not(.home) :is(.entrance-film,.entrance-still):not(#iq){object-position:76% 46%!important} html body:not(.home) .entrance-say:not(#iq){position:relative!important;inset:auto!important;transform:none!important;margin:-56px 0 0!important; padding:0 22px 34px!important;width:auto!important;max-width:none!important;align-items:center!important;text-align:center!important} html body:not(.home) .entrance-say h1:not(#iq){max-width:none!important;margin:0 auto!important;text-align:center!important} html body:not(.home) .entrance-say .h1-one:not(#iq){font-size:15px!important} html body:not(.home) .entrance-say .h1-two:not(#iq){font-size:clamp(32px,9.4vw,40px)!important;line-height:1.05!important} html body:not(.home) .entrance-say .hero-sub:not(#iq){font-size:17px!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important} } /* HER HERO ON A TABLET, THE SAME AS A PHONE (1 Oct 2026): the picture takes most of the first screen, framed on her hand and the portal, and her words sit beneath it on the sky. */ @media (min-width:701px) and (max-width:900px){ html body:not(.home) .entrance:not(#iq){display:block!important;height:auto!important;max-height:none!important;min-height:0!important} html body:not(.home) .entrance-world:not(#iq){position:relative!important;height:60svh!important;min-height:60svh!important} html body:not(.home) :is(.entrance-film,.entrance-still):not(#iq){object-position:70% 46%!important} html body:not(.home) .entrance-say:not(#iq){position:relative!important;inset:auto!important;transform:none!important;margin:-56px 0 0!important; padding:0 22px 34px!important;width:auto!important;max-width:none!important;align-items:center!important;text-align:center!important} html body:not(.home) .entrance-say h1:not(#iq){max-width:none!important;margin:0 auto!important;text-align:center!important} html body:not(.home) .entrance-say .h1-one:not(#iq){font-size:18px!important} html body:not(.home) .entrance-say .h1-two:not(#iq){font-size:clamp(40px,6.4vw,54px)!important;line-height:1.05!important} html body:not(.home) .entrance-say .hero-sub:not(#iq){font-size:20px!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important} } /* HER HERO ON A BIG SCREEN: the words get the room they need and grow with it. */ @media (min-width:1300px){ html body:not(.home) .entrance-say:not(#iq){width:min(48vw,900px)!important;max-width:none!important} html body:not(.home) .entrance-say h1:not(#iq){max-width:none!important} html body:not(.home) .entrance-say .h1-one:not(#iq){font-size:clamp(30px,1.9vw,40px)!important} html body:not(.home) .entrance-say .h1-two:not(#iq){font-size:clamp(70px,5vw,104px)!important;line-height:1.02!important} html body:not(.home) .entrance-say .hero-sub:not(#iq){font-size:clamp(24px,1.5vw,32px)!important} } /* The unicorn line never breaks on a big screen (1 Oct 2026). */ @media (min-width:1900px){html body:not(.home) .entrance-say:not(#iq){width:min(52vw,1320px)!important}} /* How Much Creativity Have You Lost: equal breathing room above and below her heading, and the pictures clearly alive — each face slowly pushing in as it arrives. */ html body:not(.home) .lost:not(#iq){margin-top:0!important;padding-top:clamp(56px,7vw,110px)!important} html body:not(.home) h2.lost-ask:not(#iq):not(#iq2){margin:0 auto clamp(56px,7vw,110px)!important} @media (max-width:860px){html body:not(.home) h2.lost-ask:not(#iq):not(#iq2){margin-bottom:28px!important}} /* Discover Your Unique Brand Of Genius: its own voice, in italic and her magenta, arriving after the unicorn line, with room to breathe (1 Oct 2026). */ html body:not(.home) .entrance-say .hero-sub:not(#iq):not(#iq2){font-family:var(--head,"Urbanist"),sans-serif!important;font-style:italic!important; font-weight:400!important;color:#D0008C!important;letter-spacing:.01em!important;margin-top:clamp(30px,3.6vw,60px)!important; font-size:clamp(21px,1.8vw,32px)!important} @media (prefers-reduced-motion:no-preference){ html body:not(.home) .entrance-say .hero-sub:not(#iq){opacity:0;animation:iqsubin 1.6s cubic-bezier(.2,.8,.2,1) 2.9s both} } html[data-blue="6"] body:not(.home) :is(h2,.h1-one,.h1-two,.imagine p,p.beat,.ken-block p,.six-up b,.philosophy b):not(#iq):not(#iq2):not(#iq3){ background:linear-gradient(100deg,#1F6FD6 0%,#4B63E0 45%,#8A4FDC 100%);-webkit-background-clip:text;background-clip:text; color:transparent!important;-webkit-text-fill-color:transparent} html[data-blue="6"] body:not(.home) :is(h2,.h1-one,.h1-two,.imagine p,p.beat) em:not(#iq){-webkit-text-fill-color:#D0008C} html body:not(.home) .philosophy .iq-more-btn:not(#iq){margin-left:0!important} /* What Is IMAGENIQ: her three lines stacked, as on her own page (1 Oct 2026). */ html body:not(.home) p.kick.plain:not(#iq):not(#iq2){line-height:2.1!important} html body:not(.home) .whatis-three{display:inline-block;margin-top:4px;text-transform:none;letter-spacing:.02em;font-family:var(--head,"Urbanist"),sans-serif;font-style:italic;font-weight:400;font-size:clamp(18px,1.5vw,22px);color:var(--iq-ink,#2F5A8C)} /* The unicorn line stays on two lines at laptop sizes in Montserrat (1 Oct 2026). */ @media (min-width:901px) and (max-width:1899px){ html body:not(.home) .entrance-say:not(#iq){width:min(58vw,900px)!important} html body:not(.home) .entrance-say .h1-two:not(#iq){font-size:clamp(50px,4.9vw,80px)!important} } /* HER WILDCARD, TO CHOOSE BETWEEN — ?wild shows her the chooser. The magenta words that sing, in a hand the rest of the page does not use. */ html[data-wild] body:not(.home) :is(h1,h2,p.beat,.imagine p,.hero-sub,.ken-block p,p.found) em:not(#iq){text-transform:none!important;letter-spacing:0!important;font-style:normal!important;font-weight:400!important;line-height:.9} html[data-wild="2"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Sacramento",cursive!important;font-size:1.45em} html[data-wild="3"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Allura",cursive!important;font-size:1.4em} html[data-wild="4"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Parisienne",cursive!important;font-size:1.2em} html[data-wild="5"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Italianno",cursive!important;font-size:1.55em} /* HER WILDCARD, NEVER A SCRIPT. Hers: *Like Italiano… I can't be a script.* Tall, slender, elegant. */ html[data-wild="2"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Italiana",serif!important;font-size:1.08em;letter-spacing:.02em!important} html[data-wild="3"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Poiret One",sans-serif!important;font-size:1.08em;letter-spacing:.02em!important} html[data-wild="4"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Tenor Sans",sans-serif!important;font-size:1em;letter-spacing:.02em!important} html[data-wild="5"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Bodoni Moda",serif!important;font-style:italic!important;font-size:1.02em} html[data-wild] body:not(.home) :is(h1,h2) em:not(#iq){text-transform:uppercase!important} /* HER WILDCARD, ROUND TWO (1 Oct 2026). Never a script; tall, slender, elegant. Hers: *POIRET one is great, but… in capitals or heavier… I do love Italiana because it's tall and slender and it's Italian.* */ html[data-wild] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-style:normal!important;-webkit-text-stroke:0} html[data-wild="2"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Italiana",serif!important;font-size:1.08em;letter-spacing:.03em!important} html[data-wild="3"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Poiret One",sans-serif!important;text-transform:uppercase!important;-webkit-text-stroke:.9px currentColor;font-size:1.02em;letter-spacing:.04em!important} html[data-wild="4"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Cinzel",serif!important;font-weight:500!important;font-size:.98em;letter-spacing:.02em!important} html[data-wild="5"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Marcellus SC",serif!important;font-size:1em;letter-spacing:.03em!important} html[data-wild="6"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Forum",serif!important;font-size:1.1em;letter-spacing:.03em!important} html[data-wild="7"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Federo",sans-serif!important;font-size:1em;letter-spacing:.02em!important} html[data-wild="8"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Bellefair",serif!important;font-size:1.08em;letter-spacing:.02em!important} html[data-wild="9"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Antonio",sans-serif!important;font-weight:300!important;font-size:1.12em;letter-spacing:.03em!important} html[data-wild="10"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Oswald",sans-serif!important;font-weight:300!important;font-size:1.06em;letter-spacing:.03em!important} html[data-wild="11"] body:not(.home) :is(h1,h2,p.beat,.imagine p,.ken-block p,p.found) em:not(#iq){font-family:"Poiret One",sans-serif!important;text-transform:uppercase!important;-webkit-text-stroke:1.5px currentColor;font-size:1.02em;letter-spacing:.05em!important} /* HER WILDCARD IS POIRET ONE, IN CAPITALS. Hers, 1 October 2026, chosen on her own page: *poiret one caps*. Her magenta words that sing, in every heading on the site and in the spoken lines on her home page. */ html body :is(h1,h2) em:not(#iq):not(#iq2), html body:not(.home) :is(p.beat,.imagine p,.ken-block p,p.found) em:not(#iq):not(#iq2){ font-family:"Poiret One",sans-serif!important;text-transform:uppercase!important;font-style:normal!important;font-weight:400!important; -webkit-text-stroke:.9px currentColor;font-size:1.02em;letter-spacing:.04em!important} /* ══ HER HOME PAGE IN 2046 (1 October 2026) ══════════════════════════════════ Luminous, glassy, calm. Built on what she has: her pictures, her words, her order. Nothing framed in shapes; light instead of lines. */ /* The six: glass cards that lift toward you. */ html body:not(.home) .six-up:not(#iq){gap:clamp(20px,2.4vw,34px)!important} html body:not(.home) .six-up .up:not(#iq){border-radius:26px;overflow:hidden;background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:0 30px 70px -42px rgba(212,33,187,.5),0 0 0 1px rgba(212,33,187,.08),inset 0 0 0 1px rgba(255,255,255,.85); transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .7s ease} html body:not(.home) .six-up .up:not(#iq):hover,html body:not(.home) .six-up .up:not(#iq):focus-visible{transform:translateY(-8px); box-shadow:0 40px 80px -36px rgba(212,33,187,.6),0 0 0 1px rgba(212,33,187,.18),inset 0 0 0 1px #fff;outline:none} html body:not(.home) .six-up .up-frame:not(#iq){border-radius:0!important} html body:not(.home) .six-up .up-words:not(#iq){padding:22px 26px 28px!important} /* What Our Clients Say: glass, with a soft mark of light. */ html body:not(.home) .said:not(#iq){gap:clamp(18px,2.4vw,30px)!important;max-width:1000px!important} html body:not(.home) .said > *:not(#iq){position:relative;padding:40px 32px 28px;border-radius:26px;background:linear-gradient(170deg,rgba(255,255,255,.92),rgba(251,242,250,.8)); box-shadow:0 26px 60px -40px rgba(212,33,187,.5),inset 0 0 0 1px rgba(255,255,255,.9)} html body:not(.home) .said > *:not(#iq)::before{content:"\201C";position:absolute;left:24px;top:-4px;font-family:var(--head),serif;font-size:84px;line-height:1;color:rgba(226,58,203,.3)} /* Her buttons glow, and light passes across them. */ html body:not(.home) a.enter:not(#iq){position:relative;overflow:hidden;border-radius:999px!important; background:linear-gradient(120deg,#D421BB 0%,#E23ACB 45%,#B04FE6 100%)!important;color:#fff!important; box-shadow:0 16px 36px -14px rgba(212,33,187,.65)!important;transition:transform .4s ease,box-shadow .4s ease} html body:not(.home) a.enter:not(#iq)::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .9s ease} html body:not(.home) a.enter:not(#iq):hover{transform:translateY(-2px);box-shadow:0 22px 44px -14px rgba(212,33,187,.75)!important} html body:not(.home) a.enter:not(#iq):hover::after{left:120%} /* Her full-width pictures melt into the sky at their edges. */ html body:not(.home) :is(.plate,.plate.across) img:not(#iq){-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)} /* Her statistics blocks: the same lilac, softened at the corners and lit. */ html body:not(.home) .lost-one:not(#iq){border-radius:18px;box-shadow:0 20px 44px -26px rgba(178,45,136,.55),inset 0 0 0 1px rgba(255,255,255,.7)} /* Every section breathes the same amount. */ html body:not(.home) main > section.float:not(#iq),html body:not(.home) .ken-block:not(#iq){scroll-margin-top:90px} /* The six: her words sit inside the glass, never against its edge. */ html body:not(.home) .six-up .up > :not(.up-frame):not(#iq){padding-left:26px!important;padding-right:26px!important;box-sizing:border-box;max-width:100%!important;margin-left:0!important;margin-right:0!important} html body:not(.home) .six-up .up-says:not(#iq){display:block;padding-bottom:28px!important;text-align:left!important} /* ══ THE DREAM SCENE (1 Oct 2026) — her film holds the screen while her lines move ══ */ .dreamscene{position:relative;height:640vh;background:var(--cloud,#F7FAFD)} .ds-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden} .ds-film{position:absolute;left:0;right:0;top:12vh;height:72vh} .ds-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ds-veil{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,var(--cloud,#F7FAFD) 0%,rgba(247,250,253,0) 20%,rgba(247,250,253,0) 80%,var(--cloud,#F7FAFD) 100%)} .ds-lines{position:absolute;inset:0;pointer-events:none} .ds-line{position:absolute;left:50%;top:48%;margin:0;width:min(900px,88vw);text-align:center;opacity:0;will-change:transform,opacity,filter; transform:translate3d(-50%,-50%,0)} .ds-line span{position:relative;display:inline-block;padding:.35em .6em;font-family:var(--head),sans-serif;font-weight:400; font-size:clamp(26px,3.3vw,48px);line-height:1.2;color:var(--iq-ink,#106FAE);isolation:isolate} .ds-line span::before{content:"";position:absolute;z-index:-1;inset:-60% -18%;border-radius:50%;pointer-events:none} .ds-glow-pink span::before{background:radial-gradient(closest-side,rgba(255,255,255,.95) 0%,rgba(242,140,226,.55) 45%,rgba(226,58,203,0) 100%)} .ds-glow-blue span::before{background:radial-gradient(closest-side,rgba(255,255,255,.95) 0%,rgba(120,200,240,.55) 45%,rgba(47,168,224,0) 100%)} .ds-line em{font-family:"Poiret One",sans-serif;text-transform:uppercase;font-style:normal;-webkit-text-stroke:.9px currentColor;letter-spacing:.04em;color:#D0008C} .ds-stay span{font-size:clamp(32px,4.2vw,62px)} @media (max-width:700px){.ds-film{top:16vh;height:60vh}.ds-line span{font-size:clamp(22px,6.4vw,30px)}.ds-stay span{font-size:clamp(28px,8vw,36px)}} /* With stillness asked for: no scene, every line simply stands under her film. */ .dreamscene.ds-still{height:auto} .ds-still .ds-stick{position:relative;height:auto;overflow:visible} .ds-still .ds-film{position:relative;top:0;height:60vh} .ds-still .ds-lines{position:relative;display:grid;gap:18px;padding:30px 16px 60px} .ds-still .ds-line{position:relative;left:auto;top:auto;transform:none;opacity:1;width:auto} /* More room between her two hero lines (1 Oct 2026). */ html body.home .entrance-say .h1-one:not(#iq){display:block;margin-bottom:.5em!important} /* Human Potential glows from behind in her blue, the way UNICORN glows in pink (1 Oct 2026). */ html body h2.hers:not(#iq):not(#iq2){color:var(--iq-ink,#106FAE)!important;position:relative;isolation:isolate} html body h2.hers em:not(#iq):not(#iq2){position:relative;color:#D0008C!important} html body h2.hers em:not(#iq):not(#iq2)::before{content:"";position:absolute;z-index:-1;inset:-40% -10%;pointer-events:none; background:radial-gradient(60% 60%,rgba(47,168,224,.34),rgba(0,0,0,0) 72%)} /* Her heading stays pink; only Human Potential has the blue glow behind it (hers, 1 Oct 2026: *I want the heading pink… behind the human potential, you want the blue*). */ html body h2.hers:not(#iq):not(#iq2):not(#iq3){color:#D0008C!important} /* Clip the page edges without making the page its own scroller, so her dream scene can hold the screen (1 Oct 2026). */ html,body{overflow-x:clip!important;overflow-y:visible!important} /* ══ HER HERO, WITH ROOM AND MAGIC (1 Oct 2026) ═════════════════════════════ Hers: *It needs more space. It needs more magic.* Each line stands on its own, arrives out of a soft blur one after another, sits in a pool of light, and light travels through UNICORN and ONE the way it moves through her portal. */ html body.home .entrance-say:not(#iq){isolation:isolate} html body.home .entrance-say:not(#iq)::before{content:"";position:absolute;z-index:-1;left:-8%;right:-4%;top:-14%;bottom:-14%;pointer-events:none; background:radial-gradient(closest-side,rgba(255,255,255,.78),rgba(255,255,255,.42) 55%,rgba(255,255,255,0) 100%)} html body.home .entrance-say h1:not(#iq){animation:none!important;opacity:1!important} html body.home .entrance-say .h1-one:not(#iq){display:block;margin-bottom:clamp(18px,2.2vw,34px)!important;letter-spacing:.16em!important} html body.home .entrance-say .h1-two:not(#iq){display:block;line-height:1.14!important} html body.home .entrance-say .hero-sub:not(#iq):not(#iq2){margin-top:clamp(34px,4.4vw,70px)!important} @media (max-width:900px){html body.home .entrance-say :is(.h1-one,.h1-two,.hero-sub):not(#iq):not(#iq2){text-align:center!important;margin-left:auto!important;margin-right:auto!important}} @media (prefers-reduced-motion:no-preference){ html body.home .entrance-say .h1-one:not(#iq){animation:heroIn 1.6s cubic-bezier(.2,.8,.2,1) .5s both} html body.home .entrance-say .h1-two:not(#iq){animation:heroIn 1.9s cubic-bezier(.2,.8,.2,1) 1.5s both} html body.home .entrance-say .hero-sub:not(#iq):not(#iq2){animation:heroIn 1.7s cubic-bezier(.2,.8,.2,1) 3s both!important} html body.home .entrance-say :is(.h1-one,.h1-two) em:not(#iq):not(#iq2){ background:linear-gradient(100deg,#D0008C 0%,#D0008C 38%,#FFC2F1 50%,#D0008C 62%,#D0008C 100%);background-size:300% 100%;background-position:100% 0; -webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;-webkit-text-stroke-color:#D0008C; animation:heroShine 5.5s ease-in-out 3.6s infinite} } @keyframes heroIn{from{opacity:0;transform:translateY(22px);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}} @keyframes heroShine{0%{background-position:100% 0}45%,100%{background-position:0 0}} /* Her hero words, grand on a computer (1 Oct 2026). */ @media (min-width:901px){ html body.home .entrance-say:not(#iq):not(#iq2){width:min(60vw,1000px)!important} html body.home .entrance-say .h1-one:not(#iq):not(#iq2){font-size:clamp(22px,1.7vw,34px)!important} html body.home .entrance-say .h1-two:not(#iq):not(#iq2){font-size:clamp(60px,5.6vw,104px)!important} html body.home .entrance-say .hero-sub:not(#iq):not(#iq2):not(#iq3){font-size:clamp(24px,1.9vw,36px)!important} } /* HER FIRST ARRIVAL, HUGE. Hers, 1 Oct 2026: *make the first arrival, like that is huge.* */ @media (min-width:901px){ html body.home .entrance-say:not(#iq):not(#iq2):not(#iq3){width:min(57vw,1500px)!important;max-width:none!important} html body.home .entrance-say h1:not(#iq){max-width:none!important;width:100%!important} html body.home .entrance-say .h1-one:not(#iq):not(#iq2):not(#iq3){font-size:clamp(24px,2.05vw,46px)!important;white-space:nowrap} html body.home .entrance-say .h1-two:not(#iq):not(#iq2):not(#iq3){font-size:clamp(64px,7vw,160px)!important;line-height:1.06!important} html body.home .entrance-say .hero-sub:not(#iq):not(#iq2):not(#iq4){font-size:clamp(26px,2.25vw,48px)!important} } /* ══ TWO MOMENTS, NOT ONE (1 Oct 2026). Hers: *There are two different things here… Don't make the background too heavy… When that drops out of it, it needs to have the background.* Her two lines drop INTO the film with a light glow; the Imagine lines drop OUT of it, each with its own soft glow behind, pink, blue, pink, and light rather than heavy. ══ */ .dreamscene{display:none!important} .beats-drop .beats-say::before{background:radial-gradient(ellipse at center,rgba(255,255,255,.62) 0%,rgba(255,255,255,.3) 40%,rgba(255,255,255,0) 70%)!important} .imagine-stage p{isolation:isolate} .imagine-stage p::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(760px,96%);height:200%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(242,140,226,.32) 0%,rgba(242,140,226,.14) 50%,rgba(242,140,226,0) 100%)} .imagine-stage p:nth-child(even)::before{background:radial-gradient(closest-side,rgba(120,200,240,.34) 0%,rgba(120,200,240,.15) 50%,rgba(120,200,240,0) 100%)} @media (min-width:901px){ html body.home .entrance-say:not(#iq):not(#iq2):not(#iq3):not(#iq4){width:min(62vw,1600px)!important} html body.home .entrance-say .h1-two:not(#iq):not(#iq2):not(#iq3):not(#iq4){font-size:clamp(60px,5.9vw,150px)!important} } /* Big, but never over her face or hand (1 Oct 2026). */ @media (min-width:901px){html body.home .entrance-say .h1-two:not(#iq):not(#iq2):not(#iq3):not(#iq4):not(#iq5){font-size:clamp(56px,5.15vw,132px)!important}} /* ══ WE HAVEN'T SCRATCHED THE SURFACE OF HUMAN POTENTIAL — always two lines, with a ribbon of light and stardust behind Human Potential, never an orb (hers, 1 Oct 2026). ══ */ html body h2.hers:not(#iq):not(#iq2):not(#iq3){white-space:nowrap!important;max-width:none!important;text-align:center!important; font-size:clamp(14px,3.5vw,54px)!important;line-height:1.15!important;letter-spacing:.01em!important} html body h2.hers em:not(#iq):not(#iq2){display:block!important;margin-top:.12em;font-size:1.65em!important;line-height:1.05;isolation:isolate} html body h2.hers em:not(#iq):not(#iq2)::before{content:""!important;position:absolute;z-index:-1;left:-14%;right:-14%;top:12%;bottom:12%;inset:auto; background:linear-gradient(90deg,rgba(242,140,226,0) 0%,rgba(242,140,226,.38) 22%,rgba(150,205,245,.42) 50%,rgba(242,140,226,.38) 78%,rgba(242,140,226,0) 100%)!important; filter:blur(18px);border-radius:999px} html body h2.hers em:not(#iq):not(#iq2)::after{content:"";position:absolute;z-index:-1;left:-8%;right:-8%;top:-20%;bottom:-20%;pointer-events:none; background-image:radial-gradient(1.5px 1.5px at 8% 30%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 22% 78%,#FFD6F5 50%,transparent 51%), radial-gradient(1.5px 1.5px at 37% 18%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 54% 88%,#CDEBFF 50%,transparent 51%), radial-gradient(1.5px 1.5px at 68% 22%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 83% 70%,#FFD6F5 50%,transparent 51%), radial-gradient(1.5px 1.5px at 95% 35%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 46% 50%,#fff 50%,transparent 51%)} @media (prefers-reduced-motion:no-preference){ html body h2.hers em:not(#iq):not(#iq2)::before{animation:surfRibbon 9s ease-in-out infinite alternate} html body h2.hers em:not(#iq):not(#iq2)::after{animation:surfStars 3.6s ease-in-out infinite alternate} } @keyframes surfRibbon{from{transform:translateX(-4%) scaleX(.96);opacity:.75}to{transform:translateX(4%) scaleX(1.04);opacity:1}} @keyframes surfStars{from{opacity:.25}to{opacity:1}} /* Sir Ken arrives softly, never jarring (1 Oct 2026). */ @media (prefers-reduced-motion:no-preference){ .js-float .ken-block .ken-face,.js-float .ken-block .ken-quote{opacity:0} .js-float .ken-block .is-in .ken-face,.js-float .ken-block .ken-put.is-in .ken-face{animation:kenSoft 2.2s cubic-bezier(.2,.8,.2,1) .2s both!important} .js-float .ken-block .is-in .ken-quote,.js-float .ken-block .ken-put.is-in .ken-quote{animation:kenSoft 2.4s cubic-bezier(.2,.8,.2,1) .9s both!important} } @keyframes kenSoft{from{opacity:0;transform:translateY(18px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}} /* The Imagine lines out of her girl move a touch faster (hers, 1 Oct 2026). */ @media (prefers-reduced-motion:no-preference){ .imagine-stage p{animation-duration:18.7s!important;animation-delay:calc(var(--n) * 3.74s)!important} .imagine-stage p.found{animation-duration:1700ms!important} } /* The ribbon of light sits behind Human Potential, never collapsed (1 Oct 2026). */ html body h2.hers em:not(#iq):not(#iq2):not(#iq3)::before{left:-16%!important;right:-16%!important;top:8%!important;bottom:8%!important} /* Her arrival: stardust out of the portal, and each line wakes as it arrives (1 Oct 2026). */ .entrance{position:relative} .hero-dust{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.2s ease} .hero-dust.on{opacity:1} html body.home .entrance-say:not(#iq){z-index:3} @media (prefers-reduced-motion:no-preference){ html body.home .entrance.js-wake .entrance-say :is(.h1-one,.h1-two,.hero-sub):not(#iq):not(#iq2):not(#iq3):not(#iq4):not(#iq5){ animation:none!important;opacity:0;transform:translateY(14px);filter:blur(12px); transition:opacity 1.8s cubic-bezier(.2,.8,.2,1),transform 2s cubic-bezier(.2,.8,.2,1),filter 1.8s ease} html body.home .entrance.js-wake .entrance-say :is(.h1-one,.h1-two,.hero-sub).lit:not(#iq):not(#iq2):not(#iq3):not(#iq4):not(#iq5){ opacity:1;transform:none;filter:blur(0);animation:litBloom 2.6s ease-out both!important} } @keyframes litBloom{0%{text-shadow:0 0 28px rgba(255,170,236,.95),0 0 60px rgba(226,58,203,.5)}100%{text-shadow:0 0 0 rgba(255,170,236,0),0 0 0 rgba(226,58,203,0)}} /* The old veil sits BEHIND her hero words, never over them (1 Oct 2026; hers: *make sure we can see the words*). */ .entrance::before{z-index:2!important} html body.home .entrance-say:not(#iq):not(#iq2){z-index:5!important} /* The Imagine lines start only when the dream says go (1 Oct 2026). */ @media (prefers-reduced-motion:no-preference){ .imagine:not(.go) .imagine-stage p{animation-play-state:paused!important;opacity:0} .imagine.go .imagine-stage p{animation-play-state:running!important} } /* ══ CRISP, NEVER FUZZY (1 Oct 2026). Hers: *the words are fuzzy, and I don't want them fuzzy when they're fading in.* No blur and no halo on any arriving word. ══ */ @media (prefers-reduced-motion:no-preference){ html body.home .entrance.js-wake .entrance-say :is(.h1-one,.h1-two,.hero-sub):not(#iq):not(#iq2):not(#iq3):not(#iq4):not(#iq5):not(#iq6){ filter:none!important;transform:translateY(16px);transition:opacity 1.6s ease,transform 1.8s cubic-bezier(.2,.8,.2,1)!important} html body.home .entrance.js-wake .entrance-say :is(.h1-one,.h1-two,.hero-sub).lit:not(#iq):not(#iq2):not(#iq3):not(#iq4):not(#iq5):not(#iq6){ filter:none!important;transform:none;animation:none!important;text-shadow:none!important} @keyframes floatLine{ 0% {opacity:0;transform:translateY(-70px)} 4.4% {opacity:1;transform:translateY(0)} 19% {opacity:1;transform:translateY(0)} 24.5% {opacity:0;transform:translateY(60px)} 100% {opacity:0;transform:translateY(-70px)}} @keyframes imagineStay{ from{opacity:0;transform:translateY(-70px)} to {opacity:1;transform:none}} } .beats-drop .beat,.imagine-stage p,.beats-drop .bd-words{filter:none!important;text-shadow:none!important} /* Magi's little orbs of light behind UNICORN and ONE, back, glowing in as each line wakes (hers, 1 Oct 2026: *the one good thing Magi did*). */ html body.home .entrance-say h1 em:not(#iq)::before{opacity:0;transition:opacity 2.4s ease .4s} html body.home .entrance-say .lit em:not(#iq)::before,html body.home .entrance:not(.js-wake) .entrance-say h1 em:not(#iq)::before{opacity:1!important} /* The orbs behind UNICORN and ONE, a little more subtle (hers, 1 Oct 2026). */ html body.home .entrance-say .lit em:not(#iq):not(#iq2)::before,html body.home .entrance:not(.js-wake) .entrance-say h1 em:not(#iq):not(#iq2)::before{opacity:.55!important} /* Human Potential: no ribbon across the page — a whisper of light held close to the words, and a gentle slant (hers, 1 Oct 2026: *that looks ridiculous… maybe put it in italics… less colour, just something*). */ html body h2.hers em:not(#iq):not(#iq2):not(#iq3):not(#iq4){font-style:oblique 9deg!important;display:inline-block!important} html body h2.hers em:not(#iq):not(#iq2):not(#iq3):not(#iq4)::before{left:6%!important;right:6%!important;top:22%!important;bottom:22%!important;filter:blur(14px)!important;animation:none!important;opacity:1!important; background:radial-gradient(closest-side,rgba(150,205,245,.22),rgba(242,140,226,.12) 60%,rgba(242,140,226,0) 100%)!important} html body h2.hers em:not(#iq):not(#iq2):not(#iq3):not(#iq4)::after{display:none!important} /* Human Potential back on its own line, slanted, with a whisper of light (1 Oct 2026). */ html body h2.hers em:not(#iq):not(#iq2):not(#iq3):not(#iq4):not(#iq5){display:table!important;margin:.12em auto 0!important} /* ══ IT IS THE AGE OF … — one calm line, the last words fading in turn (1 Oct 2026) ══ */ .age-turn{padding-top:clamp(50px,6vw,90px)!important;padding-bottom:clamp(50px,6vw,90px)!important} html body.home h2.age-line:not(#iq):not(#iq2){text-transform:none!important;font-size:clamp(26px,3.2vw,50px)!important;line-height:1.25!important; text-align:center!important;white-space:normal;color:var(--iq-ink,#106FAE)!important} .age-words{display:inline-grid;vertical-align:baseline;text-align:left} .age-words em{grid-area:1/1;white-space:nowrap} html body.home .age-words em:not(#iq):not(#iq2){font-size:1.05em!important} @media (max-width:700px){.age-stay{display:block}.age-words{text-align:center}} @media (prefers-reduced-motion:no-preference){ .age-words em{opacity:0;animation:ageWord 13.2s ease-in-out infinite} .age-words em:nth-child(2){animation-delay:3.3s} .age-words em:nth-child(3){animation-delay:6.6s} .age-words em:nth-child(4){animation-delay:9.9s} } @keyframes ageWord{0%{opacity:0;transform:translateY(8px)}6%{opacity:1;transform:none}22%{opacity:1;transform:none}28%{opacity:0;transform:translateY(-8px)}100%{opacity:0}} @media (prefers-reduced-motion:reduce){.age-words{display:inline}.age-words em{display:inline}.age-words em:not(:last-child)::after{content:", "}} /* The Age line: the changing word centred on its own line (1 Oct 2026). */ .age-stay{display:block} .age-words{display:grid!important;justify-items:center;text-align:center} /* Human Potential with a visible, gentle slant (1 Oct 2026). */ html body h2.hers em:not(#iq):not(#iq2):not(#iq3):not(#iq4):not(#iq5):not(#iq6){transform:skewX(-9deg)} /* Her six cards: a touch closer together, and the words inside a touch tighter (1 Oct 2026). */ html body.home .six-up:not(#iq):not(#iq2){gap:clamp(14px,1.5vw,22px)!important} html body.home .six-up .up-words:not(#iq):not(#iq2){padding:18px 24px 6px!important} html body.home .six-up .up-words :is(b,i,em,span):not(#iq):not(#iq2),html body.home .six-up .up-says:not(#iq):not(#iq2){line-height:1.45!important} html body.home .six-up .up-words i:not(#iq):not(#iq2){margin-top:4px!important} html body.home .six-up .up-says:not(#iq):not(#iq2){margin-top:8px!important;padding-bottom:22px!important} /* The World Is Waiting For Your Magic — arrives after the four have had their turn, and stays (1 Oct 2026). */ html body.home p.age-after:not(#iq):not(#iq2){margin:clamp(18px,2.4vw,34px) auto 0!important;text-align:center!important;max-width:none!important; font-family:var(--head),sans-serif!important;font-weight:400!important;font-size:clamp(18px,1.8vw,28px)!important;color:var(--iq-ink,#106FAE)!important} html body.home p.age-after em:not(#iq){font-family:"Poiret One",sans-serif;font-style:normal;text-transform:uppercase;-webkit-text-stroke:.8px currentColor;letter-spacing:.04em;color:#D0008C} @media (prefers-reduced-motion:no-preference){ .age-turn.is-in .age-after{animation:ageAfter 2.2s ease 13.4s both} .age-turn .age-after{opacity:0} } @keyframes ageAfter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* The Imagine lines: shorter, and each one fully clears before the next arrives (hers, 1 Oct 2026: *They're lasting too long, and it needs to clear before the other one comes in*). */ @media (prefers-reduced-motion:no-preference){ .imagine-stage p{animation-name:floatLineClear!important;animation-duration:17s!important;animation-delay:calc(var(--n) * 3.4s)!important} .imagine-stage p.found{animation-name:imagineStay!important;animation-duration:1700ms!important} @keyframes floatLineClear{ 0% {opacity:0;transform:translateY(-60px)} 3.6% {opacity:1;transform:translateY(0)} 12.5%{opacity:1;transform:translateY(0)} 16.5%{opacity:0;transform:translateY(54px)} 100% {opacity:0;transform:translateY(54px)}} } /* ══ THE AGE OF … — bigger, in her clouds, filling the screen so nothing below shows until it has run (hers, 1 Oct 2026). ══ */ html body.home .age-turn:not(#iq){position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh; display:flex!important;flex-direction:column;justify-content:center;align-items:center; width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:0!important; background:linear-gradient(180deg,#F7FAFD 0%,#EEF4FB 30%,#F6EEF8 70%,#F7FAFD 100%)} html body.home .age-turn:not(#iq)::before,html body.home .age-turn:not(#iq)::after{content:"";position:absolute;left:0;width:200%;z-index:-1;pointer-events:none; background-repeat:repeat-x;background-size:50% 100%} html body.home .age-turn:not(#iq)::before{top:8%;height:46%;background-image:url(../img/mist-far.png);opacity:.75} html body.home .age-turn:not(#iq)::after{bottom:-4%;height:58%;background-image:url(../img/mist-near.png);opacity:.95} @media (prefers-reduced-motion:no-preference){ html body.home .age-turn:not(#iq)::before{animation:iqmist 120s linear infinite} html body.home .age-turn:not(#iq)::after{animation:iqmist 70s linear infinite} } html body.home h2.age-line:not(#iq):not(#iq2):not(#iq3){font-size:clamp(34px,4.8vw,84px)!important;line-height:1.15!important} html body.home .age-words em:not(#iq):not(#iq2):not(#iq3){font-size:1.12em!important} html body.home p.age-after:not(#iq):not(#iq2):not(#iq3){font-size:clamp(20px,2.1vw,34px)!important} /* The words wait until she has arrived, so she always sees them from the start. */ @media (prefers-reduced-motion:no-preference){ .age-turn:not(.is-in) .age-words em{animation-play-state:paused!important} } /* Her sky behind the Age line: soft drifting puffs of light, no pattern, no edges (1 Oct 2026). */ html body.home .age-turn:not(#iq):not(#iq2)::before,html body.home .age-turn:not(#iq):not(#iq2)::after{ background-image:none!important;background-size:auto!important;width:auto!important;left:-15%!important;right:-15%!important;top:-10%!important;bottom:-10%!important;height:auto!important; opacity:1!important;filter:blur(28px)} html body.home .age-turn:not(#iq):not(#iq2)::before{ background:radial-gradient(38% 30% at 18% 30%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%), radial-gradient(34% 26% at 52% 22%,rgba(255,236,250,.85),rgba(255,236,250,0) 70%), radial-gradient(40% 32% at 84% 34%,rgba(236,246,255,.95),rgba(236,246,255,0) 70%), radial-gradient(30% 24% at 36% 62%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%)!important} html body.home .age-turn:not(#iq):not(#iq2)::after{ background:radial-gradient(46% 30% at 10% 86%,rgba(255,255,255,1),rgba(255,255,255,0) 70%), radial-gradient(42% 28% at 46% 92%,rgba(250,232,248,.95),rgba(250,232,248,0) 70%), radial-gradient(48% 30% at 86% 84%,rgba(255,255,255,1),rgba(255,255,255,0) 70%), radial-gradient(36% 22% at 66% 70%,rgba(234,244,255,.85),rgba(234,244,255,0) 70%)!important} @media (prefers-reduced-motion:no-preference){ html body.home .age-turn:not(#iq):not(#iq2)::before{animation:ageCloudA 38s ease-in-out infinite alternate!important} html body.home .age-turn:not(#iq):not(#iq2)::after{animation:ageCloudB 30s ease-in-out infinite alternate!important} } @keyframes ageCloudA{from{transform:translate3d(-4%,0,0) scale(1)}to{transform:translate3d(4%,-2%,0) scale(1.06)}} @keyframes ageCloudB{from{transform:translate3d(5%,0,0) scale(1.04)}to{transform:translate3d(-5%,2%,0) scale(1)}} html body.home .age-turn:not(#iq):not(#iq2){background:linear-gradient(180deg,#F3F7FD 0%,#E9F1FA 40%,#F4EAF6 75%,#F7FAFD 100%)!important} /* Each Imagine line holds about three seconds, long enough to read the longest, then clears before the next (1 Oct 2026). */ @media (prefers-reduced-motion:no-preference){ .imagine-stage p{animation-name:floatLineRead!important;animation-duration:21s!important;animation-delay:calc(var(--n) * 4.2s)!important} .imagine-stage p.found{animation-name:imagineStay!important;animation-duration:1700ms!important} @keyframes floatLineRead{ 0% {opacity:0;transform:translateY(-60px)} 2.9% {opacity:1;transform:translateY(0)} 17.1%{opacity:1;transform:translateY(0)} 19.6%{opacity:0;transform:translateY(54px)} 100% {opacity:0;transform:translateY(54px)}} } /* Magi's own clouds rolling behind the Age Of Dreamers, set the way they roll behind Wisdom's podium (1 Oct 2026; hers: *the clouds that Magi made*). */ html body.home .age-turn:not(#iq):not(#iq2):not(#iq3)::before,html body.home .age-turn:not(#iq):not(#iq2):not(#iq3)::after{ filter:none!important;left:0!important;right:0!important;top:auto!important;width:auto!important;transform:none!important; background-repeat:repeat-x!important;background-position:0 100%;opacity:1} html body.home .age-turn:not(#iq):not(#iq2):not(#iq3)::before{bottom:6vh!important;height:300px!important; background:url(../img/mist-far.png) repeat-x 0 100%/1485px 300px!important;opacity:.75!important;animation:ageFar 38s linear infinite!important} html body.home .age-turn:not(#iq):not(#iq2):not(#iq3)::after{bottom:-170px!important;height:480px!important; background:url(../img/mist-near.png) repeat-x 0 100%/1875px 480px!important;opacity:.9!important;animation:ageNear 24s linear infinite!important} @keyframes ageFar{from{background-position:0 100%}to{background-position:-1485px 100%}} @keyframes ageNear{from{background-position:0 100%}to{background-position:-1875px 100%}} @media (prefers-reduced-motion:reduce){html body.home .age-turn:not(#iq):not(#iq2):not(#iq3)::before,html body.home .age-turn:not(#iq):not(#iq2):not(#iq3)::after{animation:none!important}} /* ══ ONE MOMENT AT A TIME (hers, 1 Oct 2026: *make sure that nothing fades in yet until that moment's done*). Each moment has the screen to itself. ══ */ html body.home .imagine:not(#iq){min-height:100vh;min-height:100svh} html body.home .ken-block:not(#iq){min-height:100vh;min-height:100svh;display:flex!important;flex-direction:column;justify-content:center} @media (prefers-reduced-motion:no-preference){ html body.home .age-turn:not(.age-go) .age-words em{animation-play-state:paused!important} html body.home .age-turn:not(.age-go) .age-after{animation:none!important;opacity:0} html body.home .age-turn.age-go .age-after{animation:ageAfter 2.2s ease 13.4s both!important} } /* ══ THE AGE LINE, FINAL ORDER (hers, 1 Oct 2026): "It Is The Age Of" in smaller capitals; the four once through, the last one staying; then, only when they have finished, The World Is Waiting For Your Magic. ══ */ html body.home .age-stay:not(#iq){font-size:clamp(15px,1.45vw,24px)!important;text-transform:uppercase!important;letter-spacing:.24em!important; font-weight:500!important;margin-bottom:.5em!important;color:var(--iq-ink,#106FAE)} @media (prefers-reduced-motion:no-preference){ html body.home .age-turn .age-words em:not(#iq){animation:none!important;opacity:0} html body.home .age-turn.age-go .age-words em:not(#iq){animation:ageOnce 3.4s ease-in-out both!important} html body.home .age-turn.age-go .age-words em:nth-child(2):not(#iq){animation-delay:3.3s!important} html body.home .age-turn.age-go .age-words em:nth-child(3):not(#iq){animation-delay:6.6s!important} html body.home .age-turn.age-go .age-words em:nth-child(4):not(#iq){animation:ageStayLast 1.4s ease-out 9.9s both!important} html body.home .age-turn.age-go .age-after:not(#iq){animation:ageAfter 2s ease 12.4s both!important} } @keyframes ageOnce{0%{opacity:0;transform:translateY(8px)}18%{opacity:1;transform:none}78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}} @keyframes ageStayLast{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* Her hero arrives in the phrases she reads it in (1 Oct 2026). */ @media (prefers-reduced-motion:no-preference){ html body.home .entrance.js-wake .entrance-say .ph{display:inline-block;opacity:0;transform:translateY(12px);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)} html body.home .entrance.js-wake .entrance-say .ph.on{opacity:1;transform:none} html body.home .entrance.js-wake .entrance-say .ph:not(.on) em:not(#iq):not(#iq2)::before{opacity:0!important} html body.home .entrance.js-wake .entrance-say .ph.on em:not(#iq):not(#iq2)::before{opacity:.55!important;transition:opacity 2s ease .3s} html body.home .entrance.js-wake .entrance-say :is(.h1-one,.h1-two,.hero-sub).lit:not(#iq):not(#iq2):not(#iq3):not(#iq4):not(#iq5):not(#iq6):not(#iq7){transition:none!important;opacity:1!important;transform:none!important} } /* No empty screens between moments (hers, 1 Oct 2026: *Why is there all this empty space there?*). The next moment waits invisibly instead. */ html body.home .imagine:not(#iq):not(#iq2){min-height:0!important} html body.home .ken-block:not(#iq):not(#iq2){min-height:0!important} html body.home:not(.iq-imagine-done) .ken-block:not(#iq){opacity:0} html body.home .ken-block:not(#iq){transition:opacity 1.6s ease} /* Moments: phrases and headings arrive the way she reads them, crisp, never blurred (1 Oct 2026). */ .beats-drop .beat .ph{display:inline-block;opacity:0;transform:translateY(12px);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)} .beats-drop .beat .ph.on{opacity:1;transform:none} .beats-drop .beat{letter-spacing:normal!important} @media (prefers-reduced-motion:no-preference){ .mo-wait .mo{display:inline-block;opacity:0;transform:translateY(12px);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)} .mo-wait .mo.on{opacity:1;transform:none} h2.hers.mo-wait .mo-2{display:block} } @media (prefers-reduced-motion:reduce){.beats-drop .beat .ph{opacity:1;transform:none}} /* It's Magic, in her voice (1 Oct 2026): It's Magic. It's Your Magic. big in her magenta Poiret; And It's Been Waiting For You To in small capitals; then DISCOVER IT big again in Poiret. Each on its own line. */ .beats-drop .beat:nth-child(2) .ph{display:block!important;margin:0 auto} html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(1):not(#iq), html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(2):not(#iq), html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(4):not(#iq), html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(4) em:not(#iq):not(#iq2){ font-family:"Poiret One",sans-serif!important;text-transform:uppercase!important;font-style:normal!important;color:#D0008C!important; -webkit-text-stroke:1px #D0008C;letter-spacing:.04em!important;font-size:clamp(34px,4.4vw,72px)!important;line-height:1.08!important} html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(4) em:not(#iq):not(#iq2){font-size:1em!important} html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(3):not(#iq){font-family:var(--head),sans-serif!important;font-weight:500!important; text-transform:uppercase!important;letter-spacing:.22em!important;font-size:clamp(14px,1.35vw,22px)!important;color:var(--iq-ink,#106FAE)!important; margin:.9em auto .55em!important} /* On a phone, the small capitals line stays on one line (1 Oct 2026). */ @media (max-width:600px){html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(3):not(#iq):not(#iq2){letter-spacing:.08em!important;font-size:12.5px!important;white-space:nowrap}} /* IT'S MAGIC. IT'S YOUR MAGIC. on one line, a touch smaller (hers, 1 Oct 2026). */ html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(1):not(#iq):not(#iq2), html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(2):not(#iq):not(#iq2){display:inline-block!important;white-space:nowrap;font-size:clamp(28px,3.7vw,60px)!important} html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(1):not(#iq):not(#iq2){margin-right:.35em!important} @media (max-width:600px){ html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(1):not(#iq):not(#iq2), html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(2):not(#iq):not(#iq2){font-size:clamp(17px,5.2vw,24px)!important} } /* The Age Of Dreamers as a narrower band, with only the clouds floating (hers, 1 Oct 2026). */ html body.home .age-turn:not(#iq):not(#iq2){min-height:0!important;padding-top:clamp(80px,9vw,140px)!important;padding-bottom:clamp(110px,12vw,190px)!important} /* The six wait, invisible, until the Age line has finished. */ html body.home:not(.iq-age-done) :is(.ground.audience,.six-up):not(#iq){opacity:0} html body.home :is(.ground.audience,.six-up):not(#iq){transition:opacity 1.6s ease} /* Magi's clouds in the Age band: melting upward into the sky, floating along the bottom, never over her words (1 Oct 2026). */ html body.home .age-turn:not(#iq) > *{position:relative;z-index:2} html body.home .age-turn:not(#iq):not(#iq2):not(#iq3):not(#iq4)::before, html body.home .age-turn:not(#iq):not(#iq2):not(#iq3):not(#iq4)::after{ -webkit-mask-image:linear-gradient(to top,#000 45%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to top,#000 45%,rgba(0,0,0,0) 100%);z-index:0!important} html body.home .age-turn:not(#iq):not(#iq2):not(#iq3):not(#iq4)::before{bottom:-40px!important;height:260px!important;opacity:.55!important;background-size:1300px 260px!important} html body.home .age-turn:not(#iq):not(#iq2):not(#iq3):not(#iq4)::after{bottom:-230px!important;height:420px!important;opacity:.85!important;background-size:1640px 420px!important} @keyframes ageFar{from{background-position:0 100%}to{background-position:-1300px 100%}} @keyframes ageNear{from{background-position:0 100%}to{background-position:-1640px 100%}} /* It's Magic, refined (hers, 1 Oct 2026): the Poiret lines smaller still, the small capitals a touch bigger. */ html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(1):not(#iq):not(#iq2):not(#iq3), html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(2):not(#iq):not(#iq2):not(#iq3){font-size:clamp(24px,3vw,48px)!important} html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(4):not(#iq):not(#iq2):not(#iq3){font-size:clamp(28px,3.4vw,54px)!important} html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(3):not(#iq):not(#iq2):not(#iq3){font-size:clamp(15px,1.55vw,25px)!important} @media (max-width:600px){ html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(1):not(#iq):not(#iq2):not(#iq3), html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(2):not(#iq):not(#iq2):not(#iq3){font-size:clamp(15px,4.6vw,21px)!important} html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(4):not(#iq):not(#iq2):not(#iq3){font-size:clamp(20px,6vw,26px)!important} html body.home .beats-drop .beat:nth-child(2) .ph:nth-child(3):not(#iq):not(#iq2):not(#iq3){font-size:13.5px!important} } /* IT IS THE AGE OF, a bit bigger (hers, 1 Oct 2026). */ html body.home .age-stay:not(#iq):not(#iq2){font-size:clamp(18px,1.95vw,32px)!important} /* SIR KEN, IN MOMENTS — her language: the singing words big in magenta Poiret, the connecting words in small blue capitals, the rest in his own voice (1 Oct 2026). */ html body.home .ken-quote.kq-ready p:not(#iq):not(#iq2){font-family:var(--head),sans-serif!important;font-style:normal!important;line-height:1.3!important} .ken-quote.kq-ready .kq{display:block} .ken-quote.kq-ready .kq-big{font-family:"Poiret One",sans-serif;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:1px #D0008C;letter-spacing:.04em; font-size:clamp(34px,4vw,64px);line-height:1.05} .ken-quote.kq-ready .kq-mid{font-size:clamp(24px,2.6vw,42px)} .ken-quote.kq-ready .kq-small{margin:.5em 0 .35em;font-weight:500;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(13px,1.2vw,19px);color:var(--iq-ink,#106FAE)} .ken-quote.kq-ready .kq-line{margin-top:.7em;font-style:italic;font-size:clamp(17px,1.5vw,24px);color:var(--iq-body,#2A6594)} .ken-quote.kq-ready .kq-line + .kq-line{margin-top:.15em} @media (prefers-reduced-motion:no-preference){ .ken-quote.kq-ready .kq,.ken-quote.kq-ready cite,.ken-block .ken-face{opacity:0;transform:translateY(12px);transition:opacity 1.3s ease,transform 1.5s cubic-bezier(.2,.8,.2,1)!important;animation:none!important} .ken-quote.kq-ready .kq.kq-on,.ken-quote.kq-ready cite.kq-on,.ken-block .ken-face.kq-on{opacity:1!important;transform:none!important} .js-float .ken-block .ken-quote.kq-ready{opacity:1!important;animation:none!important} } /* Magi's five rolling cloud layers behind the Age band (1 Oct 2026). The old two are retired. */ html body.home .age-turn:not(#iq):not(#iq2):not(#iq3):not(#iq4):not(#iq5)::before, html body.home .age-turn:not(#iq):not(#iq2):not(#iq3):not(#iq4):not(#iq5)::after{display:none!important} .age-sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .age-sky .m{position:absolute;left:0;right:0;background-repeat:repeat-x;background-position:0 100%} .age-sky .far{bottom:30px;height:240px;background-image:url(../img/mist-far.png);background-size:1188px 240px;opacity:.7;animation:agsFar 34s linear infinite} .age-sky .near{bottom:-150px;height:400px;background-image:url(../img/mist-near.png);background-size:1562px 400px;opacity:.85;animation:agsNear 22s linear infinite} .age-sky .low{bottom:-170px;height:300px;background-image:url(../img/mist-far.png);background-size:1485px 300px;background-position-x:-700px;opacity:.75;animation:agsLow 17s linear infinite reverse} .age-sky .floor{bottom:-130px;height:280px;background-image:url(../img/mist-near.png);background-size:1094px 280px;opacity:.95;animation:agsFloor 25s linear infinite} .age-sky .floor2{bottom:-150px;height:220px;background-image:url(../img/mist-far.png);background-size:1089px 220px;background-position-x:-400px;opacity:.9;animation:agsFloor2 19s linear infinite reverse} @keyframes agsFar{from{background-position-x:0}to{background-position-x:-1188px}} @keyframes agsNear{from{background-position-x:0}to{background-position-x:-1562px}} @keyframes agsLow{from{background-position-x:-700px}to{background-position-x:-2185px}} @keyframes agsFloor{from{background-position-x:0}to{background-position-x:-1094px}} @keyframes agsFloor2{from{background-position-x:-400px}to{background-position-x:-1489px}} .age-sky .m{-webkit-mask-image:linear-gradient(to top,#000 50%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to top,#000 50%,rgba(0,0,0,0) 100%)} @media (prefers-reduced-motion:reduce){.age-sky .m{animation:none}} html body.home .age-turn:not(#iq) > .age-sky{position:absolute!important;z-index:0!important} /* The six: tighter lines, as she asked (1 Oct 2026). */ html body.home .six-up .up-words :is(b,i,em,span):not(#iq):not(#iq2):not(#iq3),html body.home .six-up .up-says:not(#iq):not(#iq2):not(#iq3){line-height:1.32!important} html body.home .six-up .up-says:not(#iq):not(#iq2):not(#iq3){margin-top:6px!important} /* The Age band is ALL cloud, her writing sitting on it, drifting slowly (hers, 1 Oct 2026: *I just want clouds… slow the scroll down… just the writing on the cloud*). */ html body.home .age-turn:not(#iq):not(#iq2):not(#iq3){background:linear-gradient(180deg,#F1EEF6 0%,#F6F2F8 50%,#F3EFF7 100%)!important} .age-sky .m{-webkit-mask-image:none!important;mask-image:none!important} .age-sky .far{top:-18%;bottom:auto!important;height:62%!important;background-size:auto 100%!important;opacity:.85!important;transform:scaleY(-1);animation:agsSlowA 140s linear infinite!important} .age-sky .low{top:10%;bottom:auto!important;height:58%!important;background-size:auto 100%!important;opacity:.7!important;animation:agsSlowB 170s linear infinite reverse!important} .age-sky .near{bottom:-12%!important;height:78%!important;background-size:auto 100%!important;opacity:.95!important;animation:agsSlowC 110s linear infinite!important} .age-sky .floor{bottom:-30%!important;height:70%!important;background-size:auto 100%!important;opacity:1!important;animation:agsSlowD 130s linear infinite!important} .age-sky .floor2{top:30%;bottom:auto!important;height:50%!important;background-size:auto 100%!important;opacity:.6!important;animation:agsSlowE 190s linear infinite reverse!important} @keyframes agsSlowA{from{background-position-x:0}to{background-position-x:-2040px}} @keyframes agsSlowB{from{background-position-x:-700px}to{background-position-x:-2740px}} @keyframes agsSlowC{from{background-position-x:0}to{background-position-x:-2320px}} @keyframes agsSlowD{from{background-position-x:-500px}to{background-position-x:-2820px}} @keyframes agsSlowE{from{background-position-x:-300px}to{background-position-x:-2340px}} html body.home .age-turn:not(#iq) h2.age-line,html body.home .age-turn:not(#iq) .age-after{text-shadow:0 0 18px rgba(255,255,255,.9),0 0 2px rgba(255,255,255,.9)} /* Every cloud layer feathered at both edges, so they melt into one another (1 Oct 2026). */ .age-sky .m{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 28%,#000 72%,rgba(0,0,0,0) 100%)!important;mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 28%,#000 72%,rgba(0,0,0,0) 100%)!important} /* Her image beside Sir Ken only waits when his quote is ready to arrive in moments; never hidden otherwise (1 Oct 2026). */ @media (prefers-reduced-motion:no-preference){.js-float .ken-block .ken-face{opacity:1}.ken-block:has(.ken-quote.kq-ready:not(.kq-go)) .ken-face{opacity:0}.ken-block .ken-face.kq-on{opacity:1!important}} /* HER BLUE THREAD (1 Oct 2026): a fine line of blue current that draws itself down, with a bead of light travelling along it. */ .iq-thread{position:relative;z-index:4;width:2px;height:clamp(90px,13vh,150px);margin:0 auto;opacity:0;transition:opacity .9s ease;pointer-events:none} .iq-thread::before{content:"";position:absolute;inset:0;border-radius:2px; background:linear-gradient(180deg,rgba(47,168,224,0) 0%,#2FA8E0 28%,#2FA8E0 72%,rgba(47,168,224,0) 100%); box-shadow:0 0 8px rgba(47,168,224,.55);transform:scaleY(0);transform-origin:top;transition:transform 1.8s cubic-bezier(.2,.8,.2,1)} .iq-thread i{position:absolute;left:50%;top:0;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#fff; box-shadow:0 0 10px 3px rgba(47,168,224,.95),0 0 22px 6px rgba(47,168,224,.4);opacity:0} .iq-thread.on{opacity:1} .iq-thread.on::before{transform:scaleY(1)} .iq-thread.on i{animation:threadBead 2.6s ease-in-out 1.2s infinite} .iq-thread.gone{opacity:0} @keyframes threadBead{0%{top:0;opacity:0}14%{opacity:1}86%{opacity:1}100%{top:100%;opacity:0}} .iq-thread-1{margin-top:clamp(-40px,-4vh,-20px);margin-bottom:6px} .iq-thread-2{margin-top:clamp(18px,3vh,34px)} @media (prefers-reduced-motion:reduce){.iq-thread{opacity:1}.iq-thread::before{transform:none}.iq-thread i{display:none}} /* Her card pictures clear straight away, no white mist over them (1 Oct 2026). */ html body .six-up .up :is(.up-mist,.mist):not(#iq){display:none!important} /* ══ EVERY HEADING IN HER LANGUAGE (1 Oct 2026) ══════════════════════════════ Connecting words: small, spaced, blue capitals on their own line. Her words that sing: below, big, magenta Poiret capitals. */ html body h2.mo-split:not(#iq):not(#iq2):not(#iq3){text-transform:none!important;white-space:normal!important;max-width:none!important} html body h2.mo-split .mo:not(.mo-2):not(#iq):not(#iq2){display:block!important;font-family:var(--head),sans-serif!important;font-weight:500!important; text-transform:uppercase!important;letter-spacing:.22em!important;font-size:clamp(14px,1.45vw,23px)!important;line-height:1.35!important; color:var(--iq-ink,#106FAE)!important;margin:0 auto .5em!important;font-style:normal!important} html body h2.mo-split .mo-2:not(#iq):not(#iq2){display:block!important;font-family:"Poiret One",sans-serif!important;text-transform:uppercase!important; color:#D0008C!important;-webkit-text-stroke:1px #D0008C;letter-spacing:.04em!important;font-size:clamp(34px,4.4vw,70px)!important;line-height:1.06!important;font-weight:400!important;font-style:normal!important} html body h2.mo-split .mo-2 em:not(#iq):not(#iq2):not(#iq3){font-size:1em!important;color:inherit!important;font-family:inherit!important;-webkit-text-stroke:inherit} html body h2.mo-split .mo-2 sup.tm{-webkit-text-stroke:0;font-size:.3em} html body .wis-moment h2.mo-split .mo-2:not(#iq):not(#iq2){font-size:clamp(40px,5.2vw,80px)!important} @media (max-width:600px){html body h2.mo-split .mo:not(.mo-2):not(#iq):not(#iq2){letter-spacing:.14em!important;font-size:13px!important} html body h2.mo-split .mo-2:not(#iq):not(#iq2){font-size:clamp(28px,8.4vw,40px)!important}} /* ══ HER SIX, FLOATING IN (1 Oct 2026) ══ */ .iq-paths{display:grid;gap:clamp(56px,8vw,130px);max-width:1180px;margin:clamp(30px,4vw,60px) auto 0;padding:0 clamp(18px,4vw,48px)} .iq-path{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4.5vw,72px);align-items:center;text-decoration:none;color:inherit} .iq-path.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)} .iq-path.flip .iq-path-pic{order:2} .iq-path-pic{display:block;aspect-ratio:3/2;border-radius:28px;overflow:hidden;box-shadow:0 40px 90px -46px rgba(212,33,187,.55),0 0 0 1px rgba(255,255,255,.8)} .iq-path-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)} .iq-path:hover .iq-path-pic img,.iq-path:focus-visible .iq-path-pic img{transform:scale(1.04)} .iq-path-say{display:flex;flex-direction:column;gap:12px} .iq-path.flip .iq-path-say{align-items:flex-end;text-align:right} .iq-path-name{font-family:"Poiret One",sans-serif;font-weight:400;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:1px #D0008C;letter-spacing:.04em;font-size:clamp(36px,4.2vw,66px);line-height:1.02} .iq-path-who{font-style:normal;font-family:var(--head),sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(12px,1.1vw,16px);color:var(--iq-ink,#106FAE)} .iq-path-line{font-family:var(--head),sans-serif;font-weight:400;font-size:clamp(20px,1.9vw,30px);line-height:1.3;color:var(--iq-ink,#106FAE);max-width:22ch} .iq-path-go{margin-top:6px;font-family:var(--display),sans-serif;font-weight:500;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#D0008C} .iq-path-go::after{content:" \2192"} @media (max-width:760px){ .iq-path,.iq-path.flip{grid-template-columns:1fr} .iq-path.flip .iq-path-pic{order:0} .iq-path .iq-path-say,.iq-path.flip .iq-path-say{align-items:center;text-align:center} } @media (prefers-reduced-motion:no-preference){ .iq-path .iq-path-pic{opacity:0;transform:translateY(44px) scale(.97);transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)} .iq-path .iq-path-say > *{opacity:0;transform:translateY(14px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.8,.2,1)} .iq-path.is-in .iq-path-pic{opacity:1;transform:none} .iq-path.is-in .iq-path-say > *{opacity:1;transform:none} .iq-path.is-in .iq-path-name{transition-delay:.6s} .iq-path.is-in .iq-path-who{transition-delay:1.3s} .iq-path.is-in .iq-path-line{transition-delay:2s} .iq-path.is-in .iq-path-go{transition-delay:2.8s} .js-float .iq-path.float{opacity:1!important;transform:none!important} } html body.home:not(.iq-age-done) .iq-paths:not(#iq){opacity:0} html body.home .iq-paths:not(#iq){transition:opacity 1.6s ease} /* THE SIX, THREE BESIDE THREE (hers, 1 Oct 2026: *the first three next to each other, and then the others underneath… shorter and more directing*). Each still floats in, one after the other along the row. */ html body.home .iq-paths:not(#iq){grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,4vw,64px) clamp(18px,2.6vw,40px);max-width:1240px} html body.home .iq-path:not(#iq),html body.home .iq-path.flip:not(#iq){grid-template-columns:1fr;gap:16px;align-items:start} html body.home .iq-path.flip .iq-path-pic:not(#iq){order:0} html body.home .iq-path .iq-path-say:not(#iq),html body.home .iq-path.flip .iq-path-say:not(#iq){align-items:center;text-align:center;gap:8px} html body.home .iq-path-pic:not(#iq){aspect-ratio:4/3;border-radius:22px} html body.home .iq-path-name:not(#iq){font-size:clamp(26px,2.5vw,40px)} html body.home .iq-path-who:not(#iq){font-size:clamp(11px,.9vw,13px);letter-spacing:.18em} html body.home .iq-path{--d:0s} html body.home .iq-path:nth-child(3n+2){--d:.45s} html body.home .iq-path:nth-child(3n+3){--d:.9s} @media (max-width:760px){ html body.home .iq-paths:not(#iq){grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px;padding:0 16px} html body.home .iq-path:nth-child(3n+2),html body.home .iq-path:nth-child(3n+3){--d:0s} html body.home .iq-path:nth-child(2n){--d:.45s} html body.home .iq-path-name:not(#iq){font-size:clamp(20px,6vw,28px)} } @media (prefers-reduced-motion:no-preference){ html body.home .iq-path .iq-path-pic:not(#iq){transition-delay:var(--d)} html body.home .iq-path.is-in .iq-path-name:not(#iq){transition-delay:calc(var(--d) + .6s)} html body.home .iq-path.is-in .iq-path-who:not(#iq){transition-delay:calc(var(--d) + 1.1s)} html body.home .iq-path.is-in .iq-path-line:not(#iq){transition-delay:calc(var(--d) + 1.6s)} html body.home .iq-path.is-in .iq-path-go:not(#iq){transition-delay:calc(var(--d) + 2s)} } /* HER BLUE LINE COMES OUT OF THE GIRL (hers, 1 Oct 2026: *when those lines are dropping out, put the blue line between the image it's dropping out of*). It rises out of the dream as the Imagine lines begin, and stays while they fall. */ html body.home .iq-thread-1:not(#iq){height:clamp(130px,19vh,220px);margin-top:clamp(-110px,-11vh,-60px);margin-bottom:8px} html body.home .iq-thread-1:not(#iq){height:clamp(190px,27vh,300px);margin-bottom:-30px} /* EVERY AGE SPEAKS (1 Oct 2026): five voices, three beside three on a big screen, each floating in along the row; the first lines show, the rest is one press away. */ html body.home .said.said-ages:not(#iq){display:flex!important;flex-wrap:wrap;justify-content:center;max-width:1200px!important;gap:clamp(18px,2.2vw,28px)!important} html body.home .said.said-ages > .quote:not(#iq){flex:0 1 calc((100% - 2 * clamp(18px,2.2vw,28px)) / 3);min-width:260px;display:flex;flex-direction:column;gap:12px;padding:44px 28px 26px} html body.home .said-ages .said-age{font-family:var(--head),sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:#D0008C} html body.home .said-ages .quote p:not(#iq){margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden} html body.home .said-ages .quote.open p:not(#iq){-webkit-line-clamp:unset;display:block} html body.home .said-ages .said-more{align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;font-family:var(--head),sans-serif;font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--iq-ink,#106FAE)} html body.home .said-ages .said-more:focus-visible{outline:2px solid #D0008C;outline-offset:4px} html body.home .said-ages cite{margin-top:auto} html body.home .said-ages .quote:nth-child(3n+2){transition-delay:.4s!important} html body.home .said-ages .quote:nth-child(3n+3){transition-delay:.8s!important} @media (max-width:700px){html body.home .said.said-ages > .quote:not(#iq){flex-basis:100%;min-width:0}html body.home .said-ages .quote:nth-child(n){transition-delay:0s!important}} /* JUST SOME OF THE BENEFITS (hers, 1 Oct 2026): her nine, right at the top, each a glowing orb whose drawing traces itself in. */ .iq-benefits{position:relative;max-width:1240px;margin:clamp(40px,6vw,90px) auto clamp(20px,3vw,40px);padding:0 clamp(16px,4vw,48px);text-align:center} .iq-ben-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4.4vw,70px) clamp(22px,3vw,48px);margin-top:clamp(28px,3.4vw,52px)} .iq-ben{display:flex;flex-direction:column;align-items:center;gap:12px} .iq-ben-orb{width:clamp(86px,7.4vw,112px);height:auto;overflow:visible;filter:drop-shadow(0 14px 22px rgba(212,33,187,.22)) drop-shadow(0 0 14px rgba(47,168,224,.28))} .iq-ben h3{margin:6px 0 0;font-family:"Poiret One",sans-serif;font-weight:400;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:.8px #D0008C;letter-spacing:.04em;font-size:clamp(24px,2.1vw,33px);line-height:1.05;text-wrap:balance} .iq-ben p{margin:0;max-width:32ch;font-family:var(--head),sans-serif;font-weight:400;font-size:clamp(16px,1.15vw,18px);line-height:1.6;color:var(--iq-body,#2A6594)} @media (prefers-reduced-motion:no-preference){ .iq-ben{--d:calc(mod(var(--i),3) * .35s)} .iq-ben .iq-ben-orb{opacity:0;transform:translateY(26px) scale(.86);transition:opacity 1.2s ease var(--d),transform 1.6s cubic-bezier(.2,.8,.2,1) var(--d)} .iq-ben .mark > *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.45,.05,.2,1) calc(var(--d) + .7s)} .iq-ben h3,.iq-ben p{opacity:0;transform:translateY(12px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.8,.2,1)} .iq-ben h3{transition-delay:calc(var(--d) + 1s)} .iq-ben p{transition-delay:calc(var(--d) + 1.6s)} .iq-ben.is-in .iq-ben-orb,.iq-ben.is-in h3,.iq-ben.is-in p{opacity:1;transform:none} .iq-ben.is-in .mark > *{stroke-dashoffset:0} .iq-ben.is-in .iq-ben-orb{animation:iqOrbFloat 7s ease-in-out calc(var(--d) + 2.6s) infinite alternate} .js-float .iq-ben.float{opacity:1!important;transform:none!important} } @keyframes iqOrbFloat{from{translate:0 0}to{translate:0 -7px}} @media (max-width:700px){ .iq-ben-grid{grid-template-columns:1fr;gap:26px;text-align:left} .iq-ben{display:grid;grid-template-columns:78px 1fr;column-gap:16px;row-gap:4px;align-items:start} .iq-ben-orb{grid-row:1/3;width:78px} .iq-ben h3{margin:8px 0 0;font-size:24px} .iq-ben p{font-size:16px;max-width:none} .iq-ben{--d:0s!important} } @media (prefers-reduced-motion:no-preference){.iq-benefits .iq-ben{--d:0s}.iq-benefits .iq-ben:nth-child(3n+2){--d:.35s}.iq-benefits .iq-ben:nth-child(3n+3){--d:.7s}} @media (max-width:700px){.iq-benefits .iq-ben:nth-child(n){--d:0s}} html body.home .iq-benefits .iq-ben h3:not(#iq):not(#iq2){font-family:"Poiret One",sans-serif!important;font-weight:400!important;-webkit-text-stroke:.9px #D0008C;letter-spacing:.05em;font-size:clamp(26px,2.3vw,36px)!important;line-height:1.05!important;color:#D0008C!important} @media (max-width:700px){html body.home .iq-benefits .iq-ben h3:not(#iq):not(#iq2){font-size:25px!important}} /* HER PALE BLUE TILES (hers, 1 Oct 2026: *I actually love what I had. Do it like that*). Small and elegant: a pale blue pane, a magenta title, one line. They float in along the row, and a fine light passes across each one as it lands. */ .iq-tiles{position:relative;z-index:5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1080px;margin:0 auto;padding:0 clamp(16px,3vw,32px)} .iq-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;border-radius:14px;text-align:left;text-decoration:none;color:inherit; background:linear-gradient(165deg,rgba(232,243,252,.94),rgba(214,234,249,.9));border:1px solid rgba(255,255,255,.95); box-shadow:0 18px 40px -26px rgba(16,111,174,.45),inset 0 1px 0 rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .iq-tile b{font-family:var(--head),"Montserrat",sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#D0008C;line-height:1.35} .iq-tile b::before{content:"\2192";display:block;margin-bottom:6px;font-weight:400;letter-spacing:0;color:#D0008C} .iq-tile span{font-family:var(--head),"Montserrat",sans-serif;font-weight:400;font-size:14.5px;line-height:1.5;color:var(--iq-ink,#106FAE)} .iq-tile i{font-style:normal;font-family:var(--head),"Montserrat",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--iq-soft,#3A76A6)} .iq-tile::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));transform:skewX(-18deg);opacity:0} a.iq-tile{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease} a.iq-tile:hover,a.iq-tile:focus-visible{transform:translateY(-3px);box-shadow:0 24px 44px -24px rgba(208,0,140,.4),inset 0 1px 0 #fff} a.iq-tile:focus-visible{outline:2px solid #D0008C;outline-offset:3px} @media (prefers-reduced-motion:no-preference){ .iq-tile{--d:calc(var(--i) * .16s);opacity:0;transform:translateY(18px)} .iq-tile.is-in{opacity:1;transform:none;transition:opacity 1s ease var(--d),transform 1.2s cubic-bezier(.2,.8,.2,1) var(--d)} .iq-tile.is-in::after{animation:iqTileLight 1.6s ease calc(var(--d) + .7s) 1 both} a.iq-tile.is-in:hover{transform:translateY(-3px);transition-delay:0s} .js-float .iq-tile.float{opacity:0} .js-float .iq-tile.float.is-in{opacity:1!important} } @keyframes iqTileLight{0%{left:-60%;opacity:0}20%{opacity:1}100%{left:130%;opacity:0}} /* On Wisdom they sit across the foot of her picture, the way hers did. */ .iq-tiles-wisdom{margin-top:clamp(-70px,-5vw,-34px);margin-bottom:clamp(28px,4vw,56px)} /* At the foot of the home page: six, three beside three, each the door to its page. */ .iq-tiles-home{max-width:1080px;margin:clamp(50px,7vw,100px) auto clamp(30px,4vw,60px);text-align:center} .iq-tiles-home .iq-tiles{margin-top:clamp(22px,3vw,40px)} @media (max-width:760px){ .iq-tiles{grid-template-columns:1fr 1fr;gap:10px;padding:0 16px} .iq-tiles.n3{grid-template-columns:1fr} .iq-tile{padding:15px 15px 17px} .iq-tile span{font-size:14px} .iq-tiles-wisdom{margin-top:16px} } .iq-tiles-wisdom{margin-top:clamp(-64px,-4.4vw,-30px)!important;margin-bottom:clamp(10px,2vw,24px)!important} @media (max-width:760px){.iq-tiles-wisdom{margin-top:14px!important}} @media (max-width:480px){html body .wis-arrive .plate-brill .brill-big,html body .wis-arrive .plate-brill b,html body .wis-arrive .plate-brill strong,html body .wis-arrive .plate-brill em{font-size:min(1em,12.4vw)!important}} @media (max-width:480px){html body .wis-arrive .plate-brill em{font-size:12.2vw!important}} /* ONE IDEA, CARRIED ALL THE WAY (preview, 1 Oct 2026): a glowing idea travels her five steps on her blue thread, one moment at a time, and ignites into the Innovation Sensation. */ .iq-idea{position:relative;max-width:1100px;margin:clamp(40px,6vw,90px) auto;padding:0 clamp(16px,4vw,40px);text-align:center} .iq-idea-stage{position:relative;height:clamp(250px,36vw,440px);margin-top:clamp(6px,1.5vw,18px)} .iq-idea-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .iq-idea-say{display:grid;min-height:clamp(150px,13vw,190px);align-items:start;margin-top:-6px} .iq-idea-m{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1);pointer-events:none} .iq-idea-m.on{opacity:1;transform:none;transition-delay:.35s} .iq-idea-m b{font-family:"Poiret One",sans-serif;font-weight:400;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:.9px #D0008C;letter-spacing:.05em;font-size:clamp(38px,5vw,70px);line-height:1} .iq-idea-m span{max-width:34ch;font-family:var(--head),"Montserrat",sans-serif;font-weight:400;font-size:clamp(18px,1.6vw,23px);line-height:1.5;color:var(--iq-ink,#106FAE)} .iq-idea-m.open b{font-family:var(--head),"Montserrat",sans-serif;-webkit-text-stroke:0;font-weight:500;font-size:clamp(13px,1.1vw,16px);letter-spacing:.24em;color:var(--iq-ink,#106FAE)} .iq-idea-m.open span{font-family:"Poiret One",sans-serif;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:.8px #D0008C;font-size:clamp(30px,3.6vw,52px);line-height:1.1;max-width:20ch;letter-spacing:.04em} .iq-idea-m.spark b{font-size:clamp(32px,4.2vw,60px)} .iq-idea-m .tm{font-size:.4em;vertical-align:super;-webkit-text-stroke:0} .iq-idea-steps{list-style:none;margin:clamp(18px,2.4vw,30px) auto 0;padding:0;display:flex;justify-content:space-between;max-width:720px;position:relative} .iq-idea-steps::before{content:"";position:absolute;left:8%;right:8%;top:9px;height:1px;background:linear-gradient(90deg,rgba(47,168,224,0),#2FA8E0 15%,#2FA8E0 85%,rgba(47,168,224,0));box-shadow:0 0 6px rgba(47,168,224,.5)} .iq-idea-steps li{flex:1;display:flex;justify-content:center} .iq-idea-steps button{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;padding:0 4px;cursor:pointer;color:var(--iq-soft,#3A76A6)} .iq-idea-steps i{display:block;width:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#DCEFFB 60%,#BFE3F7);box-shadow:0 0 0 1px rgba(47,168,224,.45);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease,background .6s ease} .iq-idea-steps span{font-family:var(--head),"Montserrat",sans-serif;font-weight:500;font-size:clamp(10px,.95vw,12.5px);letter-spacing:.2em;text-transform:uppercase} .iq-idea-steps button.past i{background:radial-gradient(circle at 35% 30%,#fff,#F6C9EE 55%,#E23ACB)} .iq-idea-steps button.on i{transform:scale(1.35);background:radial-gradient(circle at 35% 30%,#fff,#F6C9EE 45%,#E23ACB);box-shadow:0 0 0 1px rgba(226,58,203,.6),0 0 16px 4px rgba(226,58,203,.45)} .iq-idea-steps button.on span{color:#D0008C} .iq-idea-steps button:focus-visible{outline:2px solid #D0008C;outline-offset:6px;border-radius:8px} .iq-idea-go{margin:clamp(26px,3vw,40px) 0 0;opacity:0;transform:translateY(10px);transition:opacity 1s ease .9s,transform 1.2s cubic-bezier(.2,.8,.2,1) .9s} .iq-idea.done .iq-idea-go{opacity:1;transform:none} .iq-idea.still .iq-idea-say{display:flex;flex-direction:column;gap:28px} .iq-idea.still .iq-idea-m{opacity:1;transform:none} @media (max-width:600px){.iq-idea-steps span{letter-spacing:.08em;font-size:9.5px}.iq-idea-say{min-height:200px}} /* EACH IMAGINE LINE IN TWO BEATS (hers, 1 Oct 2026: *I want the top bit and then the second bit to come in … do that first line and then have the second one coming in*). The first half lands, then her magenta half arrives; each line now holds long enough to read both. */ @media (prefers-reduced-motion:no-preference){ .imagine-stage p{animation-name:floatLineTwo!important;animation-duration:32s!important;animation-delay:calc(var(--n) * 6.4s)!important} .imagine-stage p.found{animation-name:imagineStay!important;animation-duration:1700ms!important} .imagine-stage p em{display:inline-block;animation:secondBeat 32s linear calc(var(--n) * 6.4s) 1 both} .imagine:not(.go) .imagine-stage p em{animation-play-state:paused!important} .imagine.go .imagine-stage p em{animation-play-state:running!important} @keyframes floatLineTwo{ 0% {opacity:0;transform:translateY(-60px)} 1.9% {opacity:1;transform:translateY(0)} 18.4%{opacity:1;transform:translateY(0)} 20% {opacity:0;transform:translateY(54px)} 100% {opacity:0;transform:translateY(54px)}} @keyframes secondBeat{ 0%,5.6%{opacity:0;transform:translateY(16px)} 9% {opacity:1;transform:none} 100% {opacity:1;transform:none}} } /* WISDOM, JOYFUL (preview, 1 Oct 2026): her pictures large, one moment each, and her joy in motion. */ .wn-joy{position:relative;overflow:hidden;max-width:none;margin:0 auto;padding:clamp(60px,8vw,120px) clamp(16px,4vw,48px);text-align:center} .wn-joy .wn-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .wn-joy > *:not(.wn-fx){position:relative;z-index:1} .wn-joy h2,.wn-letter h2,.wn-close h2{margin:0 auto;max-width:18ch} .wn-line{max-width:34ch;margin:clamp(16px,2vw,26px) auto 0;font-family:var(--head),"Montserrat",sans-serif;font-size:clamp(19px,1.7vw,25px);line-height:1.5;color:var(--iq-ink,#106FAE)} .wn-gold{background:radial-gradient(ellipse at 50% 40%,rgba(255,226,140,.28),rgba(255,226,140,0) 65%)} .wn-balloons{padding-bottom:clamp(70px,9vw,140px)} .wn-tiles{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1180px;margin-top:clamp(30px,4vw,56px)} .wn-letter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,60px);max-width:1100px;margin:clamp(40px,6vw,90px) auto;padding:0 clamp(16px,4vw,40px)} .wn-letter img{width:100%;height:auto;display:block;-webkit-mask-image:radial-gradient(ellipse 70% 72% at 50% 48%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 70% 72% at 50% 48%,#000 60%,transparent 100%)} .wn-letter-say{text-align:left} .wn-letter-say h2{margin:0;max-width:none} .wn-letter-say .wn-line{margin-left:0} .wn-loren{max-width:980px;margin:clamp(60px,8vw,120px) auto;padding:0 clamp(16px,4vw,40px);text-align:center} .wn-loren blockquote{margin:0;border:0;padding:0} .wn-loren p{margin:0;font-family:var(--head),"Montserrat",sans-serif;font-weight:300;font-size:clamp(22px,2.3vw,34px);line-height:1.45;color:var(--iq-ink,#106FAE)} .wn-loren .wl{display:block} .wn-loren .wl-big{margin-top:.5em;font-family:"Poiret One",sans-serif;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:.8px #D0008C;font-size:1.25em;line-height:1.2;letter-spacing:.03em} .wn-loren cite{display:block;margin-top:22px;font-style:normal;font-family:var(--head),sans-serif;font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--iq-soft,#3A76A6)} @media (prefers-reduced-motion:no-preference){ .wn-loren .wl{opacity:0;transform:translateY(14px);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)} .wn-loren.is-in .wl{opacity:1;transform:none} .wn-loren.is-in .wl:nth-child(2){transition-delay:1.6s} .wn-loren.is-in .wl:nth-child(3){transition-delay:4.4s} .wn-loren cite{opacity:0;transition:opacity 1s ease 6s}.wn-loren.is-in cite{opacity:1} } html body .wn-said.said-ages:not(#iq){justify-content:center} html body .wn-said.said-ages > .quote:not(#iq){flex:0 1 420px} html body:not(.home) .said-ages .quote p:not(#iq){margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden} html body:not(.home) .said-ages .quote.open p:not(#iq){-webkit-line-clamp:unset;display:block} html body:not(.home) .said-ages .said-age{font-family:var(--head),sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:#D0008C} html body:not(.home) .said-ages .said-more{align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;font-family:var(--head),sans-serif;font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--iq-ink,#106FAE)} html body:not(.home) .wn-said > .quote:not(#iq){display:flex;flex-direction:column;gap:12px} .wn-close{max-width:900px;margin:clamp(60px,8vw,110px) auto clamp(40px,5vw,70px);padding:0 16px;text-align:center} .wn-bolder{margin:clamp(18px,2vw,28px) 0 0;font-family:"Poiret One",sans-serif;text-transform:uppercase;color:var(--iq-ink,#106FAE);font-size:clamp(26px,2.8vw,40px);letter-spacing:.05em} .wn-bolder em{font-style:normal;color:#D0008C} .wn-price{margin:clamp(20px,2.4vw,32px) 0 18px;font-family:var(--head),sans-serif;font-weight:300;font-size:clamp(34px,3.4vw,48px);color:var(--iq-ink,#106FAE)} .wn-price span{font-size:.38em;letter-spacing:.2em;text-transform:uppercase;color:var(--iq-soft,#3A76A6)} @media (max-width:760px){ .wn-tiles{grid-template-columns:1fr 1fr} .wn-letter{grid-template-columns:1fr;text-align:center} .wn-letter-say{text-align:center}.wn-letter-say .wn-line{margin-left:auto} } /* Wisdom preview, second pass (1 Oct 2026): no confetti, no balloons; a little gold for the Golden Age, and the lives reinvented in retirement. */ .wn-gold{background:radial-gradient(ellipse at 50% 30%,rgba(255,214,110,.32),rgba(255,214,110,0) 62%),linear-gradient(180deg,rgba(255,248,228,0),rgba(255,244,214,.55) 50%,rgba(255,248,228,0))} .wn-gold h2 em,.wn-gold .mo-2{color:#C9900A!important;-webkit-text-stroke-color:#C9900A!important;background:linear-gradient(100deg,#B67A00,#F2C14E 40%,#FFE7A3 50%,#E0A82E 60%,#B67A00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .wn-began{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1120px;margin:clamp(34px,4vw,60px) auto 0;text-align:left} .wn-b{display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid rgba(232,190,90,.55);box-shadow:0 18px 40px -28px rgba(182,122,0,.55)} .wn-b b{font-family:"Poiret One",sans-serif;font-weight:400;font-size:clamp(46px,4.4vw,64px);line-height:1;background:linear-gradient(100deg,#B67A00,#F2C14E 45%,#FFE7A3 55%,#D69A1E);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.6px #C9900A} .wn-b span{font-family:var(--head),"Montserrat",sans-serif;font-size:15px;line-height:1.5;color:var(--iq-ink,#106FAE)} .wn-b em{font-style:italic} .wn-study{max-width:52ch;margin:clamp(30px,3.4vw,46px) auto 0;font-family:var(--head),sans-serif;font-size:15px;line-height:1.6;color:var(--iq-soft,#3A76A6)} .wn-study cite{display:block;margin-top:6px;font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.8} @media (prefers-reduced-motion:no-preference){.wn-b{opacity:0;transform:translateY(16px)}.wn-b.is-in{opacity:1;transform:none;transition:opacity 1s ease calc(var(--i)*.25s),transform 1.2s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.25s)}.js-float .wn-b.float{opacity:0}.js-float .wn-b.float.is-in{opacity:1!important}} @media (max-width:760px){.wn-began{grid-template-columns:1fr 1fr}} /* There Is No Limit: eight lives begun in retirement, gold ages, two rows of four (1 Oct 2026). */ .wn-nolimit{margin:clamp(40px,5vw,70px) 0 0;font-family:var(--head),sans-serif;font-weight:500;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--iq-ink,#106FAE)} .wn-nolimit em{font-style:normal;color:#B67A00} .wn-began{margin-top:20px!important} .wn-b i{font-style:normal;font-family:var(--head),sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#B67A00} html body .wn-gold p.wn-nolimit:not(#iq):not(#iq2){text-align:center!important;text-transform:uppercase!important;font-size:13px!important;letter-spacing:.24em!important;max-width:none!important;margin:clamp(40px,5vw,70px) auto 0!important;font-weight:500!important} /* 1 Oct 2026, from her phone: the Age line fits the screen, the figures float in one at a time, her Innovation Sensation words arrive in moments. */ @media (max-width:520px){ html body.home .age-turn .age-line:not(#iq):not(#iq2){max-width:100%!important;width:auto!important;padding:0 14px!important;box-sizing:border-box} html body.home .age-turn .age-line .age-stay:not(#iq),html body.home .age-turn .age-line .age-words:not(#iq){left:auto!important;right:auto!important;max-width:100%!important;width:100%!important;white-space:normal!important;margin-left:0!important;margin-right:0!important} html body.home .age-turn .age-line .age-words:not(#iq):not(#iq2){font-size:min(34px,8.2vw)!important} html body.home .age-turn .age-line .age-words *{white-space:normal!important;max-width:100%} } @media (prefers-reduced-motion:no-preference){ html body.home .lost .lost-one:not(#iq){transition:opacity 1.6s ease-out calc(var(--n,0) * 1.3s),transform 1.9s cubic-bezier(.2,.85,.2,1) calc(var(--n,0) * 1.3s)!important} html body.home .lost-one:nth-child(1){--n:0}html body.home .lost-one:nth-child(2){--n:1}html body.home .lost-one:nth-child(3){--n:2}html body.home .lost-one:nth-child(4){--n:3} .sens-says .sm{display:inline-block;opacity:0;transform:translateY(12px);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)} .sens-says.sm-go .sm{opacity:1;transform:none} .sens-says.sm-go .sm:nth-child(2){transition-delay:2s} .sens-says.sm-go .sm:nth-child(3){transition-delay:4.4s} } .sens-says .sm:last-child{display:block;margin-top:.6em;font-family:"Poiret One",sans-serif;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:.7px #D0008C;font-size:1.5em;letter-spacing:.05em} .wn-first{padding-top:clamp(40px,5vw,70px)!important;padding-bottom:clamp(30px,4vw,60px)!important} /* Wisdom preview, third pass (1 Oct 2026): Sophia Loren up and treated like Sir Ken; a drifting river of her Wisdom worlds; her pictures breathe. */ .wn-loren2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,4vw,64px);max-width:1180px;margin:clamp(40px,6vw,90px) auto;padding:0 clamp(16px,4vw,40px)} .wn-loren-face{position:relative;aspect-ratio:4/3;border-radius:28px;overflow:hidden;box-shadow:0 40px 90px -46px rgba(212,33,187,.55)} .wn-loren-face img{width:100%;height:100%;object-fit:cover;display:block} .wn-loren2 blockquote{margin:0;padding:0;border:0;text-align:left} .wn-loren2 p{margin:0;display:flex;flex-direction:column;gap:.45em} .wn-loren2 .wl{display:block} .wn-loren2 .wl-small{font-family:var(--head),sans-serif;font-weight:500;font-size:clamp(13px,1.1vw,16px);letter-spacing:.24em;text-transform:uppercase;color:var(--iq-ink,#106FAE)} .wn-loren2 .wl-mid{font-family:var(--head),"Montserrat",sans-serif;font-weight:300;font-size:clamp(21px,2vw,30px);line-height:1.4;color:var(--iq-ink,#106FAE)} .wn-loren2 .wl-big{font-family:"Poiret One",sans-serif;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:.9px #D0008C;font-size:clamp(28px,3vw,46px);line-height:1.12;letter-spacing:.03em} .wn-loren2 cite{display:block;margin-top:22px;font-style:normal;font-family:var(--head),sans-serif;font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--iq-soft,#3A76A6)} @media (prefers-reduced-motion:no-preference){ .wn-loren-face{opacity:0;transform:translateY(30px) scale(.97);transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.8,.2,1)} .wn-loren-face img{animation:wnBreathe 26s ease-in-out infinite alternate} .wn-loren2 .wl,.wn-loren2 cite{opacity:0;transform:translateY(14px);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)} .wn-loren2.is-in .wn-loren-face,.wn-loren2.is-in .wl,.wn-loren2.is-in cite{opacity:1;transform:none} .wn-loren2.is-in .wl-small{transition-delay:.9s}.wn-loren2.is-in .wl-mid{transition-delay:2.1s}.wn-loren2.is-in .wl-big{transition-delay:4.8s}.wn-loren2.is-in cite{transition-delay:6.4s} .js-float .wn-loren2.float{opacity:1!important;transform:none!important} html body .plate.across img,html body .plate-across img{animation:wnBreathe 30s ease-in-out infinite alternate;transform-origin:50% 45%} } @keyframes wnBreathe{from{transform:scale(1)}to{transform:scale(1.07)}} .wn-up{padding-top:clamp(30px,4vw,60px)!important} .wn-river{position:relative;overflow:hidden;margin:clamp(40px,5vw,80px) 0;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .wr-track{display:flex;gap:16px;width:max-content} .wr-i{flex:0 0 auto;width:clamp(220px,24vw,360px);aspect-ratio:3/2;border-radius:20px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(16,111,174,.45)} .wr-i img{width:100%;height:100%;object-fit:cover;display:block} @media (prefers-reduced-motion:no-preference){ .wr-track{animation:wrDrift 120s linear infinite} .wr-i:nth-child(odd) img{animation:wnBreathe 18s ease-in-out infinite alternate} .wr-i:nth-child(even) img{animation:wnBreathe 22s ease-in-out -9s infinite alternate} } @keyframes wrDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (max-width:760px){ .wn-loren2{grid-template-columns:1fr} .wn-loren2 blockquote{text-align:center} .wr-i{width:62vw} .wr-track{animation-duration:80s} } /* How IMAGENIQ is said (hers, 1 Oct 2026, option A). */ html body.home p.iq-said-as:not(#iq){display:flex;flex-direction:column;align-items:center;gap:10px;margin:clamp(28px,3.4vw,48px) auto 0;max-width:none;text-align:center} .iq-said-as b{font-family:"Poiret One",sans-serif;font-weight:400;font-size:clamp(40px,5vw,72px);letter-spacing:.12em;color:#D0008C;-webkit-text-stroke:.9px #D0008C;line-height:1} .iq-said-how{font-family:var(--head),sans-serif;font-weight:500;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--iq-soft,#3A76A6)} .iq-said-parts{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 14px;font-family:var(--head),"Montserrat",sans-serif;font-weight:300;font-size:clamp(18px,1.7vw,24px);color:var(--iq-ink,#106FAE)} .iq-said-parts em{font-style:normal;font-weight:600;color:#D0008C;letter-spacing:.04em} .iq-said-parts i{font-style:normal;color:#2FA8E0} .wn-tiles-down{margin:clamp(10px,2vw,30px) 0 clamp(30px,4vw,60px)} .wn-tiles-down .iq-tiles-wisdom{margin-top:0!important} /* Wisdom on a phone (1 Oct 2026; hers: *the heading looks terrible here*): her picture first, whole, and her words beneath it on clean ground, never over a face. */ @media (max-width:760px){ html body .wis-arrive:not(#iq){display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important} html body .wis-arrive .plate-words:not(#iq):not(#iq2){position:static!important;inset:auto!important;transform:none!important;width:auto!important;max-width:none!important;margin:0!important;padding:26px 18px 6px!important;text-align:center!important;background:none!important} html body .wis-arrive .plate-brill:not(#iq):not(#iq2){text-align:center!important;margin:0!important;line-height:1.05!important} html body .wis-arrive .plate-said:not(#iq):not(#iq2){text-align:center!important;margin:14px auto 0!important;font-size:15px!important;letter-spacing:.14em!important} html body .wis-arrive .plate-said::before,html body .wis-arrive .plate-brill::after{margin-left:auto!important;margin-right:auto!important} .wn-began{grid-template-columns:1fr!important} .wn-b{display:grid!important;grid-template-columns:76px 1fr;column-gap:14px;align-items:start} .wn-b b{grid-row:1/3;font-size:50px!important} .wn-b i{align-self:end} } /* WISDOM, REBUILT (1 Oct 2026, second pass). Gold is a fine thread, never a block. */ .wn-hero{position:relative} .wn-hero .wn-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2} .wn-hero .plate-words{z-index:3} /* a glint of gold passing through BRILLIANCE */ @media (prefers-reduced-motion:no-preference){ html body .wn-hero .plate-brill em:not(#iq):not(#iq2){background:linear-gradient(100deg,#D0008C 0%,#D0008C 40%,#FFD27A 48%,#FFF1C4 50%,#FFD27A 52%,#D0008C 60%,#D0008C 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wnGlint 9s ease-in-out 1.5s infinite} } @keyframes wnGlint{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}} /* the small spark over every heading */ .wn-spark{display:block;width:14px;height:14px;margin:0 auto 14px;background:radial-gradient(circle,#FFF1C4 0,#FFC94A 35%,rgba(255,201,74,0) 70%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 6px rgba(255,190,60,.8))} @media (prefers-reduced-motion:no-preference){.wn-spark{animation:wnTwinkle 3.6s ease-in-out infinite}} @keyframes wnTwinkle{0%,100%{transform:scale(.8) rotate(0);opacity:.7}50%{transform:scale(1.15) rotate(45deg);opacity:1}} .wn-first,.wn-listen2,.wn-golden,.wn-close{max-width:1180px;margin:0 auto;padding:clamp(56px,7vw,110px) clamp(16px,4vw,40px) 0;text-align:center;position:relative} .wn-first h2,.wn-listen2 h2,.wn-golden h2,.wn-close h2{margin:0 auto;max-width:18ch} /* Sophia Loren, as a quote: her mark, her first line in pink, a picture of somebody walking toward the light */ .wn-loren3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,4.5vw,72px);max-width:1180px;margin:clamp(56px,7vw,110px) auto 0;padding:0 clamp(16px,4vw,40px)} .wn-loren-pic{aspect-ratio:4/5;border-radius:28px;overflow:hidden;box-shadow:0 40px 90px -46px rgba(212,33,187,.55)} .wn-loren-pic img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;display:block} .wn-loren3 blockquote{position:relative;margin:0;padding:0;border:0;text-align:left} .wn-q{position:absolute;left:-.12em;top:-.62em;font-family:"Poiret One",Georgia,serif;font-size:clamp(120px,12vw,190px);line-height:1;color:#D0008C;opacity:.22;pointer-events:none} .wn-loren3 p{position:relative;margin:0;display:flex;flex-direction:column;gap:.5em} .wn-loren3 .wl{display:block} .wn-loren3 .wl-pink{font-family:"Poiret One",sans-serif;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:.9px #D0008C;font-size:clamp(30px,3.2vw,48px);line-height:1.05;letter-spacing:.04em} .wn-loren3 .wl-mid{font-family:var(--head),"Montserrat",sans-serif;font-weight:300;font-size:clamp(20px,1.9vw,28px);line-height:1.45;color:var(--iq-ink,#106FAE)} .wn-loren3 .wl-big{font-family:var(--head),"Montserrat",sans-serif;font-weight:500;font-size:clamp(20px,1.9vw,28px);line-height:1.4;color:#D0008C} .wn-loren3 cite{display:flex;align-items:center;gap:12px;margin-top:24px;font-style:normal;font-family:var(--head),sans-serif;font-weight:500;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--iq-ink,#106FAE)} .wn-loren3 cite::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,#E0A82E,#FFD27A)} @media (prefers-reduced-motion:no-preference){ .wn-loren-pic{opacity:0;transform:translateY(30px);transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.8,.2,1)} .wn-loren-pic img{animation:wnBreathe 26s ease-in-out infinite alternate} .wn-loren3 .wl,.wn-loren3 cite,.wn-q{opacity:0;transform:translateY(14px);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)} .wn-loren3.is-in .wn-loren-pic,.wn-loren3.is-in .wl,.wn-loren3.is-in cite{opacity:1;transform:none} .wn-loren3.is-in .wn-q{opacity:.22;transform:none;transition-delay:.5s} .wn-loren3.is-in .wl-pink{transition-delay:1s}.wn-loren3.is-in .wl-mid{transition-delay:2.6s}.wn-loren3.is-in .wl-big{transition-delay:5.4s}.wn-loren3.is-in cite{transition-delay:7s} .js-float .wn-loren3.float{opacity:1!important;transform:none!important} } /* the Golden Age: gold in the word, the ages and a little dust, the ground stays hers */ .wn-golden .wn-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .wn-golden > *:not(.wn-fx){position:relative;z-index:1} html body .wn-golden h2 em,html body .wn-golden .mo-2{background:linear-gradient(100deg,#B67A00,#F2C14E 40%,#FFE7A3 50%,#E0A82E 60%,#B67A00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.6px #C9900A} html body .wn-golden .wn-b{background:rgba(255,255,255,.86);border-color:rgba(226,58,203,.16);box-shadow:0 18px 40px -28px rgba(16,111,174,.4)} .wn-six{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1080px;margin-top:clamp(30px,4vw,52px)} .wn-mission{display:flex;flex-direction:column;gap:6px;margin:clamp(26px,3vw,40px) auto 0;max-width:34ch} .wn-mission b{font-family:var(--head),sans-serif;font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#D0008C} .wn-mission span{font-family:var(--head),sans-serif;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--iq-ink,#106FAE)} .wn-close .wn-price{margin-top:clamp(16px,2vw,24px)} @media (max-width:760px){ /* her heading stays with her picture: the picture softens at its foot and the words sit on it */ html body .wn-hero.wis-arrive:not(#iq) .plate-across img,html body .wn-hero.wis-arrive:not(#iq) img{-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)} html body .wn-hero .plate-words:not(#iq):not(#iq2){margin-top:-92px!important;position:relative!important;padding-top:0!important} .wn-loren3{grid-template-columns:1fr} .wn-loren-pic{aspect-ratio:4/3} .wn-q{top:-.5em} .wn-six{grid-template-columns:1fr 1fr} } /* WISDOM FEELS LIKE THE HOME PAGE (1 Oct 2026): the hero in phrases, and the page ends on her thesis in Magi's clouds. */ .wn-hw .ph{opacity:0;transform:translateY(14px);transition:opacity 1.2s ease,transform 1.5s cubic-bezier(.2,.8,.2,1)} .wn-hw .ph.on{opacity:1;transform:none} .wn-hb .ph{display:inline-block} html body .wn-hw p:not(#iq){margin:0;text-align:left} html body .wn-hw .wn-ha:not(#iq){font-family:var(--head),"Montserrat",sans-serif;font-weight:500;font-size:clamp(14px,1.3vw,19px);letter-spacing:.24em;text-transform:uppercase;color:var(--iq-ink,#106FAE)} html body .wn-hw .wn-hb:not(#iq){margin-top:.18em;font-family:"Poiret One",sans-serif;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:1px #D0008C;font-size:clamp(46px,6vw,96px);line-height:.98;letter-spacing:.03em} html body .wn-hw .wn-hc:not(#iq){margin-top:1.1em;max-width:26ch;font-family:var(--head),"Montserrat",sans-serif;font-weight:400;font-style:italic;font-size:clamp(17px,1.5vw,22px);line-height:1.5;color:var(--iq-ink,#106FAE)} /* the finale */ .wn-finale{position:relative;overflow:hidden;margin-top:clamp(50px,7vw,110px);padding:clamp(90px,12vw,170px) 16px clamp(100px,13vw,180px);text-align:center;background:linear-gradient(180deg,#F7FAFD 0%,#EEF3FB 35%,#F6ECF6 70%,#F7FAFD 100%)} .wn-finale .wn-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1} .wn-sky{position:absolute;inset:0;z-index:0;pointer-events:none} .wn-sky i{position:absolute;left:-10%;right:-10%;background-repeat:repeat-x;background-size:auto 100%} .wn-sky .m1{bottom:0;height:60%;background-image:url(../img/mist-far.png);opacity:.85} .wn-sky .m2{bottom:-6%;height:48%;background-image:url(../img/mist-near.png);opacity:.9} .wn-sky .m3{top:-4%;height:36%;background-image:url(../img/mist-far.png);opacity:.45;transform:scaleY(-1)} @media (prefers-reduced-motion:no-preference){.wn-sky .m1{animation:wnMist 90s linear infinite}.wn-sky .m2{animation:wnMist 60s linear infinite reverse}.wn-sky .m3{animation:wnMist 120s linear infinite}} @keyframes wnMist{from{background-position:0 100%}to{background-position:-1600px 100%}} .wn-finale p{position:relative;z-index:2;margin:0} .wn-f1{font-family:var(--head),"Montserrat",sans-serif;font-weight:500;font-size:clamp(15px,1.6vw,22px);letter-spacing:.26em;text-transform:uppercase;color:var(--iq-ink,#106FAE)} .wn-f2{margin-top:.12em!important;font-family:"Poiret One",sans-serif;text-transform:uppercase;font-size:clamp(58px,11vw,170px);line-height:.95;letter-spacing:.04em;-webkit-text-stroke:1.2px #D0008C;color:#D0008C;background:linear-gradient(100deg,#D0008C 0%,#D0008C 40%,#FFD27A 48%,#FFF1C4 50%,#FFD27A 52%,#D0008C 60%,#D0008C 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .wn-f3{margin-top:1.4em!important;font-family:var(--head),sans-serif;font-weight:400;font-size:clamp(13px,1.2vw,16px);letter-spacing:.22em;text-transform:uppercase;color:var(--iq-soft,#3A76A6)} @media (prefers-reduced-motion:no-preference){ .wn-finale .wn-f1,.wn-finale .wn-f2,.wn-finale .wn-f3{opacity:0;transform:translateY(18px);transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.8,.2,1)} .wn-finale.go .wn-f1{opacity:1;transform:none;transition-delay:.3s} .wn-finale.go .wn-f2{opacity:1;transform:none;transition-delay:1.6s;animation:wnGlint 9s ease-in-out 3.6s infinite} .wn-finale.go .wn-f3{opacity:1;transform:none;transition-delay:3.4s} } @media (max-width:760px){ html body .wn-hw p:not(#iq){text-align:center} html body .wn-hw .wn-hc:not(#iq){margin-left:auto;margin-right:auto} html body .wn-hw .wn-hb:not(#iq){font-size:min(13vw,60px)} } /* Her fonts win on the Wisdom hero and finale (1 Oct 2026). */ html body .wn-hw p.wn-ha:not(#a):not(#b):not(#c){font-family:var(--head),"Montserrat",sans-serif!important;font-weight:500!important;font-size:clamp(14px,1.3vw,19px)!important;letter-spacing:.24em!important;text-transform:uppercase!important;color:var(--iq-ink,#106FAE)!important;line-height:1.3!important} html body .wn-hw p.wn-hb:not(#a):not(#b):not(#c){font-family:"Poiret One",sans-serif!important;font-weight:400!important;text-transform:uppercase!important;color:#D0008C!important;-webkit-text-stroke:1px #D0008C!important;font-size:clamp(46px,6vw,96px)!important;line-height:.98!important;letter-spacing:.03em!important} html body .wn-hw p.wn-hc:not(#a):not(#b):not(#c){font-family:var(--head),"Montserrat",sans-serif!important;font-weight:400!important;font-style:italic!important;font-size:clamp(17px,1.5vw,22px)!important;line-height:1.5!important;color:var(--iq-ink,#106FAE)!important;text-transform:none!important;letter-spacing:normal!important} html body .wn-finale p.wn-f1:not(#a):not(#b):not(#c){font-family:var(--head),"Montserrat",sans-serif!important;font-weight:500!important;font-size:clamp(15px,1.6vw,22px)!important;letter-spacing:.26em!important;text-transform:uppercase!important;color:var(--iq-ink,#106FAE)!important} html body .wn-finale p.wn-f2:not(#a):not(#b):not(#c){font-family:"Poiret One",sans-serif!important;font-weight:400!important;text-transform:uppercase!important;font-size:clamp(58px,11vw,170px)!important;line-height:.95!important;letter-spacing:.04em!important} html body .wn-finale p.wn-f3:not(#a):not(#b):not(#c){font-family:var(--head),"Montserrat",sans-serif!important;font-weight:400!important;font-size:clamp(13px,1.2vw,16px)!important;letter-spacing:.22em!important;text-transform:uppercase!important;color:var(--iq-soft,#3A76A6)!important} .wn-sky .m3{display:none} .wn-sky .m1{opacity:.6}.wn-sky .m2{opacity:.7} @media (max-width:760px){html body .wn-hw p.wn-hb:not(#a):not(#b):not(#c){font-size:min(13vw,60px)!important}html body .wn-finale p.wn-f2:not(#a):not(#b):not(#c){font-size:min(16vw,72px)!important}} /* 1 Oct 2026, hers: *You can't even read the blue on the phone … you may have retired from work, but your brain is crying out for stimulation. It's crucial. That all should be capitals.* */ html body .wn-hw p.wn-hc:not(#a):not(#b):not(#c){font-style:normal!important;text-transform:uppercase!important;letter-spacing:.14em!important;font-weight:500!important;font-size:clamp(14px,1.25vw,18px)!important;line-height:1.7!important;max-width:34ch!important;color:#0B5C94!important} html body .wn-hw p.wn-ha:not(#a):not(#b):not(#c){color:#0B5C94!important;font-weight:600!important} html body .wn-finale p.wn-f1:not(#a):not(#b):not(#c),html body .wn-finale p.wn-f3:not(#a):not(#b):not(#c){text-align:center!important;max-width:none!important} html body .wn-finale p:not(#a){text-align:center!important;margin-left:auto!important;margin-right:auto!important} /* Sophia Loren on her own, centred, until a picture is chosen */ .wn-loren3.wn-solo{grid-template-columns:1fr;max-width:900px;text-align:center} .wn-loren3.wn-solo blockquote{text-align:center} .wn-loren3.wn-solo .wn-q{left:50%;transform:translateX(-50%)!important;top:-.55em} .wn-loren3.wn-solo cite{justify-content:center} @media (max-width:760px){ /* on a phone her words sit on clean ground under the softened foot of the picture, readable */ html body .wn-hero.wis-arrive:not(#iq) img{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 96%)!important;mask-image:linear-gradient(180deg,#000 50%,transparent 96%)!important} html body .wn-hero .plate-words:not(#iq):not(#iq2){margin-top:-40px!important} html body .wn-hw p:not(#a):not(#b){text-shadow:0 0 14px #F7FAFD,0 0 4px #F7FAFD!important} html body .wn-hw p.wn-ha:not(#a):not(#b):not(#c){font-size:13px!important;letter-spacing:.2em!important} } /* HER ORDER (1 Oct 2026): the three main pathways large; Bloom, Teen Think Tank and Flow smaller beneath. */ html body.home .iq-path.small .iq-path-pic:not(#iq){aspect-ratio:16/9;border-radius:18px} html body.home .iq-path.small .iq-path-name:not(#iq){font-size:clamp(20px,1.7vw,26px)!important} html body.home .iq-paths .iq-path.small:not(#iq){max-width:300px;justify-self:center;width:100%} .iq-six li.small a{font-size:.72em;opacity:.92} .iq-six li.small:first-of-type,.iq-six li.small{margin-top:0} .iq-six li.main + li.small{margin-top:10px;padding-top:10px;border-top:1px solid rgba(47,168,224,.25)} /* HER JOURNAL at the foot of every page */ .iq-journal{max-width:1120px;margin:clamp(50px,7vw,100px) auto clamp(30px,4vw,60px);padding:0 clamp(16px,4vw,40px);text-align:center} .iq-journal-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(22px,3vw,40px);text-align:left} .iq-jcard{display:flex;flex-direction:column;gap:12px;padding:0 0 20px;border-radius:20px;overflow:hidden;text-decoration:none;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.95);box-shadow:0 22px 50px -32px rgba(16,111,174,.45);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease} .iq-jcard:hover,.iq-jcard:focus-visible{transform:translateY(-4px);box-shadow:0 28px 56px -30px rgba(208,0,140,.4)} .iq-jcard:not(:has(.iq-jpic)){padding-top:22px} .iq-jpic{display:block;aspect-ratio:16/10;overflow:hidden} .iq-jpic img{width:100%;height:100%;object-fit:cover;display:block} .iq-jcard b{padding:0 20px;font-family:var(--head),"Montserrat",sans-serif;font-weight:500;font-size:17px;line-height:1.4;color:var(--iq-ink,#106FAE)} .iq-jgo{margin-top:auto;padding:0 20px;font-family:var(--head),sans-serif;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#D0008C} .iq-jgo::after{content:" \2192"} @media (max-width:760px){.iq-journal-row{grid-template-columns:1fr}} /* Her Wisdom heading and the fun (1 Oct 2026). */ .wn-fun{max-width:1100px;margin:0 auto;padding:clamp(56px,7vw,110px) clamp(16px,4vw,40px) 0;text-align:center} .wn-fun h2{margin:0 auto;max-width:20ch} html body .wn-fun p.wn-fun-after:not(#a){margin:clamp(22px,2.6vw,34px) auto 0;font-family:var(--head),"Montserrat",sans-serif;font-weight:500;font-size:clamp(14px,1.3vw,18px);letter-spacing:.22em;text-transform:uppercase;color:#0B5C94;max-width:none} .wn-fun-after span{display:inline-block} .wn-fun-after span+span{color:#D0008C} @media (prefers-reduced-motion:no-preference){.wn-fun-after span{opacity:0;transform:translateY(12px);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}.wn-fun.is-in .wn-fun-after span{opacity:1;transform:none;transition-delay:2.6s}.wn-fun.is-in .wn-fun-after span+span{transition-delay:3.8s}} /* WISDOM IN PICTURES (1 Oct 2026; her pictures H, E, C and B): each moment is her picture beside a few of her words, alternating, the way Sir Ken stands on the home page. */ .wn-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4.5vw,72px);max-width:1240px;margin:clamp(56px,7vw,110px) auto 0;padding:0 clamp(16px,4vw,40px);text-align:left} .wn-split.rev .wn-pic{order:2} .wn-pic{aspect-ratio:4/3;border-radius:28px;overflow:hidden;box-shadow:0 40px 90px -46px rgba(212,33,187,.55),0 0 0 1px rgba(255,255,255,.8)} .wn-pic img{width:100%;height:100%;object-fit:cover;display:block} .wn-say{position:relative} .wn-say .wn-spark{margin:0 0 14px} html body .wn-split h2:not(#a){text-align:left;margin:0;max-width:none} html body .wn-split h2 .mo,html body .wn-split h2 .mo-2{text-align:left} .wn-split .wn-line{margin-left:0;text-align:left} html body .wn-split p.wn-fun-after:not(#a){text-align:left;margin-left:0} .wn-loren4 blockquote{margin:0;padding:0;border:0} .wn-loren4 p{position:relative;margin:0;display:flex;flex-direction:column;gap:.5em} .wn-loren4 .wl{display:block} .wn-loren4 .wl-pink{font-family:"Poiret One",sans-serif;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:.9px #D0008C;font-size:clamp(30px,3.2vw,48px);line-height:1.05;letter-spacing:.04em} .wn-loren4 .wl-mid{font-family:var(--head),"Montserrat",sans-serif;font-weight:300;font-size:clamp(20px,1.9vw,28px);line-height:1.45;color:var(--iq-ink,#106FAE)} .wn-loren4 .wl-big{font-family:var(--head),"Montserrat",sans-serif;font-weight:500;font-size:clamp(20px,1.9vw,28px);line-height:1.4;color:#D0008C} .wn-loren4 cite{display:flex;align-items:center;gap:12px;margin-top:24px;font-style:normal;font-family:var(--head),sans-serif;font-weight:500;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--iq-ink,#106FAE)} .wn-loren4 cite::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,#E0A82E,#FFD27A)} .wn-split-in{margin-top:0;padding:0} .wn-close2 .wn-mission,.wn-close2 .wn-price{text-align:left;margin-left:0} .wn-close2 .soft.after{text-align:left} .wn-close2 .wn-say > p:has(.enter){text-align:left} /* the six lives */ html body .wn-golden p.wn-nolimit:not(#a):not(#b){margin:clamp(50px,6vw,90px) auto 0!important;font-size:clamp(13px,1.2vw,16px)!important} .wn-lives{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1180px;margin:24px auto 0;text-align:left} .wn-life{display:flex;flex-direction:column;gap:6px;padding:22px 22px 24px;border-radius:18px;background:rgba(255,255,255,.9);border:1px solid rgba(226,58,203,.14);box-shadow:0 20px 44px -30px rgba(16,111,174,.45)} .wn-at{font-family:"Poiret One",sans-serif;font-size:clamp(26px,2.3vw,34px);line-height:1;background:linear-gradient(100deg,#B67A00,#F2C14E 45%,#FFE7A3 55%,#D69A1E);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.5px #C9900A;text-transform:uppercase;letter-spacing:.04em} .wn-life b{margin-top:6px;font-family:var(--head),"Montserrat",sans-serif;font-weight:600;font-size:18px;color:#D0008C;line-height:1.25} .wn-life i{font-style:normal;font-family:var(--head),sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--iq-soft,#3A76A6)} .wn-did{margin-top:6px;font-family:var(--head),"Montserrat",sans-serif;font-size:15px;line-height:1.5;color:var(--iq-ink,#106FAE)} .wn-impact{font-family:var(--head),"Montserrat",sans-serif;font-weight:600;font-size:15px;line-height:1.5;color:#0B5C94} @media (prefers-reduced-motion:no-preference){ .wn-pic{opacity:0;transform:translateY(30px) scale(.97);transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.8,.2,1)} .wn-pic img{animation:wnBreathe 26s ease-in-out infinite alternate} .wn-split.is-in .wn-pic,.wn-golden.is-in .wn-pic{opacity:1;transform:none} .wn-loren4 .wl,.wn-loren4 cite,.wn-loren4 .wn-q{opacity:0;transform:translateY(14px);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)} .wn-loren4.is-in .wl,.wn-loren4.is-in cite{opacity:1;transform:none} .wn-loren4.is-in .wn-q{opacity:.22;transform:none;transition-delay:.6s} .wn-loren4.is-in .wl-pink{transition-delay:1.1s}.wn-loren4.is-in .wl-mid{transition-delay:2.7s}.wn-loren4.is-in .wl-big{transition-delay:5.4s}.wn-loren4.is-in cite{transition-delay:7s} .wn-life{opacity:0;transform:translateY(16px)} .wn-life.is-in{opacity:1;transform:none;transition:opacity 1s ease calc(var(--i)*.25s),transform 1.2s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.25s)} .js-float .wn-split.float,.js-float .wn-golden.float{opacity:1!important;transform:none!important} .js-float .wn-life.float{opacity:0}.js-float .wn-life.float.is-in{opacity:1!important} } @media (max-width:860px){ .wn-split{grid-template-columns:1fr} .wn-split.rev .wn-pic{order:0} .wn-lives{grid-template-columns:1fr} html body .wn-split h2:not(#a),html body .wn-split h2 .mo,html body .wn-split h2 .mo-2,.wn-split .wn-line,html body .wn-split p.wn-fun-after:not(#a),.wn-close2 .wn-mission,.wn-close2 .wn-price,.wn-close2 .soft.after,.wn-close2 .wn-say > p{text-align:center;margin-left:auto;margin-right:auto} .wn-say .wn-spark{margin:0 auto 14px} .wn-loren4 blockquote{text-align:center}.wn-loren4 cite{justify-content:center} } /* HOW WISDOM WORKS, AS A SCROLL (1 Oct 2026): one bright card per step, swiped on a phone, each with her glowing stone. */ .wn-how{max-width:none;margin:clamp(56px,7vw,110px) 0 0;padding:0;text-align:center;overflow:hidden} .wn-how h2{margin:0 auto;padding:0 16px} .wn-swipe{margin:14px 0 0;font-family:var(--head),sans-serif;font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#D0008C} .wn-swipe span{display:inline-block} @media (prefers-reduced-motion:no-preference){.wn-swipe span{animation:wnNudge 1.6s ease-in-out infinite}} @keyframes wnNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}} .wn-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:28px max(16px,calc((100vw - 1180px)/2)) 34px;scrollbar-width:none;text-align:left} .wn-strip::-webkit-scrollbar{display:none} .wn-strip:focus-visible{outline:2px solid #D0008C;outline-offset:-4px} .wn-card{flex:0 0 clamp(260px,78vw,320px);scroll-snap-align:center;display:flex;flex-direction:column;gap:12px;min-height:340px;padding:28px 26px 30px;border-radius:26px;border:1px solid rgba(255,255,255,.95);box-shadow:0 26px 56px -34px rgba(16,111,174,.5),inset 0 1px 0 #fff;position:relative;overflow:hidden} .wn-card b{margin-top:auto;font-family:"Poiret One",sans-serif;font-weight:400;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:.9px #D0008C;font-size:clamp(34px,3vw,42px);line-height:1;letter-spacing:.04em} .wn-card-say{font-family:var(--head),"Montserrat",sans-serif;font-size:16px;line-height:1.55;color:#0B5C94} .wn-stone{display:block;width:110px;height:34px;margin:12px 0 26px;border-radius:50%;box-shadow:0 0 26px 6px rgba(226,58,203,.35),inset 0 -4px 10px rgba(16,111,174,.18)} @media (prefers-reduced-motion:no-preference){.wn-stone{animation:wnStone 4.2s ease-in-out infinite}.wn-card:nth-child(even) .wn-stone{animation-delay:-2s}} @keyframes wnStone{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} .wn-card.c0{background:linear-gradient(160deg,#FFF0FA,#F6DDF4)}.wn-card.c0 .wn-stone{background:radial-gradient(ellipse at 40% 30%,#fff,#F6B6E8 50%,#E23ACB)} .wn-card.c1{background:linear-gradient(160deg,#F2F6FE,#E3E8FB)}.wn-card.c1 .wn-stone{background:radial-gradient(ellipse at 40% 30%,#fff,#D9C8F6 50%,#A98BE8)} .wn-card.c2{background:linear-gradient(160deg,#EEF7FD,#DCEEFA)}.wn-card.c2 .wn-stone{background:radial-gradient(ellipse at 40% 30%,#fff,#BFE3F7 50%,#2FA8E0)} .wn-card.c3{background:linear-gradient(160deg,#EEFBFA,#D9F1EF)}.wn-card.c3 .wn-stone{background:radial-gradient(ellipse at 40% 30%,#fff,#BDE8E6 50%,#38B6C4)} .wn-card.c4{background:linear-gradient(160deg,#FFF0F7,#FBD9EC)}.wn-card.c4 .wn-stone{background:radial-gradient(ellipse at 40% 30%,#fff,#FFB0DA 50%,#FF4FA8)} .wn-card.c5{background:linear-gradient(160deg,#FFF9EC,#FBEBC8)}.wn-card.c5 .wn-stone{background:radial-gradient(ellipse at 40% 30%,#fff,#FFE3A0 50%,#E8B53C);box-shadow:0 0 26px 6px rgba(232,181,60,.4)} .wn-card.c6{background:linear-gradient(160deg,#FFF0FA,#FFF6E4)}.wn-card.c6 .wn-stone{background:radial-gradient(ellipse at 40% 30%,#fff,#F6B6E8 45%,#FFD27A)} @media (min-width:861px){.wn-swipe{display:none}} /* The month as an experience (1 Oct 2026): no pebbles; a gold word, her magenta title, one line, and a slow gold shimmer across each card. */ .wn-card .wn-stone{display:none} .wn-card{min-height:300px;justify-content:flex-end;background:linear-gradient(165deg,#FFFFFF 0%,#F9F1FB 55%,#FDF5E6 100%)!important} .wn-card::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;background:linear-gradient(90deg,rgba(255,210,122,0),#E8B53C 30%,#FFE7A3 50%,#E8B53C 70%,rgba(255,210,122,0))} .wn-card::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;background:linear-gradient(100deg,rgba(255,236,180,0),rgba(255,236,180,.55),rgba(255,236,180,0));transform:skewX(-16deg)} @media (prefers-reduced-motion:no-preference){.wn-card::after{animation:wnSheen 7s ease-in-out infinite}.wn-card:nth-child(2n)::after{animation-delay:-3.5s}} @keyframes wnSheen{0%,60%{left:-60%}100%{left:130%}} .wn-gold-word{font-style:normal;font-family:var(--head),sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;background:linear-gradient(100deg,#B67A00,#E8B53C 45%,#C98F12);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .wn-card b{margin-top:6px!important;font-size:clamp(30px,2.7vw,38px)!important;line-height:1.02!important} .wn-card-say{font-size:16.5px!important} .wn-card.c8 b{font-size:clamp(28px,2.4vw,34px)!important} /* THE MONTH PLAYS ITSELF (1 Oct 2026): one moment at a time, big and centred, gold dust and a gold thread filling. No swiping. */ .wn-stage{position:relative;display:grid;place-items:center;max-width:1000px;min-height:clamp(380px,52vh,520px);margin:clamp(24px,3vw,40px) auto 0;padding:40px 20px 56px;text-align:center;border-radius:36px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#FFFFFF 0%,#FBF1FA 45%,#F3EEFB 75%,rgba(247,250,253,0) 100%)} .wn-stage-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .wn-m{grid-area:1/1;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:760px;opacity:0;transform:translateY(24px) scale(.98);transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.2,.8,.2,1);pointer-events:none} .wn-m.on{opacity:1;transform:none;transition-delay:.25s} .wn-m .wn-gold-word{font-size:clamp(12px,1.1vw,15px)!important;letter-spacing:.3em!important} .wn-m b{font-family:"Poiret One",sans-serif;font-weight:400;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:1px #D0008C;font-size:clamp(40px,6.2vw,84px);line-height:1;letter-spacing:.03em;text-wrap:balance} .wn-m .wn-card-say{max-width:30ch;font-family:var(--head),"Montserrat",sans-serif;font-size:clamp(18px,1.8vw,24px);line-height:1.5;color:#0B5C94} .wn-thread{position:absolute;left:12%;right:12%;bottom:28px;height:2px;background:rgba(232,181,60,.22);border-radius:2px;z-index:1} .wn-thread b{display:block;height:100%;background:linear-gradient(90deg,#E8B53C,#FFE7A3,#E8B53C);box-shadow:0 0 8px rgba(232,181,60,.8);transform:scaleX(0);transform-origin:left;transition:transform 1.2s ease} @media (prefers-reduced-motion:reduce){.wn-stage{display:flex;flex-direction:column;gap:30px}.wn-m{opacity:1;transform:none;grid-area:auto}.wn-thread{display:none}} /* HER HEADING ON THE PICTURE, on a phone too (hers: *Get the heading up on the image*) */ @media (max-width:760px){ html body .wn-hero.wis-arrive:not(#iq) img{-webkit-mask-image:none!important;mask-image:none!important;height:84vh!important;object-fit:cover!important;object-position:70% 50%!important} html body .wn-hero .plate-words:not(#iq):not(#iq2){position:absolute!important;top:9%!important;left:0!important;right:0!important;margin:0!important;padding:0 18px!important} html body .wn-hw p:not(#a):not(#b){text-shadow:0 0 18px rgba(255,255,255,.95),0 0 6px rgba(255,255,255,.95),0 0 2px #fff!important} html body .wn-hw p.wn-hc:not(#a):not(#b):not(#c){margin-top:.9em!important} } /* WISDOM 2046 (preview, 1 Oct 2026): her old iRETIRE page, made for 2046 and for readers who may be ninety. Large type, things that play themselves, gold as a thread. */ .w46{--w46-ink:#0B4F80;--w46-pink:#C8007F} .w46 .w46-p{margin:18px 0 0;font-family:var(--head),"Montserrat",sans-serif;font-weight:400;font-size:clamp(19px,1.45vw,22px);line-height:1.65;color:var(--w46-ink);max-width:38ch} .w46 .w46-strong{font-weight:600;color:var(--w46-pink)} .w46 .w46-centre{text-align:center;margin-left:auto;margin-right:auto} .w46 h2{text-wrap:balance} .w46 .wn-split{margin-top:clamp(70px,8vw,130px)} /* the ribbon */ .w46-ribbon{position:relative;overflow:hidden;margin-top:0;padding:clamp(60px,8vw,110px) 16px;text-align:center;background:linear-gradient(110deg,#D0008C 0%,#E23ACB 45%,#C2007F 100%);box-shadow:inset 0 0 120px rgba(255,255,255,.18)} .w46-ribbon .w46-fx,.w46-enrol .w46-fx,.w46-gold .w46-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .w46-ribbon p{position:relative;z-index:1;margin:0;color:#fff} html body .w46-ribbon p.r1:not(#a){font-family:var(--head),"Montserrat",sans-serif;font-weight:500;font-size:clamp(16px,1.6vw,22px);letter-spacing:.28em;text-transform:uppercase;color:#FFF3D6} html body .w46-ribbon p.r2:not(#a){margin-top:.2em;font-family:"Poiret One",sans-serif;text-transform:uppercase;font-size:clamp(46px,7.4vw,112px);line-height:1;letter-spacing:.04em;-webkit-text-stroke:1px #fff;color:#fff;text-shadow:0 0 30px rgba(255,255,255,.35)} @media (prefers-reduced-motion:no-preference){.w46-ribbon p{opacity:0;transform:translateY(18px);transition:opacity 1.3s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}.w46-ribbon.go p{opacity:1;transform:none}.w46-ribbon.go p.r2{transition-delay:1.2s}} /* the stage, slower and larger for older eyes */ .w46-how{margin-top:clamp(70px,8vw,130px)!important;text-align:center} .w46 .wn-m .wn-card-say{font-size:clamp(20px,2vw,26px)!important;color:var(--w46-ink)} .w46 .wn-stage{cursor:pointer} .w46-guide{display:flex;flex-direction:column;gap:8px;max-width:40ch;margin:clamp(26px,3vw,40px) auto 0;padding:0 16px;text-align:center} .w46-guide b{font-family:var(--head),sans-serif;font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#B67A00} .w46-guide span{font-family:var(--head),sans-serif;font-size:clamp(18px,1.4vw,21px);line-height:1.6;color:var(--w46-ink)} /* tiles, larger */ .w46-three,.w46-listen,.w46-people{max-width:1180px;margin:clamp(70px,8vw,130px) auto 0;padding:0 clamp(16px,4vw,40px);text-align:center} .w46 .iq-tile b{font-size:15px;letter-spacing:.12em} .w46 .iq-tile span{font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--w46-ink)} .w46-tiles{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px} .w46-four{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1180px;margin-top:clamp(30px,4vw,50px)} /* Sophia Loren */ .w46-loren{max-width:960px;margin:clamp(70px,8vw,130px) auto 0;padding:0 clamp(16px,4vw,40px);text-align:center} .w46-kick{margin:0 0 30px;font-family:var(--head),sans-serif;font-weight:600;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:#B67A00} .w46-loren blockquote{position:relative;margin:0;padding:0;border:0} .w46-loren .wn-q{left:50%;transform:translateX(-50%)!important;top:-.6em} .w46-loren p{position:relative;margin:0;display:flex;flex-direction:column;gap:.5em} .w46-loren .wl-pink{font-family:"Poiret One",sans-serif;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:1px #D0008C;font-size:clamp(36px,4.2vw,62px);line-height:1.05;letter-spacing:.04em} .w46-loren .wl-mid{font-family:var(--head),"Montserrat",sans-serif;font-weight:400;font-size:clamp(21px,2.1vw,30px);line-height:1.45;color:var(--w46-ink)} .w46-loren .wl-big{font-family:var(--head),"Montserrat",sans-serif;font-weight:600;font-size:clamp(21px,2.1vw,30px);line-height:1.4;color:#D0008C} .w46-loren cite{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:26px;font-style:normal;font-family:var(--head),sans-serif;font-weight:600;font-size:14px;letter-spacing:.26em;text-transform:uppercase;color:var(--w46-ink)} .w46-loren cite::before,.w46-loren cite::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,#E0A82E,#FFD27A)} @media (prefers-reduced-motion:no-preference){ .w46-loren .wl,.w46-loren cite{opacity:0;transform:translateY(14px);transition:opacity 1.3s ease,transform 1.5s cubic-bezier(.2,.8,.2,1)} .w46-loren.is-in .wl,.w46-loren.is-in cite{opacity:1;transform:none} .w46-loren.is-in .wl-pink{transition-delay:.6s}.w46-loren.is-in .wl-mid{transition-delay:2.4s}.w46-loren.is-in .wl-big{transition-delay:5.4s}.w46-loren.is-in cite{transition-delay:7.2s} .js-float .w46-loren.float{opacity:1!important;transform:none!important} } /* voices, larger */ html body .w46-said.said-ages:not(#iq){margin-top:clamp(70px,8vw,130px)!important} html body .w46-said .quote p:not(#iq){font-size:clamp(18px,1.35vw,20px)!important;line-height:1.6!important} /* the people */ .w46-people .wn-lives{margin-top:clamp(28px,3.4vw,46px)} .w46 .wn-did,.w46 .wn-impact{font-size:17px} .w46 .wn-life b{font-size:20px} /* enrol, finishing on BRILLIANCE */ .w46-enrol{position:relative;overflow:hidden;margin-top:clamp(80px,9vw,140px);padding:clamp(80px,10vw,140px) 16px clamp(70px,8vw,120px);text-align:center;background:radial-gradient(ellipse at 50% 30%,#FFFFFF 0%,#FBEFF8 45%,#F3EEFB 80%,#F7FAFD 100%)} .w46-enrol > *:not(.w46-fx){position:relative;z-index:1} html body .w46-enrol p.e1:not(#a){margin:0;font-family:var(--head),sans-serif;font-weight:600;font-size:clamp(16px,1.7vw,24px);letter-spacing:.26em;text-transform:uppercase;color:var(--w46-ink)} html body .w46-enrol p.e2:not(#a){margin:.1em 0 0;font-family:"Poiret One",sans-serif;text-transform:uppercase;font-size:clamp(60px,11vw,170px);line-height:.95;letter-spacing:.04em;-webkit-text-stroke:1.2px #D0008C;color:#D0008C;background:linear-gradient(100deg,#D0008C 0%,#D0008C 40%,#FFD27A 48%,#FFF1C4 50%,#FFD27A 52%,#D0008C 60%,#D0008C 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} html body .w46-enrol p.e3:not(#a){margin:18px 0 0;font-family:var(--head),sans-serif;font-size:clamp(19px,1.6vw,23px);color:var(--w46-ink)} @media (prefers-reduced-motion:no-preference){ .w46-enrol .e1,.w46-enrol .e2,.w46-enrol .e3,.w46-card{opacity:0;transform:translateY(18px);transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.8,.2,1)} .w46-enrol.go .e1{opacity:1;transform:none;transition-delay:.2s} .w46-enrol.go .e2{opacity:1;transform:none;transition-delay:1.4s;animation:wnGlint 9s ease-in-out 3.4s infinite} .w46-enrol.go .e3{opacity:1;transform:none;transition-delay:2.8s} .w46-enrol.go .w46-card{opacity:1;transform:none;transition-delay:3.8s} .js-float .w46-enrol.float{opacity:1!important;transform:none!important} } .w46-card{max-width:440px;margin:clamp(34px,4vw,56px) auto 0;padding:34px 30px 30px;border-radius:28px;background:rgba(255,255,255,.88);border:1px solid rgba(232,181,60,.5);box-shadow:0 40px 80px -40px rgba(208,0,140,.45)} .w46-price{margin:0;font-family:var(--head),sans-serif;font-weight:300;font-size:clamp(46px,4.6vw,64px);color:var(--w46-ink);line-height:1} .w46-price span{font-size:.3em;letter-spacing:.2em;text-transform:uppercase;color:#B67A00;font-weight:600} .w46-card ul{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:10px} .w46-card li{font-family:var(--head),sans-serif;font-size:19px;color:var(--w46-ink)} .w46-card li::before{content:"\2726 ";color:#E8B53C} .w46-gift{margin:18px 0 0} .w46-gift a{font-family:var(--head),sans-serif;font-size:17px;color:#D0008C} @media (max-width:860px){ .w46-tiles,.w46-four{grid-template-columns:1fr} .w46 .w46-p{margin-left:auto;margin-right:auto;text-align:center} html body .w46-ribbon p.r2:not(#a){font-size:min(13vw,64px)} } /* Her favourite: my first gold, for the people (1 Oct 2026). */ .w46-goldpeople{max-width:none!important;margin:clamp(80px,9vw,140px) 0 0!important;padding:clamp(60px,8vw,110px) clamp(16px,4vw,48px)!important;text-align:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,rgba(255,214,110,.32),rgba(255,214,110,0) 62%),linear-gradient(180deg,rgba(255,248,228,0),rgba(255,244,214,.6) 50%,rgba(255,248,228,0))!important} .w46-goldpeople .wn-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .w46-goldpeople > *:not(.wn-fx){position:relative;z-index:1} .w46-goldpeople .wn-began{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1200px} .w46-goldpeople .wn-b{gap:6px;padding:22px 20px 24px;background:rgba(255,255,255,.78);border:1px solid rgba(232,190,90,.55)} .w46-goldpeople .wn-b small{font-family:var(--head),sans-serif;font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#B67A00} .w46-goldpeople .wn-b b{font-size:clamp(54px,5vw,74px)!important} .w46-goldpeople .wn-b strong{margin-top:4px;font-family:var(--head),"Montserrat",sans-serif;font-weight:600;font-size:19px;line-height:1.25;color:#D0008C} .w46-goldpeople .wn-b span{font-size:17px!important;line-height:1.55!important;color:var(--w46-ink,#0B4F80)!important} @media (max-width:860px){.w46-goldpeople .wn-began{grid-template-columns:1fr}.w46-goldpeople .wn-b{display:flex!important}.w46-goldpeople .wn-b b{grid-row:auto!important}} /* Her Poiret wins on the 2046 ribbon, people and close (1 Oct 2026). */ html body .w46 .w46-ribbon p.r1:not(#a):not(#b):not(#c){font-family:var(--head),"Montserrat",sans-serif!important;font-weight:500!important;font-size:clamp(16px,1.6vw,22px)!important;letter-spacing:.28em!important;text-transform:uppercase!important;color:#FFF3D6!important;text-align:center!important;max-width:none!important} html body .w46 .w46-ribbon p.r2:not(#a):not(#b):not(#c){font-family:"Poiret One",sans-serif!important;font-weight:400!important;text-transform:uppercase!important;font-size:clamp(46px,7.4vw,112px)!important;line-height:1!important;letter-spacing:.04em!important;color:#fff!important;-webkit-text-stroke:1px #fff!important;text-align:center!important;max-width:none!important} html body .w46 .w46-enrol p.e1:not(#a):not(#b):not(#c){font-family:var(--head),"Montserrat",sans-serif!important;font-weight:600!important;font-size:clamp(16px,1.7vw,24px)!important;letter-spacing:.26em!important;text-transform:uppercase!important;text-align:center!important;max-width:none!important;color:#0B4F80!important} html body .w46 .w46-enrol p.e2:not(#a):not(#b):not(#c){font-family:"Poiret One",sans-serif!important;font-weight:400!important;text-transform:uppercase!important;font-size:clamp(60px,11vw,170px)!important;line-height:.95!important;letter-spacing:.04em!important;text-align:center!important;max-width:none!important} html body .w46 .w46-enrol p.e3:not(#a):not(#b):not(#c){text-align:center!important;max-width:none!important;font-size:clamp(19px,1.6vw,23px)!important;color:#0B4F80!important} html body .w46 .w46-goldpeople p.wn-nolimit:not(#a):not(#b):not(#c){text-transform:uppercase!important;font-weight:600!important;letter-spacing:.26em!important;font-size:14px!important;text-align:center!important;max-width:none!important} html body .w46 p.w46-kick:not(#a):not(#b):not(#c){text-transform:uppercase!important;font-weight:600!important;letter-spacing:.24em!important;font-size:14px!important;text-align:center!important;max-width:none!important;color:#B67A00!important} @media (max-width:860px){html body .w46 .w46-ribbon p.r2:not(#a):not(#b):not(#c){font-size:min(13vw,64px)!important}html body .w46 .w46-enrol p.e2:not(#a):not(#b):not(#c){font-size:min(16vw,76px)!important}} /* 2046, her phone walk (1 Oct 2026): hero words larger and to the left; the moment under the hero; her podium rising. */ @media (max-width:760px){ html body .w46-hero .plate-words:not(#iq):not(#iq2){top:7%!important;padding:0 20px!important} html body .w46 .wn-hw p:not(#a):not(#b){text-align:left!important} html body .w46 .wn-hw p.wn-ha:not(#a):not(#b):not(#c){font-size:19px!important;letter-spacing:.14em!important} html body .w46 .wn-hw p.wn-hb:not(#a):not(#b):not(#c){font-size:min(15vw,68px)!important} html body .w46 .wn-hw p.wn-hc:not(#a):not(#b):not(#c){font-size:19px!important;letter-spacing:.06em!important;line-height:1.45!important;max-width:16ch!important;margin-left:0!important} } .w46-moment{position:relative;overflow:hidden;padding:clamp(80px,10vw,150px) 20px;text-align:center;background:radial-gradient(ellipse at 50% 45%,#FFFFFF 0%,#FCF3FA 40%,#F4EEFB 75%,#F7FAFD 100%)} .w46-moment .w46-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .w46-moment p{position:relative;z-index:1;margin:0 auto} html body .w46 .w46-moment p.mo1:not(#a):not(#b){font-family:var(--head),"Montserrat",sans-serif!important;font-weight:600!important;font-size:clamp(17px,1.8vw,24px)!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:#0B4F80!important;max-width:none!important;text-align:center!important} html body .w46 .w46-moment p.mo2:not(#a):not(#b){margin-top:.25em!important;font-family:"Poiret One",sans-serif!important;font-weight:400!important;text-transform:uppercase!important;font-size:clamp(40px,6.6vw,100px)!important;line-height:1.02!important;letter-spacing:.03em!important;-webkit-text-stroke:1px #D0008C;color:#D0008C!important;max-width:16ch!important;text-align:center!important;text-shadow:0 0 40px rgba(226,58,203,.25)} html body .w46 .w46-moment p.mo3:not(#a):not(#b){margin-top:1.1em!important;font-family:var(--head),"Montserrat",sans-serif!important;font-weight:400!important;font-size:clamp(21px,2vw,28px)!important;color:#0B4F80!important;text-align:center!important;max-width:none!important} html body .w46 .w46-moment p.mo4:not(#a):not(#b){margin-top:.6em!important;font-family:var(--head),"Montserrat",sans-serif!important;font-weight:600!important;font-size:clamp(21px,2vw,28px)!important;letter-spacing:.04em!important;text-transform:uppercase!important;text-align:center!important;max-width:none!important;background:linear-gradient(100deg,#B67A00,#E8B53C 35%,#FFE7A3 50%,#E8B53C 65%,#B67A00);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} @media (prefers-reduced-motion:no-preference){ .w46-moment p{opacity:0;transform:translateY(18px);transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.8,.2,1)} .w46-moment.go p{opacity:1;transform:none} .w46-moment.go .mo2{transition-delay:1.4s}.w46-moment.go .mo3{transition-delay:3.6s}.w46-moment.go .mo4{transition-delay:5.2s;animation:wnGlint 8s ease-in-out 7s infinite} } .w46-podium{position:relative;width:min(760px,100%);aspect-ratio:4/5;max-height:78vh;margin:clamp(20px,3vw,36px) auto 0;border-radius:32px;overflow:hidden;background:linear-gradient(180deg,#FBFBFE,#ECEBF6);box-shadow:0 40px 90px -50px rgba(212,33,187,.55)} @media (min-width:861px){.w46-podium{aspect-ratio:16/11}} .w46-podium iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .w46-name{display:flex;flex-direction:column;align-items:center;gap:10px;margin:22px auto 0;padding:0 16px} .w46-name label{font-family:var(--head),sans-serif;font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#B67A00} .w46-name span{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .w46-name input{font:400 20px/1.2 var(--head),"Montserrat",sans-serif;color:#0B4F80;padding:14px 18px;border-radius:999px;border:1.5px solid rgba(208,0,140,.35);background:#fff;min-width:220px;text-align:center} .w46-name input:focus-visible{outline:2px solid #D0008C;outline-offset:2px} .w46-name button{font:600 15px/1 var(--head),sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:linear-gradient(110deg,#D0008C,#E23ACB);border:0;border-radius:999px;padding:16px 24px;cursor:pointer;box-shadow:0 14px 30px -14px rgba(208,0,140,.7)} .w46-then{margin-top:clamp(40px,5vw,70px)!important;font-weight:600!important;color:#D0008C!important} /* THE FALL AND THE PHOTO (1 Oct 2026). */ .w46-fall{position:relative;max-width:1000px;margin:0 auto;padding:clamp(70px,8vw,120px) 16px clamp(80px,9vw,130px);text-align:center} .w46-fall-in,.w46-fall-out{position:relative;z-index:2;will-change:transform,opacity} html body .w46 .w46-fall p.fa:not(#a):not(#b){margin:0;font-family:var(--head),"Montserrat",sans-serif!important;font-weight:600!important;font-size:clamp(17px,1.8vw,24px)!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:#0B4F80!important;text-align:center!important;max-width:none!important;text-shadow:0 0 14px #fff,0 0 4px #fff} html body .w46 .w46-fall p.fb:not(#a):not(#b){margin:.2em auto 0;font-family:"Poiret One",sans-serif!important;font-weight:400!important;text-transform:uppercase!important;font-size:clamp(42px,6.6vw,96px)!important;line-height:1.02!important;letter-spacing:.03em!important;color:#D0008C!important;-webkit-text-stroke:1px #D0008C;text-align:center!important;max-width:15ch!important;text-shadow:0 0 24px #fff,0 0 8px #fff} .w46-fall-pic{position:relative;z-index:1;width:min(860px,100%);aspect-ratio:3/2;margin:clamp(30px,4vw,50px) auto;border-radius:32px;overflow:hidden;box-shadow:0 50px 100px -50px rgba(212,33,187,.6)} .w46-fall-pic img{width:100%;height:100%;object-fit:cover;display:block} @media (prefers-reduced-motion:no-preference){.w46-fall-pic img{animation:wnBreathe 26s ease-in-out infinite alternate}} html body .w46 .w46-fall p.fc:not(#a):not(#b){margin:0;font-family:var(--head),"Montserrat",sans-serif!important;font-weight:400!important;font-size:clamp(22px,2.2vw,30px)!important;color:#0B4F80!important;text-align:center!important;max-width:none!important;text-shadow:0 0 14px #fff,0 0 4px #fff} html body .w46 .w46-fall p.fd:not(#a):not(#b){margin:.5em 0 0;font-family:var(--head),"Montserrat",sans-serif!important;font-weight:600!important;font-size:clamp(22px,2.2vw,30px)!important;letter-spacing:.04em!important;text-transform:uppercase!important;text-align:center!important;max-width:none!important;background:linear-gradient(100deg,#B67A00,#E8B53C 35%,#FFE7A3 50%,#E8B53C 65%,#B67A00);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} @media (prefers-reduced-motion:no-preference){.w46-fall.live p.fd{animation:wnGlint 8s ease-in-out 2s infinite}} /* on a photo */ .w46-onphoto{position:relative;overflow:hidden;height:min(86vh,760px);min-height:460px} .w46-onphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block} @media (prefers-reduced-motion:no-preference){.w46-onphoto img{animation:wnBreathe 30s ease-in-out infinite alternate}} .w46-onphoto .w46-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1} .w46-onphoto-say{position:absolute;left:0;right:0;top:9%;z-index:2;text-align:center;padding:0 16px} html body .w46 .w46-onphoto p.r1:not(#a):not(#b){margin:0;font-family:var(--head),"Montserrat",sans-serif!important;font-weight:600!important;font-size:clamp(17px,1.7vw,23px)!important;letter-spacing:.24em!important;text-transform:uppercase!important;color:#0B4F80!important;text-align:center!important;max-width:none!important;text-shadow:0 0 18px #fff,0 0 6px #fff,0 0 2px #fff} html body .w46 .w46-onphoto p.r2:not(#a):not(#b){margin:.15em 0 0;font-family:"Poiret One",sans-serif!important;font-weight:400!important;text-transform:uppercase!important;font-size:clamp(46px,7.4vw,112px)!important;line-height:1!important;letter-spacing:.04em!important;color:#D0008C!important;-webkit-text-stroke:1px #D0008C;text-align:center!important;max-width:none!important;text-shadow:0 0 30px #fff,0 0 10px #fff} .w46-left{text-align:left!important;margin:0 0 10px!important} @media (max-width:860px){ .w46-onphoto{height:78vh} .w46-onphoto img{object-position:42% 60%} html body .w46 .w46-onphoto p.r2:not(#a):not(#b){font-size:min(13vw,64px)!important} html body .w46 .w46-fall p.fb:not(#a):not(#b){font-size:min(12vw,58px)!important} .w46-left{text-align:center!important} } /* SOPHIA LOREN, MASSIVELY WONDERFUL (1 Oct 2026). */ .w46-loren2{position:relative;overflow:hidden;margin-top:clamp(80px,9vw,140px);padding:clamp(100px,12vw,180px) 20px;text-align:center;background:radial-gradient(ellipse at 50% 45%,#FFFFFF 0%,#FCE9F6 38%,#F3DDF4 62%,#EEE9FA 85%,#F7FAFD 100%)} .w46-loren2 .w46-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .w46-loren2 .ql{position:absolute;left:50%;top:clamp(10px,3vw,40px);transform:translateX(-50%);font-family:"Poiret One",Georgia,serif;font-size:clamp(200px,24vw,380px);line-height:1;color:#E23ACB;opacity:.14;z-index:0;pointer-events:none} .w46-loren2 blockquote{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:0;border:0} html body .w46 .w46-loren2 p.l1:not(#a):not(#b){margin:0;font-family:"Poiret One",sans-serif!important;font-weight:400!important;text-transform:uppercase!important;font-size:clamp(44px,7vw,108px)!important;line-height:1!important;letter-spacing:.03em!important;color:#D0008C!important;-webkit-text-stroke:1px #D0008C;text-align:center!important;max-width:none!important;text-shadow:0 0 50px rgba(226,58,203,.25)} html body .w46 .w46-loren2 p.l2:not(#a):not(#b){margin:.9em auto 0;font-family:var(--head),"Montserrat",sans-serif!important;font-weight:400!important;font-size:clamp(22px,2.4vw,34px)!important;line-height:1.5!important;color:#0B4F80!important;text-align:center!important;max-width:30ch!important} html body .w46 .w46-loren2 p.l3:not(#a):not(#b){margin:.9em auto 0;font-family:var(--head),"Montserrat",sans-serif!important;font-weight:600!important;font-size:clamp(23px,2.6vw,36px)!important;line-height:1.4!important;text-align:center!important;max-width:26ch!important;background:linear-gradient(100deg,#C2007F 0%,#C2007F 38%,#E8B53C 47%,#FFE7A3 50%,#E8B53C 53%,#C2007F 62%,#C2007F 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .w46-loren2 cite{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:34px;font-style:normal;font-family:var(--head),sans-serif;font-weight:600;font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:#0B4F80} .w46-loren2 cite::before,.w46-loren2 cite::after{content:"";width:48px;height:1px;background:linear-gradient(90deg,#E0A82E,#FFD27A)} @media (prefers-reduced-motion:no-preference){ .w46-loren2 .ql{opacity:0;transform:translateX(-50%) scale(.6);transition:opacity 2s ease,transform 2.4s cubic-bezier(.2,.8,.2,1)} .w46-loren2.go .ql{opacity:.14;transform:translateX(-50%) scale(1)} .w46-loren2 blockquote > *{opacity:0;transform:translateY(22px);transition:opacity 1.5s ease,transform 1.9s cubic-bezier(.2,.8,.2,1)} .w46-loren2.go blockquote > *{opacity:1;transform:none} .w46-loren2.go .l1{transition-delay:.8s}.w46-loren2.go .l2{transition-delay:3s}.w46-loren2.go .l3{transition-delay:6.4s;animation:wnGlint 9s ease-in-out 9s infinite}.w46-loren2.go cite{transition-delay:8.6s} } @media (max-width:860px){html body .w46 .w46-loren2 p.l1:not(#a):not(#b){font-size:min(13vw,60px)!important}} .w46-onphoto{margin-top:clamp(80px,9vw,140px)} /* HER JOURNAL, AS A FEATURE (1 Oct 2026; hers: *If you ever give me a journal so fucking ugly again*). One large story, two beside it, her pictures, gold words. */ .iq-journal{display:none!important} .iq-journal2{max-width:1200px;margin:clamp(70px,8vw,130px) auto clamp(40px,5vw,80px);padding:0 clamp(16px,4vw,40px);text-align:center} .iq-j2{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:22px;margin-top:clamp(28px,3.4vw,48px);text-align:left} .iq-j2-card{position:relative;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;text-decoration:none;background:#fff;box-shadow:0 30px 70px -40px rgba(16,111,174,.5),0 0 0 1px rgba(255,255,255,.9);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease} .iq-j2-card.lead{grid-row:1 / span 2} .iq-j2-card:hover,.iq-j2-card:focus-visible{transform:translateY(-6px);box-shadow:0 40px 80px -40px rgba(208,0,140,.5),0 0 0 1px #fff} .iq-j2-card:focus-visible{outline:2px solid #D0008C;outline-offset:4px} .iq-j2-pic{display:block;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#F6E3F3,#E3EEFA)} .iq-j2-card.lead .iq-j2-pic{aspect-ratio:4/3} .iq-j2-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.6s cubic-bezier(.2,.8,.2,1)} .iq-j2-card:hover .iq-j2-pic img{transform:scale(1.05)} .iq-j2-say{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px} .iq-j2-say i{font-style:normal;font-family:var(--head),sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;background:linear-gradient(100deg,#B67A00,#E8B53C 50%,#C98F12);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .iq-j2-say b{font-family:var(--head),"Montserrat",sans-serif;font-weight:500;font-size:clamp(19px,1.5vw,22px);line-height:1.3;color:#0B4F80} .iq-j2-card.lead .iq-j2-say b{font-family:"Poiret One",sans-serif;font-weight:400;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:.7px #D0008C;font-size:clamp(26px,2.5vw,36px);line-height:1.08;letter-spacing:.02em} .iq-j2-ex{font-family:var(--head),sans-serif;font-size:16px;line-height:1.55;color:#3A6A92} .iq-j2-go{margin-top:4px;font-family:var(--head),sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:#D0008C} .iq-j2-go::after{content:" \2192";display:inline-block;transition:transform .4s ease} .iq-j2-card:hover .iq-j2-go::after{transform:translateX(5px)} @media (max-width:860px){.iq-j2{grid-template-columns:1fr}.iq-j2-card.lead{grid-row:auto}} /* Her named pictures on Wisdom (1 Oct 2026). */ .w46-heroimg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block} @media (prefers-reduced-motion:no-preference){.w46-heroimg img{animation:wnBreathe 30s ease-in-out infinite alternate}} .w46-split-in{margin:0!important;padding:0!important;max-width:1240px;text-align:left} .w46-listen .w46-split-in .w46-p{max-width:40ch} .w46-stack{grid-template-columns:1fr!important;max-width:none!important;padding:0!important;gap:14px!important} @media (max-width:860px){.w46-heroimg img{object-position:66% 50%}} .w46-listen.is-in .wn-pic,.w46-three.is-in .wn-pic{opacity:1!important;transform:none!important} @media (prefers-reduced-motion:reduce){.w46-listen .wn-pic,.w46-three .wn-pic{opacity:1!important}} /* HER HERO FILM (1 Oct 2026). He sits centre-left; her words take the clouds to his left on a big screen, and the fog beneath the swing on a phone. */ .w46-hasfilm .w46-film{position:relative;height:min(88vh,880px);min-height:520px;overflow:hidden;background:#EEF1F8} .w46-hasfilm .w46-film video{position:absolute;top:0;left:0;width:122%;height:100%;object-fit:cover;object-position:0% 45%;display:block} html body .w46-hasfilm .plate-words:not(#iq):not(#iq2){max-width:min(30vw,440px)!important} html body .w46-hasfilm .wn-hw p:not(#a):not(#b){text-shadow:0 0 22px rgba(255,255,255,.95),0 0 8px rgba(255,255,255,.95),0 0 2px #fff!important} @media (max-width:760px){ .w46-hasfilm .w46-film{height:86vh;min-height:0} .w46-hasfilm .w46-film video{width:100%;object-position:42% 40%} html body .w46-hasfilm .plate-words:not(#iq):not(#iq2){top:auto!important;bottom:5%!important;max-width:none!important} } @media (prefers-reduced-motion:reduce){.w46-hasfilm .w46-film video{display:none}.w46-hasfilm .w46-film{background:url(../film/wisdom-swing-poster.jpg) 30% 45%/cover no-repeat}} /* WISDOM ON A COMPUTER FEELS LIKE THE PHONE (hers, 1 Oct 2026: *Phone looks much better … The laptop looks like crap … the words are terrible, the way they're dropping in and out*). One column: her picture wide, her words large beneath it. Nothing drops in or out on scroll. */ .w46-fall-in,.w46-fall-out{transform:none!important;opacity:1} @media (prefers-reduced-motion:no-preference){ .w46-fall .w46-fall-in,.w46-fall .w46-fall-pic,.w46-fall .w46-fall-out{opacity:0;transform:translateY(20px)!important;transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.8,.2,1)} .w46-fall.go .w46-fall-in,.w46-fall.go .w46-fall-pic,.w46-fall.go .w46-fall-out{opacity:1;transform:none!important} .w46-fall.go .w46-fall-pic{transition-delay:1s}.w46-fall.go .w46-fall-out{transition-delay:2.4s} } @media (min-width:861px){ .w46 .wn-split,.w46 .w46-split-in{grid-template-columns:1fr!important;max-width:1060px!important;gap:clamp(30px,3vw,44px)!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important} .w46 .wn-split.rev .wn-pic{order:0!important} .w46 .wn-pic{aspect-ratio:16/9;border-radius:34px} .w46 .wn-say{text-align:center} .w46 .wn-say .wn-spark{margin:0 auto 16px} html body .w46 .wn-split h2:not(#a),html body .w46 .wn-split h2 .mo,html body .w46 .wn-split h2 .mo-2{text-align:center!important} .w46 .w46-p{margin-left:auto;margin-right:auto;text-align:center;max-width:44ch;font-size:clamp(21px,1.6vw,24px)} html body .w46 p.w46-kick.w46-left:not(#a):not(#b):not(#c){text-align:center!important} .w46 .w46-stack{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:1060px!important;margin:0 auto} .w46 .w46-four{max-width:1060px;margin-left:auto;margin-right:auto} .w46 .iq-tile span{font-size:18px} .w46-fall-pic{width:min(1060px,100%)!important;aspect-ratio:16/9!important} /* the hero: framed, not cropped close, and her words large */ .w46-hasfilm .w46-film{height:min(92vh,64vw)!important} .w46-hasfilm .w46-film video{width:100%!important;object-position:50% 40%!important} html body .w46-hasfilm .plate-words:not(#iq):not(#iq2){max-width:min(34vw,560px)!important} html body .w46 .wn-hw p.wn-ha:not(#a):not(#b):not(#c){font-size:clamp(18px,1.4vw,24px)!important} html body .w46 .wn-hw p.wn-hb:not(#a):not(#b):not(#c){font-size:clamp(64px,6.6vw,118px)!important} html body .w46 .wn-hw p.wn-hc:not(#a):not(#b):not(#c){font-size:clamp(18px,1.4vw,24px)!important;max-width:24ch!important} } /* 1 Oct 2026, hers: *Little gold eyebrows, like they're just losing everything … Things are so big … There is a fountain of youth just looks way too big.* The tiny gold labels go; the large pieces come down to a calmer size. */ html body .w46 p.w46-kick:not(#a):not(#b):not(#c),html body .w46 .w46-goldpeople p.wn-nolimit:not(#a):not(#b):not(#c){display:none!important} .w46 .w46-guide b{font-size:17px!important;letter-spacing:.06em!important;text-transform:none!important;color:#0B4F80!important;font-weight:600!important} .w46 .wn-m .wn-gold-word{font-size:15px!important;letter-spacing:.16em!important;background:none!important;-webkit-text-fill-color:#0B4F80!important;color:#0B4F80!important} html body .w46 .w46-loren2 p.l1:not(#a):not(#b){font-size:clamp(36px,4.4vw,64px)!important} html body .w46 .w46-loren2 p.l2:not(#a):not(#b){font-size:clamp(20px,1.9vw,27px)!important} html body .w46 .w46-loren2 p.l3:not(#a):not(#b){font-size:clamp(20px,2vw,28px)!important} .w46-loren2{padding:clamp(80px,9vw,130px) 20px!important} .w46-loren2 .ql{font-size:clamp(150px,16vw,260px)!important} html body .w46 .w46-fall p.fb:not(#a):not(#b){font-size:clamp(38px,4.6vw,70px)!important} html body .w46 .w46-onphoto p.r2:not(#a):not(#b){font-size:clamp(42px,5.4vw,84px)!important} html body .w46 .w46-enrol p.e2:not(#a):not(#b):not(#c){font-size:clamp(56px,8vw,128px)!important} @media (min-width:861px){ .w46 .wn-split,.w46 .w46-split-in{max-width:900px!important} .w46-fall-pic{width:min(900px,100%)!important} html body .w46 .wn-hw p.wn-hb:not(#a):not(#b):not(#c){font-size:clamp(56px,5.6vw,96px)!important} } .w46-pfilm video{width:100%;height:100%;object-fit:cover;display:block} @media (prefers-reduced-motion:reduce){.w46-pfilm video{display:none}.w46-pfilm{background:url(../film/wisdom-moon-poster.jpg) center/cover}} /* The moon film is her hero now (1 Oct 2026): she sits left of centre, so her words take the soft fog at the foot. */ @media (min-width:861px){html body .w46-hasfilm .plate-words:not(#iq):not(#iq2){top:auto!important;bottom:7%!important;max-width:min(44vw,640px)!important}.w46-hasfilm .w46-film video{object-position:50% 35%!important}} .w46-pfilm video{object-position:50% 45%} /* On a phone her whole film shows, edge to edge, and her words sit just beneath it (hers, 1 Oct 2026: *I don't want it so wide. I'm missing all the video*). */ @media (max-width:760px){.w46-hasfilm .w46-film{height:auto!important;aspect-ratio:3/2;min-height:0!important}.w46-hasfilm .w46-film video{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important}html body .w46-hasfilm .plate-words:not(#iq):not(#iq2){position:static!important;top:auto!important;bottom:auto!important;padding:22px 20px 8px!important;max-width:none!important}html body .w46 .w46-hasfilm .wn-hw p:not(#a):not(#b){text-align:center!important;text-shadow:none!important}html body .w46 .w46-hasfilm .wn-hw p.wn-hc:not(#a):not(#b):not(#c){max-width:22ch!important;margin-left:auto!important;margin-right:auto!important}} @media (max-width:760px){html body .w46 .w46-hero.wis-arrive:not(#iq){min-height:0!important;height:auto!important;padding-bottom:10px!important}} .w46-hasfilm .w46-film img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block} @media (max-width:760px){.w46-hasfilm .w46-film img{position:static;height:100%}} /* Her hero film holds almost no movement of its own, so the page gives it a slow, visible breath (1 Oct 2026). */ @media (prefers-reduced-motion:no-preference){.w46-hasfilm .w46-film video,.w46-hasfilm .w46-film img{animation:w46HeroDrift 16s ease-in-out infinite alternate;transform-origin:45% 45%}} @keyframes w46HeroDrift{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.12) translate3d(-1.5%,-1%,0)}} /* Hers, 1 Oct 2026: *Just let it.* Her film plays as she made it, at its own speed, with nothing added. */ .w46-hasfilm .w46-film video,.w46-hasfilm .w46-film img{animation:none!important;transform:none!important} .w46-film .w46-orb{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2} .w46-thread{height:clamp(90px,11vh,140px)!important;margin:clamp(20px,3vw,40px) auto!important} /* WISDOM ON A COMPUTER, AT CINEMA SIZE (1 Oct 2026). Hers: *Phone looks much better … The laptop looks like crap … I need you to get that page magnificent.* The phone works because every picture runs edge to edge with her words beneath. So on a computer every picture runs the whole width of the screen, cinema-shaped, dissolving into the page at top and bottom, and her words sit large beneath it. The phone is untouched. */ @media (min-width:861px){ .w46 .wn-how{overflow:visible!important} .w46 .wn-split,.w46 .w46-split-in{overflow:visible!important;gap:clamp(34px,3.4vw,52px)!important} .w46 .wn-pic,.w46 .w46-fall-pic,.w46 .w46-podium{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:0!important;border-radius:0!important;box-shadow:none!important;aspect-ratio:21/9!important;max-height:80vh; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%)} .w46 .wn-pic img,.w46 .wn-pic video,.w46 .w46-fall-pic img{object-position:50% 45%} .w46 .w46-podium{aspect-ratio:2/1!important} .w46 .w46-fall{max-width:none!important;padding-left:0!important;padding-right:0!important} .w46 .w46-fall-in,.w46 .w46-fall-out{max-width:1000px;margin-left:auto;margin-right:auto;padding:0 24px} .w46 .w46-fall-pic{margin-top:clamp(36px,4vw,60px)!important;margin-bottom:clamp(36px,4vw,60px)!important} /* her words, beneath each picture, large and calm */ .w46 .wn-say{max-width:900px;margin:0 auto;padding:0 24px} html body .w46 .wn-split h2:not(#a) .mo{font-size:clamp(15px,1.15vw,19px)!important} .w46 .w46-p{font-size:clamp(21px,1.5vw,25px)!important;line-height:1.6!important;max-width:42ch!important} .w46 .w46-stack{max-width:1000px!important} /* the hero: her words take the clear sky beneath the orb, on the right */ html body .w46-hasfilm .plate-words:not(#iq):not(#iq2){left:auto!important;right:6%!important;top:auto!important;bottom:10%!important;max-width:min(40vw,620px)!important} .w46-hasfilm .w46-film video{object-position:50% 40%!important} } /* Framing at cinema size (1 Oct 2026): heads kept whole, and no words on a face. */ @media (min-width:861px){.w46 .wn-pic img,.w46 .wn-pic video{object-position:50% 28%!important}.w46 .w46-fall-pic img{object-position:50% 62%!important}.w46-onphoto img{object-position:50% 2%!important;animation:none!important}.w46-onphoto{height:min(86vh,62vw)!important}} @media (min-width:861px){.w46 .w46-gold .wn-pic img{object-position:50% 8%!important}.w46-onphoto-say{top:4%!important}html body .w46 .w46-onphoto p.r2:not(#a):not(#b){font-size:clamp(38px,4.4vw,70px)!important}.w46-onphoto{height:min(94vh,68vw)!important}} @media (min-width:861px){.w46-onphoto-say{left:46%!important;right:4%!important;top:9%!important}} /* HER HOME HEADING ON TOP OF THE FILM, ON A PHONE (hers, 1 Oct 2026: *make sure the heading is on top of the video. We've lost the magic of the headings*). The film runs taller and her words arrive on its misty foot. */ @media (max-width:760px){html body.home .entrance:not(#iq){position:relative!important}html body.home .entrance .entrance-world:not(#iq){height:84vh!important;min-height:520px!important}html body.home .entrance .entrance-film:not(#iq),html body.home .entrance .entrance-still:not(#iq){height:100%!important;object-fit:cover!important}html body.home .entrance .entrance-say:not(#iq):not(#iq2){position:absolute!important;left:0!important;right:0!important;top:auto!important;bottom:7%!important;z-index:6!important;margin:0!important;padding:0 18px!important}html body.home .entrance .entrance-say *{text-shadow:0 0 18px rgba(255,255,255,.95),0 0 6px rgba(255,255,255,.9)}} /* Wisdom's doors to LOIS and Skipper (1 Oct 2026). */ .w46-onward{max-width:1000px;margin:clamp(60px,7vw,110px) auto 0;padding:0 clamp(16px,4vw,40px);text-align:center} .w46-onward-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(26px,3vw,40px)} .w46-door{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:36px 28px 32px;border-radius:28px;text-decoration:none;background:radial-gradient(ellipse at 50% 0%,rgba(255,236,180,.55),rgba(255,255,255,0) 60%),linear-gradient(170deg,#FFFFFF,#FBF1FA);border:1px solid rgba(232,181,60,.45);box-shadow:0 30px 60px -36px rgba(208,0,140,.45);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease} .w46-door:hover,.w46-door:focus-visible{transform:translateY(-5px);box-shadow:0 40px 70px -36px rgba(208,0,140,.55)} .w46-door:focus-visible{outline:2px solid #D0008C;outline-offset:4px} .w46-door-name{font-family:"Poiret One",sans-serif;font-size:clamp(40px,4vw,58px);line-height:1;letter-spacing:.06em;text-transform:uppercase;color:#D0008C;-webkit-text-stroke:.9px #D0008C} .w46-door-line{font-family:var(--head),"Montserrat",sans-serif;font-size:clamp(18px,1.4vw,21px);line-height:1.5;color:#0B4F80;max-width:26ch} .w46-door-go{margin-top:6px;font-family:var(--head),sans-serif;font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#B67A00} .w46-door-go::after{content:" \2192"} @media (max-width:760px){.w46-onward-two{grid-template-columns:1fr}} /* SOPHIA LOREN, AMAZING (1 Oct 2026): a fountain of light behind her words; her first line letter by letter. */ .w46-loren2{min-height:clamp(620px,92vh,980px);display:flex;flex-direction:column;justify-content:center;background:radial-gradient(ellipse at 50% 100%,#FFE6F7 0%,#FCEFF9 30%,#F4ECFB 65%,#F7FAFD 100%)!important} .w46-loren2 .w46-fountain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .w46-loren2 blockquote{z-index:2} html body .w46 .w46-loren2 p.l1:not(#a):not(#b){font-size:clamp(40px,5.4vw,82px)!important;text-shadow:0 0 30px #fff,0 0 60px rgba(255,255,255,.8)!important} html body .w46 .w46-loren2 p.l2:not(#a):not(#b),html body .w46 .w46-loren2 p.l3:not(#a):not(#b){text-shadow:0 0 14px #fff,0 0 4px #fff} html body .w46 .w46-loren2 p.l3:not(#a):not(#b){text-shadow:none} @media (prefers-reduced-motion:no-preference){ .w46-loren2 .l1{opacity:1!important;transform:none!important} .w46-loren2 .ch{display:inline-block;opacity:0;transform:translateY(.35em) scale(.92);transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)} .w46-loren2.go .ch{opacity:1;transform:none;transition-delay:var(--d)} .w46-loren2.go .l2{transition-delay:3.4s!important} .w46-loren2.go .l3{transition-delay:6.6s!important} .w46-loren2.go cite{transition-delay:8.8s!important} } .w46-loren2 .wd{display:inline-block;white-space:nowrap} /* Sophia Loren, right under the fun, between the blue lines (hers, 1 Oct 2026): each part of her middle line on its own, arriving one by one; her last line its own finale; and larger words for older eyes. */ .w46-loren2{min-height:0!important;padding:clamp(70px,8vw,120px) 20px clamp(80px,9vw,130px)!important;margin-top:0!important} .w46-loren2 .ln{display:block} html body .w46 .w46-loren2 p.l2:not(#a):not(#b){margin:1em auto 0!important;max-width:none!important;font-size:clamp(24px,2.4vw,34px)!important;line-height:1.5!important;font-weight:400!important} .w46-loren2 .l3rule{display:block;width:70px;height:1px;margin:1.6em auto 0;background:linear-gradient(90deg,rgba(232,181,60,0),#E8B53C,rgba(232,181,60,0))} html body .w46 .w46-loren2 p.l3:not(#a):not(#b){margin:.9em auto 0!important;max-width:none!important;font-family:"Poiret One",sans-serif!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.04em!important;font-size:clamp(28px,3.4vw,52px)!important;line-height:1.15!important;-webkit-text-stroke:.8px #C2007F} @media (prefers-reduced-motion:no-preference){ .w46-loren2 .l2,.w46-loren2 .l3{opacity:1!important;transform:none!important;animation:none!important} .w46-loren2 .ln{opacity:0;transform:translateY(16px);transition:opacity 1.2s ease,transform 1.5s cubic-bezier(.2,.8,.2,1)} .w46-loren2 .l3rule{opacity:0;transition:opacity 1.4s ease} .w46-loren2.go .ln{opacity:1;transform:none} .w46-loren2.go .l2 .ln:nth-child(1){transition-delay:3.2s}.w46-loren2.go .l2 .ln:nth-child(2){transition-delay:4.4s}.w46-loren2.go .l2 .ln:nth-child(3){transition-delay:5.6s}.w46-loren2.go .l2 .ln:nth-child(4){transition-delay:7s} .w46-loren2.go .l3rule{opacity:1;transition-delay:8.6s} .w46-loren2.go .l3 .ln:nth-child(1){transition-delay:9.2s}.w46-loren2.go .l3 .ln:nth-child(2){transition-delay:10.6s} .w46-loren2.go cite{transition-delay:12.2s!important} } /* Larger words across Wisdom for older eyes */ html body .w46 .w46-p:not(#a){font-size:clamp(21px,1.7vw,26px)!important} html body .w46 .iq-tile span:not(#a){font-size:clamp(18px,1.4vw,21px)!important} html body .w46 .iq-tile b:not(#a){font-size:16px!important} html body .w46 .wn-m .wn-card-say:not(#a){font-size:clamp(22px,2.1vw,30px)!important} html body .w46 .wn-life span,html body .w46 .w46-goldpeople .wn-b span:not(#a){font-size:18px!important} html body .w46 .w46-said .quote p:not(#iq){font-size:clamp(19px,1.5vw,22px)!important} html body .w46 .w46-fall p.fc:not(#a):not(#b),html body .w46 .w46-fall p.fd:not(#a):not(#b){font-size:clamp(23px,2.4vw,32px)!important} html body .w46 .w46-door-line{font-size:clamp(19px,1.5vw,23px)!important} .w46 .w46-you{color:#D0008C;font-weight:700;letter-spacing:.04em} @media (min-width:861px){.w46 .w46-gold .wn-pic img{object-position:50% 30%!important}} /* Readable for every age (hers, 1 Oct 2026: *Now I can't read that, and I'm not 60*). */ html body .w46 h2 .mo:not(.mo-2):not(#a){font-size:clamp(17px,1.5vw,22px)!important;letter-spacing:.16em!important;line-height:1.35!important} html body .w46 h2.w46-big:not(#a){font-family:"Poiret One",sans-serif!important;font-weight:400!important;text-transform:uppercase!important;color:#D0008C!important;-webkit-text-stroke:.9px #D0008C;font-size:clamp(34px,4.2vw,64px)!important;line-height:1.08!important;letter-spacing:.03em!important;margin:.5em auto!important;max-width:18ch!important;text-align:center!important} .w46 .w46-lead{color:#0B4F80!important} @media (max-width:860px){html body .w46 h2.w46-big:not(#a){font-size:min(10vw,44px)!important}} /* THE MONTH SLIDES ACROSS (hers, 1 Oct 2026: *I want the slider to slide across, and I think that needs to have the bluer background*). It moves on by itself; a tap moves it on sooner. */ .w46-how .wn-stage{overflow:hidden!important;background:radial-gradient(ellipse at 50% 40%,#FFFFFF 0%,#EEF6FD 40%,#E1EEFA 75%,rgba(247,250,253,0) 100%)!important} @media (prefers-reduced-motion:no-preference){ .w46-how .wn-m{opacity:0!important;transform:translateX(110%)!important;transition:transform 1.2s cubic-bezier(.65,0,.35,1),opacity .9s ease!important} .w46-how .wn-m.on{opacity:1!important;transform:translateX(0)!important;transition-delay:.1s!important} .w46-how .wn-m.out{opacity:0!important;transform:translateX(-110%)!important} } .w46-how .wn-thread b{background:linear-gradient(90deg,#2FA8E0,#9ED8F5,#2FA8E0)!important;box-shadow:0 0 8px rgba(47,168,224,.7)!important} .w46-how .wn-thread{background:rgba(47,168,224,.18)!important} /* Heading, then photo, then words (hers, 1 Oct 2026). */ .w46 .w46-headfirst{order:-1!important;text-align:center} .w46 .w46-headfirst h2{margin:0 auto!important} .w46 .w46-headfirst .wn-spark{margin:0 auto 16px!important} html body .w46 .w46-headfirst h2:not(#a),html body .w46 .w46-headfirst h2 .mo,html body .w46 .w46-headfirst h2 .mo-2{text-align:center!important} .w46 .wn-split > .wn-say:not(.w46-headfirst){text-align:center} .w46 .wn-split > .wn-say:not(.w46-headfirst) .w46-p{margin-left:auto;margin-right:auto;text-align:center} @media (max-width:860px){.w46 .wn-split{gap:22px!important}} /* Introducing Wisdom */ .w46 .w46-intro-h{margin:0 auto!important} .w46 .w46-intro-p{margin-top:.8em!important} html body .w46 p.w46-sub:not(#a){margin:clamp(34px,4vw,56px) auto 0!important;font-family:var(--head),sans-serif!important;font-weight:600!important;font-size:clamp(17px,1.5vw,22px)!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:#0B4F80!important;text-align:center!important;max-width:none!important} /* Wisdom, her pass of 1 Oct 2026 evening. */ /* the small capitals over every heading, big and dark enough for anyone to read */ html body .w46 h2 .mo:not(.mo-2):not(#a):not(#b){font-size:clamp(20px,1.9vw,28px)!important;font-weight:600!important;color:#0B4F80!important;letter-spacing:.12em!important;line-height:1.3!important} /* Introducing Wisdom, bigger */ html body .w46 h2.w46-intro-h .mo:not(.mo-2):not(#a):not(#b){font-size:clamp(22px,2.2vw,32px)!important} html body .w46 h2.w46-intro-h .mo-2:not(#a),html body .w46 h2.w46-intro-h em:not(#a){font-size:clamp(64px,8vw,128px)!important;line-height:1!important} .w46 .w46-best{color:#0B4F80!important;font-weight:500!important;margin-top:.6em!important} /* the month's arrows: back and forward, large and soft */ .w46-how .wn-stage{position:relative} .w46-arrow{position:absolute;top:50%;z-index:3;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:1px solid rgba(47,168,224,.4);background:rgba(255,255,255,.85);color:#0B4F80;font-size:34px;line-height:1;cursor:pointer;box-shadow:0 10px 24px -12px rgba(16,111,174,.5);display:flex;align-items:center;justify-content:center;padding:0 0 4px} .w46-arrow.prev{left:14px}.w46-arrow.next{right:14px} .w46-arrow:hover,.w46-arrow:focus-visible{background:#fff;color:#D0008C;border-color:rgba(208,0,140,.45)} .w46-arrow:focus-visible{outline:2px solid #D0008C;outline-offset:3px} .w46-how .wn-m{padding:0 70px} @media (max-width:760px){.w46-arrow{width:44px;height:44px;font-size:28px}.w46-arrow.prev{left:6px}.w46-arrow.next{right:6px}.w46-how .wn-m{padding:0 52px}} /* all her cards together */ .w46-cards{max-width:1180px;margin:clamp(60px,7vw,110px) auto 0;padding:0 clamp(18px,4vw,40px)} .w46-seven{display:flex!important;flex-wrap:wrap;justify-content:center;gap:16px!important;max-width:none!important;padding:0!important} .w46-seven .iq-tile{flex:0 1 calc((100% - 48px)/4);min-width:230px} @media (max-width:760px){.w46-seven .iq-tile{flex-basis:100%}} /* a little room at the sides on a phone */ @media (max-width:760px){ .w46 .wn-say,.w46 .w46-fall-in,.w46 .w46-fall-out,.w46 .w46-onward,.w46 .w46-how > h2,.w46 .w46-how > p,.w46 .w46-goldpeople,.w46 .w46-cards{padding-left:22px!important;padding-right:22px!important} .w46 .w46-loren2{padding-left:24px!important;padding-right:24px!important} .w46 .wn-stage{margin-left:14px!important;margin-right:14px!important} } html body .w46 h2.w46-intro-h span.mo.mo-2:not(#a):not(#b):not(#c),html body .w46 h2.w46-intro-h span.mo.mo-2 em:not(#a):not(#b):not(#c){font-size:clamp(58px,8vw,128px)!important;line-height:1!important} /* THE MONTH AS A TRUE CAROUSEL (1 Oct 2026; hers: *it's coming in from the wrong way*). Forward: in from the right, out to the left. Back: in from the left, out to the right. Cards waiting off stage never travel across it. */ @media (prefers-reduced-motion:no-preference){ .w46-how .wn-m{opacity:0!important;transform:translateX(130%)!important;transition:transform 1.15s cubic-bezier(.65,0,.35,1),opacity .9s ease!important;transition-delay:0s!important} .w46-how .wn-m:not(.on):not(.out):not(.outr){transition:none!important} .w46-how .wn-m.left{transform:translateX(-130%)!important;transition:none!important;opacity:0!important} .w46-how .wn-m.on{transform:translateX(0)!important;opacity:1!important} .w46-how .wn-m.out{transform:translateX(-130%)!important;opacity:0!important} .w46-how .wn-m.outr{transform:translateX(130%)!important;opacity:0!important} } /* EVERY PATHWAY MADE THE WAY WISDOM WAS (parts/pathway-2046.php), 1 Oct 2026. Wisdom's .w46 styles carry everything; these are the few moments a pathway has that Wisdom does not. */ html body .w46.p46 .p46-word{padding-top:clamp(70px,9vw,130px)!important;padding-bottom:clamp(70px,9vw,130px)!important} html body .w46.p46 p.p46-word-h:not(#a):not(#b){margin:0 auto!important;font-family:"Poiret One",sans-serif!important;font-weight:400!important;text-transform:uppercase!important;font-size:clamp(54px,10vw,150px)!important;line-height:1!important;letter-spacing:.06em!important;text-align:center!important;max-width:none!important;color:#D0008C!important;-webkit-text-stroke:1px #D0008C} html body .w46.p46 p.p46-word-says:not(#a):not(#b){margin:clamp(18px,2vw,28px) auto 0!important;max-width:24ch!important;font-family:var(--head),"Montserrat",sans-serif!important;font-weight:500!important;font-size:clamp(24px,2.6vw,36px)!important;line-height:1.3!important;text-align:center!important;color:var(--w46-ink,#0B4F80)!important} html body .w46.p46 p.p46-word-then:not(#a):not(#b){margin:clamp(16px,2vw,24px) auto 0!important;max-width:32ch!important;font-size:clamp(20px,1.9vw,26px)!important;line-height:1.55!important;text-align:center!important;color:var(--w46-ink,#0B4F80)!important} html body .w46.p46 h2.p46-cards-h:not(#a):not(#b){margin:0 auto clamp(30px,4vw,54px)!important;text-align:center!important;max-width:18ch!important} html body .w46.p46 .w46-cards{margin-top:clamp(80px,9vw,140px)!important} html body .w46.p46 .p46-family{margin:30px 0 4px;padding:26px 0 0;border-top:1px solid rgba(232,190,90,.5);text-align:center} html body .w46.p46 p.p46-family-h:not(#a){margin:0!important;font-family:var(--head),"Montserrat",sans-serif!important;font-weight:600!important;font-size:clamp(22px,2.2vw,28px)!important;line-height:1.25!important;color:var(--w46-ink,#0B4F80)!important;text-align:center!important} html body .w46.p46 p.p46-family-h em{font-family:"Poiret One",sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.04em;color:#D0008C} html body .w46.p46 p.p46-family-say:not(#a){margin:8px 0 18px!important;font-size:18px!important;line-height:1.5!important;color:var(--w46-ink,#0B4F80)!important;text-align:center!important} html body .w46.p46 p.p46-family-row:not(#a){display:flex;align-items:baseline;justify-content:center;gap:14px;margin:0 0 12px!important;text-align:left!important;font-size:18px!important;line-height:1.45!important;color:var(--w46-ink,#0B4F80)!important} html body .w46.p46 p.p46-family-row b{flex:0 0 auto;font-family:var(--head),"Montserrat",sans-serif;font-weight:600;font-size:26px;color:#D0008C} html body .w46.p46 p.p46-family-row span{max-width:26ch} html body .w46.p46 .w46-name{margin-bottom:clamp(30px,4vw,50px)} html body .w46.p46 .w46-story{position:relative} html body .w46.p46 .w46-story > canvas.w46-fx{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;pointer-events:none;z-index:0;grid-area:auto!important} html body .w46.p46 .w46-story > *:not(canvas){position:relative;z-index:1} html body .w46.p46 .w46-fall-pic img{object-position:50% 22%!important} @media (max-width:760px){html body .w46.p46 .w46-hasfilm .w46-film img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important}} @media (min-width:761px){html body .w46.p46 .w46-hero .wn-hw:not(#a){width:min(640px,46vw)!important;max-width:none!important} html body .w46.p46 .w46-hero p.wn-hc:not(#a){max-width:none!important}} @media (max-width:760px){html body .w46.p46 .wn-hero.wis-arrive:not(#iq):not(#a):not(#b) .w46-film img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important}} @media (min-width:761px){html body .w46.p46 .wn-hw p.wn-hc:not(#a):not(#b):not(#c):not(#d){max-width:46ch!important}} @media (min-width:861px){html body .w46.p46-possibilities .w46-onphoto .w46-onphoto-say:not(#a){left:52%!important;right:3%!important;top:auto!important;bottom:14%!important}} html body .w46.p46 p.p46-note span{font-family:"Poiret One",sans-serif!important;font-size:clamp(34px,4vw,48px)!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#D0008C!important} /* HER WORDS ON THE PICTURE, CENTRED AND READABLE (hers, 1 Oct 2026: *Shit isn't even centered … You can't even read the words that are on top of the hero image*). The picture melts into a soft mist at its foot and her words sit centred in it. */ @media (min-width:761px){ html body .w46.p46 .w46-hasfilm .w46-film::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(180deg,rgba(247,250,253,0) 0%,rgba(247,250,253,.78) 45%,rgba(247,250,253,.96) 78%,#F7FAFD 100%);z-index:3;pointer-events:none} html body .w46.p46 .w46-hero .wn-hw:not(#a):not(#b){left:50%!important;right:auto!important;top:auto!important;bottom:5%!important;transform:translateX(-50%)!important;width:min(980px,90vw)!important;max-width:none!important;text-align:center!important;z-index:5!important;padding:0!important} html body .w46.p46 .w46-hero .wn-hw p:not(#a):not(#b):not(#c):not(#d){text-align:center!important;margin-left:auto!important;margin-right:auto!important;max-width:none!important} html body .w46.p46 .wn-hw p.wn-hc:not(#a):not(#b):not(#c):not(#d):not(#e){max-width:52ch!important} html body .w46.p46 .w46-onphoto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;background:linear-gradient(180deg,rgba(247,250,253,0) 0%,rgba(247,250,253,.8) 55%,#F7FAFD 100%);z-index:1;pointer-events:none} html body .w46.p46 .w46-onphoto .w46-onphoto-say:not(#a):not(#b){left:0!important;right:0!important;top:auto!important;bottom:7%!important;text-align:center!important;z-index:3!important} } /* EVERY WORD SHOWING, EVERYWHERE (hers, 1 Oct 2026: *Everywhere that he has put read more, remove it and actually have all of the words that are there*). */ html body .said-more,html body .iq-more-btn{display:none!important} html body .said .quote p,html body .said-ages .quote p,html body .w46-said .quote p{display:block!important;-webkit-line-clamp:unset!important;line-clamp:unset!important;max-height:none!important;overflow:visible!important;-webkit-box-orient:initial!important} html body .iq-rest[hidden]{display:inline!important} html body .w46 .w46-loren2 p.p46-l4:not(#a):not(#b){position:relative;z-index:2;margin:1.4em auto 0!important;max-width:34ch!important;font-family:var(--head),"Montserrat",sans-serif!important;font-weight:500!important;font-size:clamp(21px,2vw,28px)!important;line-height:1.5!important;text-align:center!important;color:var(--w46-ink,#0B4F80)!important;text-transform:none!important} html body .w46 .w46-loren2 p.p46-l4 .ln{display:block;opacity:1} @media (prefers-reduced-motion:no-preference){html body .w46 .w46-loren2 p.p46-l4 .ln{opacity:0;transform:translateY(12px);transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)} html body .w46 .w46-loren2.go p.p46-l4 .ln{opacity:1;transform:none} html body .w46 .w46-loren2.go p.p46-l4 .ln:nth-child(1){transition-delay:11.8s} html body .w46 .w46-loren2.go p.p46-l4 .ln:nth-child(2){transition-delay:13s}} html body .w46 .p46-filmsay .p46-film video,html body .w46 .p46-filmsay .p46-film img{width:100%;height:100%;object-fit:cover;display:block} /* POSSIBILITIES HERO: SEE THE GIRL WHOLE, HER WORDS AT THE SIDE AS A MOMENT (hers, 1 Oct 2026: *I want to see the girl properly. Don't cover the bottom of the video. Put the words at the side and make them a moment*). */ html body .w46.p46-possibilities .w46-hasfilm .w46-film::after{content:none!important;display:none!important} html body .w46.p46-possibilities .w46-hasfilm .w46-film:not(#a){height:auto!important;min-height:0!important;aspect-ratio:3/2} html body .w46.p46-possibilities .wn-hero.wis-arrive:not(#iq):not(#a):not(#b) .w46-film video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important;-webkit-mask-image:none!important;mask-image:none!important} @media (min-width:761px){ html body .w46.p46-possibilities .w46-hero .wn-hw:not(#a):not(#b):not(#c){left:auto!important;right:3%!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;width:min(420px,28vw)!important;padding:36px 20px!important;text-align:center!important;background:radial-gradient(closest-side,rgba(247,250,253,.72),rgba(247,250,253,0))} html body .w46.p46-possibilities .wn-hw p.wn-hc:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f){max-width:24ch!important} } /* HER LITTLE BIT, GENTLE: her heading and her lines arriving softly, no fountain. */ html body .w46 .p46-poem{max-width:900px;margin:clamp(60px,7vw,110px) auto 0;padding:0 22px;text-align:center} html body .w46 .p46-poem h2{text-align:center;margin:0 auto clamp(22px,3vw,36px)} html body .w46 .p46-poem p.p46-poem-lines:not(#a):not(#b){margin:0 auto!important;max-width:none!important;font-family:var(--head),"Montserrat",sans-serif!important;font-weight:400!important;font-size:clamp(21px,2.1vw,29px)!important;line-height:1.6!important;color:var(--w46-ink,#0B4F80)!important;text-align:center!important} html body .w46 .p46-poem p.p46-poem-close:not(#a):not(#b){margin:clamp(22px,3vw,34px) auto 0!important;max-width:none!important;font-family:var(--head),"Montserrat",sans-serif!important;font-weight:600!important;font-size:clamp(19px,1.8vw,25px)!important;line-height:1.55!important;color:#D0008C!important;text-align:center!important} html body .w46 .p46-poem .ln{display:block} @media (prefers-reduced-motion:no-preference){ html body .w46 .p46-poem .ln{opacity:0;transform:translateY(10px);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)} html body .w46 .p46-poem.go .ln{opacity:1;transform:none} html body .w46 .p46-poem.go .p46-poem-lines .ln:nth-child(2){transition-delay:.5s} html body .w46 .p46-poem.go .p46-poem-lines .ln:nth-child(3){transition-delay:1s} html body .w46 .p46-poem.go .p46-poem-lines .ln:nth-child(4){transition-delay:1.8s} html body .w46 .p46-poem.go .p46-poem-lines .ln:nth-child(5){transition-delay:2.3s} html body .w46 .p46-poem.go .p46-poem-close .ln:nth-child(1){transition-delay:3.2s} html body .w46 .p46-poem.go .p46-poem-close .ln:nth-child(2){transition-delay:3.8s} /* MORE MOVEMENT (hers, 1 Oct 2026: *Needs to be way more movement … through the whole thing*): every picture breathes slowly. */ html body .w46.p46 .wn-pic,html body .w46.p46 .w46-onphoto{overflow:hidden} html body .w46.p46 .wn-pic img,html body .w46.p46 .w46-onphoto > img{animation:p46Breathe 22s ease-in-out infinite alternate;transform-origin:50% 45%} } @keyframes p46Breathe{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(-1.2%,-1%,0)}} @media (min-width:761px){html body .w46.p46-possibilities .w46-hero .wn-hw:not(#a):not(#b):not(#c):not(#d){right:auto!important;left:3%!important}} html body .w46 .p46-filmsay .wn-pic{opacity:0;transition:opacity 1.4s ease} html body .w46 .p46-filmsay.is-in .wn-pic,html body .w46 .p46-filmsay:not(.float) .wn-pic{opacity:1!important} @media (prefers-reduced-motion:reduce){html body .w46 .p46-filmsay .wn-pic{opacity:1!important}} html body .w46.p46-possibilities .wn-hw p.wn-ha:not(#a):not(#b):not(#c):not(#d):not(#e){font-size:clamp(26px,2.7vw,44px)!important;line-height:1.2!important;letter-spacing:.1em!important;font-weight:600!important} @media (min-width:761px){html body .w46.p46-possibilities .w46-hero .wn-hw:not(#a):not(#b):not(#c):not(#d):not(#e){width:min(500px,31vw)!important}} /* HER QUESTIONS, EVERY WORD SHOWING, and her figures with their sources (1 Oct 2026). */ html body .w46 .p46-faq{max-width:900px;margin:clamp(70px,8vw,120px) auto 0;padding:0 22px;text-align:center} html body .w46 .p46-faq-list{display:grid;gap:18px;margin:clamp(24px,3vw,40px) 0 0;text-align:left} html body .w46 .p46-qa{background:rgba(255,255,255,.82);border:1px solid rgba(208,0,140,.16);border-radius:22px;padding:clamp(22px,3vw,34px);box-shadow:0 22px 50px -34px rgba(11,79,128,.45)} html body .w46 .p46-qa h3{margin:0 0 10px;font-family:var(--head),"Montserrat",sans-serif;font-weight:600;font-size:clamp(20px,2vw,26px);line-height:1.3;color:#D0008C} html body .w46 .p46-qa p{margin:0 0 10px;font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--w46-ink,#0B4F80)} html body .w46 .p46-qa p:last-child{margin-bottom:0} html body .w46 .p46-ken{max-width:820px;margin:0 auto clamp(40px,5vw,70px);padding:0} html body .w46 .p46-ken p{margin:0;font-family:var(--head),"Montserrat",sans-serif;font-weight:500;font-size:clamp(22px,2.3vw,32px);line-height:1.45;color:var(--w46-ink,#0B4F80);text-align:center} html body .w46 .p46-ken cite{display:block;margin-top:14px;font-style:normal;font-family:var(--head),sans-serif;font-weight:600;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:#B67A00;text-align:center} html body .w46 .p46-stats .wn-b{text-align:center;align-items:center} html body .w46 .p46-stats .wn-b span{font-size:clamp(17px,1.5vw,20px)!important} html body .w46 .p46-tiles .p46-tiles-say{margin-top:-10px!important;margin-bottom:28px!important;color:#B67A00!important;font-weight:600!important} /* CLOSER TOGETHER (hers, 1 Oct 2026: *Putting the information out way too much. Just move it up a bit better*). */ html body .w46.p46 > .iq-thread.w46-thread:not(#a){margin-top:14px!important;margin-bottom:14px!important;height:56px!important} html body .w46.p46 > section:not(.w46-hero):not(#a):not(#b){margin-top:10px!important} html body .w46.p46 > section.wn-golden:not(#a):not(#b){padding-top:clamp(44px,5vw,70px)!important;padding-bottom:clamp(44px,5vw,70px)!important} html body .w46.p46 > .said:not(#a){margin-top:clamp(40px,5vw,70px)!important} /* HER SONG (home and Passion), 1 Oct 2026. */ .iq-song{position:relative;max-width:980px;margin:clamp(50px,6vw,90px) auto;padding:clamp(40px,5vw,70px) 22px;text-align:center;overflow:hidden} .iq-song-glow{position:absolute;left:50%;top:50%;width:min(760px,96vw);height:min(760px,96vw);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,160,230,.32),rgba(255,200,240,.12) 55%,rgba(255,255,255,0));pointer-events:none;z-index:0} .iq-song > *:not(.iq-song-glow){position:relative;z-index:1} .iq-song h2{text-align:center;margin:0 auto clamp(20px,3vw,34px)} .iq-song blockquote{margin:0 auto;max-width:30ch;padding:0} .iq-song p.iq-song-q{margin:0;font-family:var(--head),"Montserrat",sans-serif;font-weight:500;font-size:clamp(24px,2.8vw,40px);line-height:1.38;color:var(--w46-ink,#0B4F80);text-align:center} .iq-song cite{display:block;margin-top:16px;font-style:normal;font-family:var(--head),sans-serif;font-weight:600;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:#B67A00} .iq-song p.iq-song-hers{margin:clamp(24px,3vw,38px) auto 0;max-width:34ch;font-family:var(--head),"Montserrat",sans-serif;font-weight:600;font-size:clamp(19px,1.9vw,26px);line-height:1.5;color:#D0008C;text-align:center} @media (prefers-reduced-motion:no-preference){ .iq-song-glow{animation:iqSongBreathe 7s ease-in-out infinite alternate} .iq-song h2,.iq-song blockquote,.iq-song p.iq-song-hers{opacity:0;transform:translateY(14px);transition:opacity 1.3s ease,transform 1.5s cubic-bezier(.2,.8,.2,1)} .iq-song.go h2,.iq-song.go blockquote,.iq-song.go p.iq-song-hers{opacity:1;transform:none} .iq-song.go blockquote{transition-delay:.6s}.iq-song.go p.iq-song-hers{transition-delay:1.6s}} @keyframes iqSongBreathe{from{transform:translate(-50%,-50%) scale(.9);opacity:.7}to{transform:translate(-50%,-50%) scale(1.08);opacity:1}} /* NO GOLD ON POSSIBILITIES (hers, 1 Oct 2026: *They're absolutely stunning gold … but it doesn't really work on this page … we don't need to introduce gold or yellow here*). Her pinks instead. */ html body .w46.p46-possibilities .wn-spark:not(#a):not(#b){background-image:radial-gradient(circle,#fff 0%,#FF8FE0 35%,rgba(226,58,203,0) 70%)!important} html body .w46.p46-possibilities section.wn-golden:not(#a):not(#b):not(#c){background:radial-gradient(ellipse at 50% 30%,rgba(255,150,230,.24),rgba(170,190,255,.12) 55%,rgba(247,250,253,0) 80%)!important} html body .w46.p46-possibilities .wn-b:not(#a):not(#b){border-color:rgba(208,0,140,.22)!important} html body .w46.p46-possibilities .wn-b b:not(#a):not(#b):not(#c){background-image:linear-gradient(110deg,#D0008C 0%,#E23ACB 50%,#FF7AD9 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-stroke:0!important} html body .w46.p46-possibilities h2 .mo-2:not(#a):not(#b):not(#c),html body .w46.p46-possibilities h2 em:not(#a):not(#b):not(#c),html body .w46.p46-possibilities p.e2:not(#a):not(#b):not(#c):not(#d){background-image:linear-gradient(100deg,#D0008C 0%,#D0008C 40%,#FF9BE6 50%,#E23ACB 60%,#D0008C 100%)!important;-webkit-text-stroke-color:#D0008C!important} html body .w46.p46-possibilities p.p46-tiles-say:not(#a):not(#b),html body .w46.p46-possibilities .w46-name label:not(#a),html body .w46.p46-possibilities .w46-price span:not(#a),html body .w46.p46-possibilities .w46-door-go:not(#a),html body .w46.p46-possibilities cite:not(#a){color:#D0008C!important;-webkit-text-stroke-color:#D0008C!important;border-color:rgba(208,0,140,.25)!important} html body .w46.p46-possibilities .w46-card li::before{color:#E23ACB!important} html body .w46.p46-possibilities .w46-card:not(#a),html body .w46.p46-possibilities .p46-family:not(#a),html body .w46.p46-possibilities .w46-door:not(#a){border-color:rgba(208,0,140,.22)!important} html body .w46.p46-possibilities .w46-door:not(#a){background:linear-gradient(160deg,rgba(255,230,248,.9),rgba(255,255,255,.95))!important} /* (the no-gold change is Possibilities only — hers, 1 Oct 2026: *Why is passion in pink ribbon … Looks ridiculous*) */ /* SPECTACULAR, WITH NO PICTURE SHE HASN'T CHOSEN (hers, 1 Oct 2026: *as spectacular and as sexy and 2046 as possible*). Each word-only moment moves in its own way, drawn in light. */ html body .w46.p46 .w46-story.p46-textonly:not(#a):not(#b){display:block!important;position:relative;max-width:1040px;margin-left:auto!important;margin-right:auto!important;padding:clamp(70px,9vw,130px) 22px!important;text-align:center;overflow:hidden;border-radius:clamp(0px,3vw,40px)} html body .w46.p46 .p46-textonly .wn-say{max-width:780px;margin:0 auto!important;text-align:center!important;position:relative;z-index:1} html body .w46.p46 .p46-textonly .wn-say p{text-align:center!important} html body .w46.p46 .p46-fxl{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden} html body .w46.p46 .p46-fxl b{position:absolute;display:block} html body .w46.p46 .p46-fx > *:not(.p46-fxl){position:relative;z-index:1} /* MIRROR: the heading in still water */ html body .w46.p46 .p46-fx-mirror h2{-webkit-box-reflect:below -6px linear-gradient(transparent 52%,rgba(255,255,255,.34))} html body .w46.p46 .p46-fx-mirror .p46-fxl b:first-child{left:0;right:0;top:0;bottom:0;background:linear-gradient(180deg,rgba(247,250,253,0) 30%,rgba(170,200,255,.16) 60%,rgba(255,170,230,.14) 100%)} /* LIGHT: a pink light blooms and the words light up */ html body .w46.p46 .p46-fx-light .p46-fxl b:first-child{left:50%;top:45%;width:min(900px,120vw);height:min(900px,120vw);margin:calc(min(900px,120vw)/-2) 0 0 calc(min(900px,120vw)/-2);border-radius:50%;background:radial-gradient(closest-side,rgba(255,140,220,.5),rgba(255,190,240,.22) 50%,rgba(255,255,255,0));transform:scale(.15);opacity:0;transition:transform 2.6s cubic-bezier(.2,.8,.2,1),opacity 2s ease} html body .w46.p46 .p46-fx-light.is-in .p46-fxl b:first-child{transform:scale(1);opacity:1} html body .w46.p46 .p46-fx-light .wn-say p{color:#AEB9C8!important;transition:color 1.6s ease} html body .w46.p46 .p46-fx-light.is-in .wn-say p{color:var(--w46-ink,#0B4F80)!important} html body .w46.p46 .p46-fx-light.is-in .wn-say p:nth-child(2){transition-delay:1s} html body .w46.p46 .p46-fx-light.is-in .wn-say p.w46-strong{color:#D0008C!important;transition-delay:2s} /* CLOUDS: daydreams drifting behind the words */ html body .w46.p46 .p46-fx-clouds .p46-fxl b{border-radius:50%;filter:blur(38px);opacity:.75} html body .w46.p46 .p46-fx-clouds .p46-fxl b:nth-child(1){width:46%;height:60%;left:-8%;top:8%;background:#fff;animation:p46Drift 26s ease-in-out infinite alternate} html body .w46.p46 .p46-fx-clouds .p46-fxl b:nth-child(2){width:40%;height:52%;right:-6%;top:30%;background:rgba(255,190,240,.8);animation:p46Drift 32s ease-in-out infinite alternate-reverse} html body .w46.p46 .p46-fx-clouds .p46-fxl b:nth-child(3){width:38%;height:44%;left:30%;bottom:-14%;background:rgba(190,205,255,.75);animation:p46Drift 38s ease-in-out infinite alternate} html body .w46.p46 .p46-fx-clouds .p46-fxl b:nth-child(4){width:30%;height:36%;left:12%;top:-12%;background:rgba(255,220,250,.9);animation:p46Drift 30s ease-in-out infinite alternate-reverse} @keyframes p46Drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9%,-7%,0) scale(1.18)}} /* PULSE: come alive, a heartbeat of light */ html body .w46.p46 .p46-fx-pulse .p46-fxl b{left:50%;top:24%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;border:2px solid rgba(226,58,203,.45);box-shadow:0 0 40px rgba(255,120,220,.35),inset 0 0 30px rgba(255,150,230,.25);opacity:0;animation:p46Pulse 4.8s cubic-bezier(.2,.6,.3,1) infinite} html body .w46.p46 .p46-fx-pulse .p46-fxl b:nth-child(2){animation-delay:1.2s} html body .w46.p46 .p46-fx-pulse .p46-fxl b:nth-child(3){animation-delay:2.4s} html body .w46.p46 .p46-fx-pulse .p46-fxl b:nth-child(4){animation-delay:3.6s;border-color:rgba(110,150,255,.4)} @keyframes p46Pulse{0%{transform:scale(.25);opacity:0}15%{opacity:.9}100%{transform:scale(3.2);opacity:0}} /* COLOUR: good-bye boredom, grey floods into colour */ html body .w46.p46 .p46-fx-colour{filter:grayscale(1);opacity:.7;transition:filter 2.8s ease,opacity 2s ease} html body .w46.p46 .p46-fx-colour.is-in{filter:none;opacity:1} html body .w46.p46 .p46-fx-colour .p46-fxl b:first-child{inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(255,140,220,.32),transparent 60%),radial-gradient(ellipse at 75% 80%,rgba(120,160,255,.26),transparent 60%);opacity:0;transition:opacity 3s ease 1s} html body .w46.p46 .p46-fx-colour.is-in .p46-fxl b:first-child{opacity:1} /* KINETIC: her four commands, huge, sweeping in */ html body .w46.p46 .p46-fx-kinetic{overflow:hidden;position:relative} html body .w46.p46 .p46-fx-kinetic p.p46-poem-lines:not(#a):not(#b) .ln,html body .w46.p46 .p46-fx-kinetic p.p46-poem-close:not(#a):not(#b) .ln{font-family:"Poiret One",sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(40px,7.4vw,112px);line-height:1.04;font-weight:400} html body .w46.p46 .p46-fx-kinetic p.p46-poem-lines .ln{color:#D0008C} html body .w46.p46 .p46-fx-kinetic p.p46-poem-lines .ln:nth-child(2){color:#0B4F80} html body .w46.p46 .p46-fx-kinetic p.p46-poem-close .ln{background:linear-gradient(100deg,#D0008C,#E23ACB 45%,#6E8BFF);-webkit-background-clip:text;background-clip:text;color:transparent} /* FAN: a peacock fan of light opening behind Strut Your Stuff */ html body .w46.p46 .p46-fx-fan{position:relative;overflow:hidden;padding-bottom:clamp(40px,5vw,70px)} html body .w46.p46 .p46-fx-fan .p46-fxl b{left:50%;bottom:-6%;width:clamp(70px,9vw,130px);height:clamp(320px,62vw,720px);margin-left:calc(clamp(70px,9vw,130px)/-2);border-radius:50% 50% 46% 46%/62% 62% 38% 38%;transform-origin:50% 100%;background:radial-gradient(ellipse at 50% 22%,rgba(255,255,255,.9) 0 7%,rgba(110,150,255,.55) 8% 14%,rgba(226,58,203,.35) 15% 30%,rgba(255,170,230,.16) 55%,rgba(255,200,240,0) 80%);opacity:.0;transform:rotate(0deg) scaleY(.2);transition:transform 2.2s cubic-bezier(.2,.8,.2,1),opacity 1.6s ease} html body .w46.p46 .p46-fx-fan.go .p46-fxl b{opacity:.75} html body .w46.p46 .p46-fx-fan.go .p46-fxl b:nth-child(1){transform:rotate(-72deg) scaleY(1)} html body .w46.p46 .p46-fx-fan.go .p46-fxl b:nth-child(2){transform:rotate(-54deg) scaleY(1);transition-delay:.08s} html body .w46.p46 .p46-fx-fan.go .p46-fxl b:nth-child(3){transform:rotate(-36deg) scaleY(1);transition-delay:.16s} html body .w46.p46 .p46-fx-fan.go .p46-fxl b:nth-child(4){transform:rotate(-18deg) scaleY(1);transition-delay:.24s} html body .w46.p46 .p46-fx-fan.go .p46-fxl b:nth-child(5){transform:rotate(0deg) scaleY(1);transition-delay:.32s} html body .w46.p46 .p46-fx-fan.go .p46-fxl b:nth-child(6){transform:rotate(18deg) scaleY(1);transition-delay:.4s} html body .w46.p46 .p46-fx-fan.go .p46-fxl b:nth-child(7){transform:rotate(36deg) scaleY(1);transition-delay:.48s} html body .w46.p46 .p46-fx-fan.go .p46-fxl b:nth-child(8){transform:rotate(54deg) scaleY(1);transition-delay:.56s} html body .w46.p46 .p46-fx-fan.go .p46-fxl b:nth-child(9){transform:rotate(72deg) scaleY(1);transition-delay:.64s} html body .w46.p46 .p46-fx-fan .p46-poem-lines,html body .w46.p46 .p46-fx-fan .p46-poem-close,html body .w46.p46 .p46-fx-fan h2{text-shadow:0 0 18px rgba(247,250,253,.95),0 0 4px rgba(247,250,253,.9)} @media (prefers-reduced-motion:no-preference){ html body .w46.p46 .p46-fx-kinetic p.p46-poem-lines .ln,html body .w46.p46 .p46-fx-kinetic p.p46-poem-close .ln{opacity:0;transform:translateX(-30vw);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.9,.2,1)} html body .w46.p46 .p46-fx-kinetic p.p46-poem-lines .ln:nth-child(even){transform:translateX(30vw)} html body .w46.p46 .p46-fx-kinetic.go p.p46-poem-lines .ln,html body .w46.p46 .p46-fx-kinetic.go p.p46-poem-close .ln{opacity:1;transform:none} html body .w46.p46 .p46-fx-kinetic.go p.p46-poem-lines .ln:nth-child(2){transition-delay:.7s} html body .w46.p46 .p46-fx-kinetic.go p.p46-poem-lines .ln:nth-child(3){transition-delay:1.4s} html body .w46.p46 .p46-fx-kinetic.go p.p46-poem-close .ln{transition-delay:2.2s}} @media (prefers-reduced-motion:reduce){html body .w46.p46 .p46-fx-fan .p46-fxl b{opacity:.6}html body .w46.p46 .p46-fx-pulse .p46-fxl b{animation:none;opacity:.4}html body .w46.p46 .p46-fx-clouds .p46-fxl b{animation:none}html body .w46.p46 .p46-fx-colour{filter:none;opacity:1}} html body .w46.p46 .p46-fx > i.p46-fxl:not(#a):not(#b){position:absolute!important;inset:0!important;display:block!important;z-index:0!important} html body .w46.p46-possibilities h2 .mo-2:not(#a):not(#b):not(#c):not(#d),html body .w46.p46-possibilities h2 em:not(#a):not(#b):not(#c):not(#d){background-image:none!important;background:none!important;color:#D0008C!important;-webkit-text-fill-color:#D0008C!important} /* EVERYTHING CENTRED, LIKE THE REST OF HER WEBSITE (hers, 1 Oct 2026: *Stuff is left justified, whereas everything else on the entire website is center justified*). */ html body .w46.p46 .iq-tile:not(#a){text-align:center!important;align-items:center!important;justify-items:center!important} html body .w46.p46 .iq-tile b:not(#a),html body .w46.p46 .iq-tile span:not(#a){text-align:center!important;margin-left:auto!important;margin-right:auto!important} html body .w46.p46 .w46-said .quote:not(#a),html body .w46.p46 .w46-said .quote p:not(#a),html body .w46.p46 .w46-said .quote cite:not(#a),html body .w46.p46 .w46-said .said-age:not(#a){text-align:center!important} html body .w46.p46 .p46-faq-list:not(#a),html body .w46.p46 .p46-qa:not(#a),html body .w46.p46 .p46-qa h3:not(#a),html body .w46.p46 .p46-qa p:not(#a){text-align:center!important} html body .w46.p46 p.p46-family-row:not(#a):not(#b){display:block!important;text-align:center!important} html body .w46.p46 p.p46-family-row b{display:block;margin:0 auto 2px} html body .w46.p46 p.p46-family-row span{display:block;max-width:none!important} /* (Wisdom left as she finished it — hers, 1 Oct 2026: *wisdom is already done*) */ /* THE MENU: every program name in capitals, all six equal (hers, 4 Oct 2026: *I absolutely hate the menu. Have the business, the program name in capitals, please. I love the burger menu*) */ html body .iq-menu .iq-six:not(#iq){gap:14px!important} html body .iq-menu .iq-six li.main a:not(#iq),html body .iq-menu .iq-six li.small a:not(#iq){display:block!important;font-family:"Montserrat",sans-serif!important;font-weight:600!important;font-size:17px!important;letter-spacing:.22em!important;text-transform:uppercase!important;color:#0B4F80!important;opacity:1!important;line-height:1.2!important} html body .iq-menu .iq-six li a:hover:not(#iq),html body .iq-menu .iq-six li a:focus-visible:not(#iq){color:#E23ACB!important} html body .iq-menu .iq-six small:not(#iq){display:block!important;margin-top:5px!important;font-family:"Montserrat",sans-serif!important;font-weight:500!important;font-size:10.5px!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:#E23ACB!important;opacity:.9!important}