:root{
  --sky:#EAF1F8; --cloud:#F7FAFD; --white:#FFFFFF;
  --magenta:#D421BB; --magenta-ink:#D0008C;
  --current:#2FA8E0; --current-ink:#17698F;
  --ink:#2E2A38; --ink-soft:#5A5470;
  --hair:rgba(46,42,56,.12);
  --display:"Jost",system-ui,-apple-system,sans-serif;
  --serif:"Cormorant",Georgia,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(46,42,56,.32),0 2px 5px rgba(46,42,56,.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(46,42,56,.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(46,42,56,.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)}
.up-frame img{display:block;width:100%;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,#22303C);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,#22303C)}
.lost h2 em{color:var(--magenta-ink,#D0008C);font-style:italic}

.lost-figures{display:grid;gap:30px;max-width:1180px;margin:44px auto 8px;
  padding:0 26px;position:relative;z-index:1}
@media(min-width:640px){.lost-figures{grid-template-columns:1fr 1fr;gap:38px 34px}}
@media(min-width:1040px){.lost-figures{grid-template-columns:repeat(4,1fr)}}

.lost-one b{display:block;font-family:var(--display);font-weight:200;
  font-size:clamp(58px,17vw,86px);line-height:1;letter-spacing:-.01em;color:var(--blue-ink,#17698F);
  font-variant-numeric:tabular-nums}
.lost-one b span{font-size:.42em;margin-left:2px;opacity:.72}
.lost-one.is-last b{color:var(--magenta-ink,#D0008C)}
.lost-say{display:block;margin-top:14px;font-family:var(--serif);font-weight:300;
  font-size:15.5px;line-height:1.5;opacity:.76;max-width:24ch}
.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,#22303C);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,#22303C)}
.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,#22303C);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,#22303C)}
.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,#2E2A38);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,#2E2A38)}
.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,#2E2A38)}
.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,#2E2A38)}
.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(46,42,56,.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)}