/* LIFE AUDIT — early-morning green, deep leaf, marigold. A garden bed that answers the page. */
.la{overflow-x:clip;background:var(--ground);color:var(--ink)}
.la-eyebrow{font-family:var(--body);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--signal-deep);margin:0 0 1rem}
[data-rise]{opacity:0;transform:translateY(18px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}[data-rise].is-in{opacity:1;transform:none}
.la-open{min-height:80vh;display:grid;align-content:center;padding:clamp(5rem,10vh,8rem) 6vw clamp(3rem,6vh,5rem);max-width:60rem;margin:0 auto}
.la-name{font-family:var(--name);font-weight:800;font-size:clamp(3rem,10vw,7.5rem);line-height:.95;letter-spacing:-.02em;margin:0 0 1rem;color:var(--ink);animation:la-in 1.2s cubic-bezier(.2,.7,.2,1) both}
.la-line{font-family:var(--head);font-style:italic;font-size:clamp(1.4rem,3vw,2.2rem);margin:0 0 .8rem;color:var(--signal-deep);animation:la-in 1.2s .25s both}
.la-sub{font-family:var(--body);font-size:1.05rem;line-height:1.6;max-width:36rem;margin:0 0 2rem;animation:la-in 1.2s .45s both}
.la-imagine{font-family:var(--head);font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.4;max-width:40rem;margin:0;padding-left:1.2rem;border-left:4px solid var(--signal);animation:la-in 1.2s .7s both}
@keyframes la-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.la-garden{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,5rem);padding:clamp(2rem,5vh,4rem) 6vw;max-width:84rem;margin:0 auto;align-items:start}
.la-garden__bed{position:sticky;top:5rem}
.la-svg{width:100%;height:auto;display:block;border-radius:1.4rem;box-shadow:0 30px 60px -40px rgba(15,61,46,.5)}
.la-acts{list-style:none;margin:0;padding:clamp(3rem,20vh,10rem) 0}
.la-act{min-height:70vh;display:grid;align-content:center;opacity:.28;transition:opacity .6s ease}
.la-act.is-on{opacity:1}
.la-act__n{font-family:var(--body);font-size:.7rem;letter-spacing:.24em;color:var(--signal-deep)}
.la-act h2{font-family:var(--name);font-weight:800;font-size:clamp(2.2rem,6vw,4.6rem);line-height:1;margin:.3rem 0 .8rem;color:var(--ink)}
.la-act__line{font-family:var(--head);font-style:italic;font-size:clamp(1.15rem,2.2vw,1.55rem);margin:0 0 .6rem;color:var(--signal-deep)}
.la-act__m{font-family:var(--body);font-size:1.02rem;line-height:1.65;margin:0;max-width:28rem}
/* the bed answering */
.la-weed{transition:opacity .8s ease,transform .8s ease;transform-box:fill-box;transform-origin:bottom}.la-svg.did-pull .la-weed{opacity:0;transform:translateY(-30px) rotate(20deg)}
.la-branch,.la-branch__leaf{transition:opacity .8s ease,transform 1s ease;transform-box:fill-box;transform-origin:left}.la-svg.did-prune .la-branch,.la-svg.did-prune .la-branch__leaf{opacity:0;transform:rotate(35deg) translateY(30px)}
.la-sprout{opacity:0;transition:opacity .9s ease .2s}.la-svg.did-plant .la-sprout{opacity:1}
.la-water{opacity:0;transition:opacity .5s ease}.la-svg.did-water .la-water{opacity:1;animation:la-rain 1.6s ease-in infinite}
.la-canopy{transition:fill 1.2s ease,r 1.2s ease}.la-svg.did-water .la-canopy{fill:#3E8F3A}
.la-blooms{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.9,.3,1.3)}.la-svg.did-fert .la-blooms{opacity:1;transform:scale(1)}
.la-svg.did-fert .la-canopy{r:38}
@keyframes la-rain{from{transform:translateY(0);opacity:1}to{transform:translateY(160px);opacity:0}}
.la-reg{text-align:center;padding:clamp(4rem,10vh,8rem) 6vw;background:#fff}
.la-reg h2{font-family:var(--name);font-weight:800;font-size:clamp(1.8rem,4vw,3rem);margin:0 0 1.6rem;color:var(--ink)}
.la-reg__row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.la-reg__row span{font-family:var(--body);font-size:.85rem;letter-spacing:.08em;padding:.5rem .9rem;border:1px solid rgba(15,61,46,.2);border-radius:99px;color:var(--ink)}.la-reg__row .is-on{background:var(--signal);border-color:var(--signal);color:var(--ink);font-weight:600}
.la-close{text-align:center;padding:clamp(5rem,12vh,9rem) 6vw}
.la-close__head{font-family:var(--name);font-weight:800;font-size:clamp(2.4rem,7vw,5.4rem);line-height:1;margin:0 0 1rem;color:var(--ink)}
.la-close__p{font-family:var(--body);font-size:1.05rem;margin:0 0 1rem}.la-close__last{font-family:var(--head);font-style:italic;font-size:clamp(1.4rem,3vw,2.2rem);color:var(--signal-deep);margin:0}
@media(max-width:820px){.la-garden{grid-template-columns:1fr}.la-garden__bed{top:4.4rem;z-index:1}.la-act{min-height:60vh}}
@media(prefers-reduced-motion:reduce){.la *{animation:none!important;transition:none!important}.la-act{opacity:1}[data-rise]{opacity:1!important;transform:none!important}.la-svg .la-weed,.la-svg .la-branch,.la-svg .la-branch__leaf{opacity:0}.la-svg .la-sprout,.la-svg .la-blooms{opacity:1;transform:none}}

/* ══ THE GARDEN SWEEP ══════════════════════════════════════════════════════
 *
 * Her first experience, section 6 of her own plan. Early-morning green
 * ground, deep leaf ink, marigold for the one press — the world's own three
 * colours, nothing new introduced.
 */
.la-sweep{max-width:52rem;margin:0 auto;padding:clamp(2rem,7vw,4rem) clamp(18px,5vw,2rem) clamp(3rem,9vw,5rem)}
.sweep-head{font-family:var(--name);font-weight:800;font-size:clamp(2rem,7vw,3.4rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 1.4rem;color:var(--ink)}
.sweep-say{font-family:var(--head);font-style:italic;font-size:clamp(1.25rem,3.4vw,1.75rem);line-height:1.35;margin:0 0 1.2rem;color:var(--signal-deep)}
.sweep-list{font-family:var(--body);font-size:clamp(1rem,2.6vw,1.1rem);line-height:1.75;margin:0 0 1.2rem;color:var(--ink);opacity:.9}
.sweep-gather{font-family:var(--head);font-style:italic;font-size:clamp(1.15rem,3vw,1.5rem);margin:0;color:var(--ink)}

.sweep-kept{margin:2rem 0 0;padding:.9rem 1.1rem;border-radius:12px;background:var(--signal);color:var(--on-signal);font-family:var(--body);font-weight:600}

.sweep-already{margin:2.4rem 0 0;padding:1.2rem 1.3rem;border:1px solid rgba(15,61,46,.16);border-radius:16px;background:rgba(255,255,255,.5)}
.sweep-seeds{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .9rem;padding:0;list-style:none}
.sweep-seeds li{font-family:var(--body);font-size:.88rem;padding:.4rem .75rem;border-radius:99px;background:var(--signal);color:var(--on-signal);font-weight:600}
.sweep-nothing{font-family:var(--body);font-size:.95rem;margin:0;opacity:.78}

.sweep-form{margin:2.6rem 0 0}
.sweep-way{margin:0 0 2.6rem}
.sweep-way__say{font-family:var(--body);font-size:1rem;line-height:1.6;margin:0 0 1.1rem;max-width:40rem;opacity:.88}

.sweep-group{margin:0 0 1.6rem}
.sweep-group__head{font-family:var(--head);font-size:clamp(1.05rem,2.6vw,1.25rem);font-weight:600;margin:0 0 .7rem;color:var(--signal-deep)}
.sweep-tiles{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none}
.sweep-tiles li{margin:0;padding:0}

/* A tile is the thing pressed, so the whole of it is the control. */
.sweep-tile{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border:1px solid rgba(15,61,46,.22);border-radius:99px;background:rgba(255,255,255,.55);font-family:var(--body);font-size:.9rem;color:var(--ink);cursor:pointer;transition:background .15s ease,border-color .15s ease}
.sweep-tile:hover{border-color:var(--signal-deep)}
.sweep-tile input{margin:0;accent-color:var(--signal-deep)}
.sweep-tile:has(input:checked){background:var(--signal);border-color:var(--signal);font-weight:600}

.sweep-write{display:block}
.sweep-write textarea{display:block;width:100%;margin:0;padding:1rem;border:1px solid rgba(15,61,46,.22);border-radius:14px;background:rgba(255,255,255,.6);font-family:var(--body);font-size:1rem;line-height:1.6;color:var(--ink);resize:vertical}
.sweep-write textarea:focus-visible{outline:2px solid var(--signal-deep);outline-offset:2px}

/* One press, her marigold, one solid colour — her 4 October law. */
.sweep-go{display:block;width:100%;max-width:22rem;margin:0;padding:1.05rem 1.6rem;border:0;border-radius:99px;background:var(--signal);color:var(--on-signal);font-family:var(--body);font-weight:700;font-size:1.05rem;cursor:pointer;transition:transform .2s ease}
.sweep-go:hover,.sweep-go:focus-visible{transform:translateY(-2px)}
.sweep-quiet{font-family:var(--body);font-size:.9rem;margin:1rem 0 0;opacity:.72;max-width:36rem}

@media (prefers-reduced-motion:reduce){.sweep-tile,.sweep-go{transition:none}.sweep-go:hover{transform:none}}

/* ══ THE MARK — a sampler ══════════════════════════════════════════════════
 *
 * Her three colours and nothing else: early-morning green, deep leaf,
 * marigold. Every mark is type, so each one is sharp at any size and is
 * changed in a second.
 */
.mark-page{max-width:46rem;margin:0 auto;padding:clamp(2rem,7vw,3.5rem) clamp(18px,5vw,2rem) clamp(3rem,9vw,5rem)}
.mark-h1{font-family:var(--name);font-weight:800;font-size:clamp(1.9rem,6.4vw,3rem);line-height:1.04;letter-spacing:-.02em;margin:0 0 .9rem;color:var(--ink)}
.mark-say{font-family:var(--body);font-size:1.02rem;line-height:1.6;margin:0 0 2.4rem;max-width:36rem;opacity:.88}

.mark-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.6rem,5vw,2.4rem)}
.mark-one{margin:0}
.mark-label{font-family:var(--body);font-size:.95rem;line-height:1.55;margin:.75rem 0 0;opacity:.85}
.mark-label b{font-weight:700;opacity:1}

.mark-stage{display:grid;place-items:center;padding:clamp(1.8rem,7vw,2.8rem) 1.2rem;border-radius:18px;background:rgba(255,255,255,.55);border:1px solid rgba(15,61,46,.14);position:relative;overflow:hidden}
.mark-stage--field{background:var(--signal);border-color:var(--signal)}
.mark-stage--leaf{background:var(--ink);border-color:var(--ink)}

.m{margin:0;font-family:var(--name);font-weight:800;letter-spacing:-.03em;line-height:.9;text-align:center}

/* One — marigold field */
.m--field{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .3em;color:var(--on-signal);font-size:clamp(2.2rem,11vw,3.6rem)}

/* Two — leaf and marigold, tight */
.m--two{font-size:clamp(2.2rem,11vw,3.6rem)}
.m--two .leaf{color:var(--ink)}
.m--two .gold{color:var(--signal-deep)}

/* Three — planted on a row */
.m--row{color:var(--ink);font-size:clamp(2rem,10vw,3.3rem);position:relative;z-index:1}
.m-row-line{display:block;width:min(20rem,78%);height:6px;margin-top:.7rem;border-radius:99px;background:var(--signal)}

/* Four — one seed */
.m--seed{color:var(--ink);font-size:clamp(2.1rem,10.5vw,3.5rem)}
.m--seed .seed{color:var(--signal-deep);position:relative}
.m--seed .seed::after{content:"";position:absolute;top:-.06em;left:50%;transform:translateX(-50%);width:.26em;height:.26em;border-radius:50%;background:var(--signal-deep)}

/* Five — deep leaf ground */
.m--out{color:var(--ground);font-size:clamp(2.1rem,10.5vw,3.5rem)}

/* Six — stacked with her line */
.m--stack{display:grid;gap:.02em;font-size:clamp(2.3rem,12vw,4rem);color:var(--ink)}
.m--stack .gold{color:var(--signal-deep)}
.m-under{font-family:var(--head);font-style:italic;font-size:clamp(.95rem,3vw,1.15rem);margin:.9rem 0 0;color:var(--ink);opacity:.85;text-align:center;max-width:22ch}

/* Her own */
.mark-own{margin:clamp(2.4rem,8vw,3.4rem) 0 0}
.mark-own__label{display:block;font-family:var(--body);font-size:.98rem;line-height:1.6;margin:0 0 .8rem;opacity:.88}
.mark-own input{display:block;width:100%;padding:.95rem 1.1rem;margin:0 0 1.2rem;border:1px solid rgba(15,61,46,.22);border-radius:14px;background:rgba(255,255,255,.7);font-family:var(--body);font-size:1.05rem;color:var(--ink)}
.mark-own input:focus-visible{outline:2px solid var(--signal-deep);outline-offset:2px}

/* ══ THE LOOK — four mock-ups ══════════════════════════════════════════════
 *
 * Hers, 10 October 2026: "A couple of mock-ups."
 *
 * One screen, four times. Only the colour moves — the little world, the
 * words and the table are identical in each, because a colour judged naked
 * is not judged at all. Every palette lives in four variables on the screen
 * itself, so swapping one is four numbers.
 *
 * Struck and absent: grass and sun. Nothing brown, muddy, dark or
 * desaturated.
 */
.gl{max-width:34rem;margin:0 auto;padding:clamp(1.6rem,6vw,3rem) clamp(16px,5vw,2rem) clamp(3rem,9vw,5rem);font-family:var(--body,system-ui,sans-serif)}
.gl-eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;margin:0 0 .8rem;opacity:.75}
.gl-h1{font-family:var(--name,var(--body));font-weight:800;font-size:clamp(1.8rem,6.4vw,2.6rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 .8rem}
.gl-say{font-size:1rem;line-height:1.6;margin:0 0 2.2rem;opacity:.85}

.gl-one{margin:0 0 clamp(2rem,7vw,3rem)}

/* The screen. Every colour below is read off its own inline variables. */
.gl-screen{
	background:var(--ground);
	color:var(--ink);
	border-radius:22px;
	padding:clamp(1.2rem,5vw,1.8rem);
	box-shadow:0 18px 44px -24px rgba(40,0,20,.4);
	overflow:hidden;
}
.gl-moment{margin:0 0 .5rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.gl-world{display:block;width:100%;height:auto;margin:.2rem 0 1rem}
.gl-line{margin:0 0 .5rem;font-family:var(--head,Georgia,serif);font-size:clamp(1.25rem,5.4vw,1.7rem);line-height:1.15;letter-spacing:-.015em}
.gl-quiet{margin:0;font-size:.92rem;line-height:1.5;opacity:.72}
.gl-press{
	display:inline-block;margin:1.1rem 0 0;padding:.8rem 1.5rem;border-radius:99px;
	background:var(--hot);color:var(--on);font-weight:700;font-size:.98rem;
}

.gl-label{font-size:.95rem;line-height:1.55;margin:.85rem 0 0;opacity:.85}
.gl-label b{opacity:1}

.gl-own{margin:clamp(1.6rem,6vw,2.4rem) 0 0}
.gl-own__lab{display:block;font-size:.98rem;line-height:1.6;margin:0 0 .8rem;opacity:.88}
.gl-own input{display:block;width:100%;padding:.95rem 1.1rem;border:1px solid rgba(0,0,0,.18);border-radius:14px;background:rgba(255,255,255,.7);font:inherit;font-size:1.02rem}
.gl-quiet--own{margin-top:.9rem}

/* ══ THE LOOK — four mock-ups ══════════════════════════════════════════════
 *
 * Hers, 10 October 2026: "A couple of mock-ups."
 *
 * One screen, four times. Only the colour moves — the little world, the
 * words and the table are identical in each, because a colour judged naked
 * is not judged at all. Every palette lives in four variables on the screen
 * itself, so swapping one is four numbers.
 *
 * Struck and absent: grass and sun. Nothing brown, muddy, dark or
 * desaturated.
 */
/*
 * ── THE SAMPLER MUST NOT SIT ON THE THING SHE STRUCK ─────────────────────
 *
 * The page inherited the world's own early-morning green, so the four
 * mock-ups were framed by grass — the exact colour she struck today. A
 * palette judged inside another palette is not judged. The page is
 * neutralised to warm white and ink so the only colour on the screen is the
 * four she is choosing between.
 */
.gl, body:has(.gl){background:#FBFAF8 !important;color:#2A2228 !important}
.gl{max-width:34rem;margin:0 auto;padding:clamp(1.6rem,6vw,3rem) clamp(16px,5vw,2rem) clamp(3rem,9vw,5rem);font-family:var(--body,system-ui,sans-serif)}
.gl-eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;margin:0 0 .8rem;opacity:.75}
.gl-h1{font-family:var(--name,var(--body));font-weight:800;font-size:clamp(1.8rem,6.4vw,2.6rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 .8rem}
.gl-say{font-size:1rem;line-height:1.6;margin:0 0 2.2rem;opacity:.85}

.gl-one{margin:0 0 clamp(2rem,7vw,3rem)}

/* The screen. Every colour below is read off its own inline variables. */
.gl-screen{
	background:var(--ground);
	color:var(--ink);
	border-radius:22px;
	padding:clamp(1.2rem,5vw,1.8rem);
	box-shadow:0 18px 44px -24px rgba(40,0,20,.4);
	overflow:hidden;
}
.gl-moment{margin:0 0 .5rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.gl-world{display:block;width:100%;height:auto;margin:.2rem 0 1rem}
.gl-line{margin:0 0 .5rem;font-family:var(--head,Georgia,serif);font-size:clamp(1.25rem,5.4vw,1.7rem);line-height:1.15;letter-spacing:-.015em}
.gl-quiet{margin:0;font-size:.92rem;line-height:1.5;opacity:.72}
.gl-press{
	display:inline-block;margin:1.1rem 0 0;padding:.8rem 1.5rem;border-radius:99px;
	background:var(--hot);color:var(--on);font-weight:700;font-size:.98rem;
}

.gl-label{font-size:.95rem;line-height:1.55;margin:.85rem 0 0;opacity:.85}
.gl-label b{opacity:1}

.gl-own{margin:clamp(1.6rem,6vw,2.4rem) 0 0}
.gl-own__lab{display:block;font-size:.98rem;line-height:1.6;margin:0 0 .8rem;opacity:.88}
.gl-own input{display:block;width:100%;padding:.95rem 1.1rem;border:1px solid rgba(0,0,0,.18);border-radius:14px;background:rgba(255,255,255,.7);font:inherit;font-size:1.02rem}
.gl-quiet--own{margin-top:.9rem}

/* Her mark, handed over 21 October 2026. Her own ground shows through it,
   so it sits on the page rather than in a box. */
.la-open__mark{max-width:min(62vw,420px);margin:0 auto 1.25rem;line-height:0}
.la-open__mark img{width:100%;height:auto;display:block;mix-blend-mode:multiply}