// EUMORPH — home + Cécile + week rail + residence + member const { useState: useS2, useEffect: useE2, useRef: useR2, useMemo: useM2, useCallback: useC2 } = React; // ---------- Cécile portrait — reusable SVG, scales by `size` prop ---------- function CecilePortrait({ size = 96, ringed = false }) { return ( ); } // ---------- Cécile chat helpers — used by both the floating popover and the inline section ---------- const CECILE_SYS = `You are Cécile, the curator at Eumorph — a small editorial beauty house. You speak in unhurried, literary English with a faint Parisian formality. Sentences are short. You never use exclamation marks, "absolutely", "amazing", "I'd love to", or wellness-app vocabulary. You answer in 2–4 sentences, and you almost always recommend ONE product from the available list (never invent products). Reference a product by inserting the token [PROD:product-id] inline — the interface will render it as a card with an "Add to bag" button. You may also use *italics* for nuance and BRAND when naming a brand outside the [PROD] token. No greetings, no signoffs.`; function buildCecilePrompt(userQ) { const products = (window.MC_DATA && window.MC_DATA.PRODUCTS) || []; const list = products.slice(0, 18).map(p => ` [PROD:${p.id}] = ${p.house} · ${p.name} — ${p.line || ""} ($${p.price})`).join("\n"); return `${CECILE_SYS} The available products you may recommend: ${list} User asks: ${userQ} Reply as Cécile, 2–4 sentences. End with one [PROD:id] token from the list above (the most fitting one). You may also use *italic* and BRAND. No greetings, no signoffs.`; } function parseCecileReply(text, opts = {}) { // Returns array of "blocks": text-runs and product-cards const blocks = []; const productRe = /\[PROD:([a-z0-9-]+)\]/gi; let last = 0, m; while ((m = productRe.exec(text)) !== null) { if (m.index > last) blocks.push({ kind: "text", value: text.slice(last, m.index) }); blocks.push({ kind: "product", id: m[1] }); last = m.index + m[0].length; } if (last < text.length) blocks.push({ kind: "text", value: text.slice(last) }); return blocks; } function renderCecileText(text) { // Render X + *italic* in plain runs const out = []; const re = /([^<]+)<\/Redact>/g; let last = 0, m, i = 0; while ((m = re.exec(text)) !== null) { if (m.index > last) out.push(text.slice(last, m.index)); out.push({m[1]}); last = m.index + m[0].length; } if (last < text.length) out.push(text.slice(last)); return out.flatMap((p, idx) => { if (typeof p !== "string") return [p]; const segs = []; const ire = /\*([^*]+)\*/g; let l = 0, im; while ((im = ire.exec(p)) !== null) { if (im.index > l) segs.push(p.slice(l, im.index)); segs.push({im[1]}); l = im.index + im[0].length; } if (l < p.length) segs.push(p.slice(l)); return segs; }); } // A small product-card that sits inside Cécile's reply. function CecileProductCard({ id, dark, addToBag, go }) { const products = (window.MC_DATA && window.MC_DATA.PRODUCTS) || []; const p = products.find(x => x.id === id); if (!p) return null; const b = bottleFor(p); const [added, setAdded] = useS2(false); const onAdd = (e) => { e.stopPropagation(); if (addToBag) addToBag(p); setAdded(true); setTimeout(() => setAdded(false), 1800); }; return (
go && go("pdp", { id: p.id })}>
{p.house}
{p.name}
{(p.line || "").split("—").pop().trim()} · {p.size}
${p.price}
); } // ---------- FloatingCecile — bottom-right popover, with mini-chat + product recs ---------- const CECILE_THREAD_KEY = "eumorph.cecile.thread.v2"; function FloatingCecile({ onOpen, addToBag, go }) { const [open, setOpen] = useS2(false); const [hidden, setHidden] = useS2(false); const [shown, setShown] = useS2(false); const [thread, setThread] = useS2(() => { try { const raw = localStorage.getItem(CECILE_THREAD_KEY); return raw ? JSON.parse(raw) : []; } catch (e) { return []; } }); const [val, setVal] = useS2(""); const [thinking, setThinking] = useS2(false); const inputRef = useR2(null); const threadRef = useR2(null); // Persist thread on every change useE2(() => { try { localStorage.setItem(CECILE_THREAD_KEY, JSON.stringify(thread)); } catch (e) {} }, [thread]); // Reveal after some scroll useE2(() => { let scrolled = false; const onScroll = () => { if (!scrolled && window.scrollY > 480) { scrolled = true; setShown(true); window.removeEventListener("scroll", onScroll); } }; window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); // Auto-scroll thread useE2(() => { if (threadRef.current) threadRef.current.scrollTop = threadRef.current.scrollHeight; }, [thread, thinking]); // Focus when opened useE2(() => { if (open && inputRef.current) setTimeout(() => inputRef.current?.focus(), 120); }, [open]); // Expose a global open handle so other parts of the page (TopBar, // inline Cécile section, chips) can drive this popover. useE2(() => { window.__openCecile = (seed) => { setHidden(false); setShown(true); setOpen(true); if (seed && typeof seed === "string") { setVal(seed); setTimeout(() => inputRef.current?.focus(), 140); } }; return () => { try { delete window.__openCecile; } catch (e) {} }; }, []); const ask = useC2(async (text) => { const q = (text ?? val).trim(); if (!q || thinking) return; setVal(""); setThread(t => [...t, { role: "u", text: q }]); setThinking(true); let reply = null; try { if (window.claude && window.claude.complete) { reply = await window.claude.complete({ messages: [{ role: "user", content: buildCecilePrompt(q) }] }); } } catch (e) { reply = null; } if (!reply) { // Reasonable fallback that includes a product token so the UI still demoes recommendation cards. const products = (window.MC_DATA && window.MC_DATA.PRODUCTS) || []; const fallback = products.find(p => p.id === "ab-rich-cream") || products[0]; reply = fallback ? `Then a quiet evening, *nothing acid*. Lay something occlusive on damp skin and sleep on it. [PROD:${fallback.id}]` : "A quiet evening, then. Nothing acid."; } setThread(t => [...t, { role: "c", text: reply }]); setThinking(false); }, [val, thinking]); const PROMPTS = [ "It's cold and dry where I am.", "Build me a quiet morning.", "Something for an evening, nothing loud.", "What should I try if I don't usually wear scent?", ]; if (hidden) return null; const renderBlocks = (text) => { const blocks = parseCecileReply(text); return blocks.map((b, i) => { if (b.kind === "text") return {renderCecileText(b.value)}; return ; }); }; return ( <> {/* the small handle — always visible after scroll, hidden when popover open */}
{/* the popover panel */}
Cécile, the curator
in · until 23h CET
{thread.length === 0 && !thinking && (
Tell me the room you're walking into and I'll tell you what to wear on your skin. I'll point you at one bottle, on the shelf, in the vault.
)} {thread.length > 0 && (
— continued from {thread.length === 1 ? "1 message" : `${thread.length} messages`}
)} {thread.map((t, i) => ( t.role === "u" ?
{t.text}
:
{renderBlocks(t.text)}
))} {thinking &&
Cécile is reading the file…
}
{PROMPTS.map((p, i) => ( ask(p)}>{p} ))}
setVal(e.target.value)} onKeyDown={(e) => e.key === "Enter" && ask()} placeholder="Tell me what you'd like…" />
); } // ---------- HERO (split: definition + a product still + scent-search) ---------- function HeroV2({ go, openCecile }) { const products = (window.MC_DATA && window.MC_DATA.PRODUCTS) || []; const featured = products.find(p => p.id === "mfk-baccarat") || products[0]; const b = bottleFor(featured); const phrases = [ "smoky vanilla, but quieter", "the library at midnight", "a Paris pharmacy in 1970", "fig tree in late August", "cold-day skin that doesn't crack", ]; const [ph, setPh] = useS2(0); const [typed, setTyped] = useS2(""); useE2(() => { const target = phrases[ph]; let i = 0; setTyped(""); const tick = setInterval(() => { i++; setTyped(target.slice(0, i)); if (i >= target.length) { clearInterval(tick); setTimeout(() => setPh(p => (p + 1) % phrases.length), 2200); } }, 45); return () => clearInterval(tick); }, [ph]); return (
{/* LEFT — dictionary entry */}

eu · morph

/'yoō-môrf/ adj. Gk. εὖ well + μορφή form
1

well-formed; of good shape; what is correctly proportioned to the body that holds it.

2

fig. of beauty objects: chosen, sequenced, and dispatched in the right order — not the loud one.

— usage "She kept a small shelf — three things, two cities, one perfumer she'd known since 1998."

{/* RIGHT — house-of-the-week card */}
go("pdp", { id: featured.id })}> Plate I · {featured.size}
— this week's object
{featured.house}
{featured.name}
{ e.preventDefault(); go("pdp", { id: featured.id }); }}>Open ↗
); } // ---------- CLIMATE — three products: morning, afternoon, night ---------- function ClimateRow({ go }) { const products = (window.MC_DATA && window.MC_DATA.PRODUCTS) || []; if (!products.length) return null; // Match catalog "climate" tags to slots when possible — cold/dry today. // Falls back to deterministic picks (by product id hash) so the slots // never shift on refresh and never duplicate. function tagged(want) { return products.filter(p => { const tags = (p.climate || []).map(t => String(t).toLowerCase()); return tags.some(t => want.some(w => t.includes(w))); }); } function hashIdx(id, salt) { const s = String(id || "") + ":" + salt; let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) % 9000; return h; } function pickFor(salt, prefer, taken) { const pool = (prefer.length ? prefer : products).filter(p => !taken.has(p.id)); const list = pool.length ? pool : products.filter(p => !taken.has(p.id)); if (!list.length) return null; return list[hashIdx(salt, salt) % list.length]; } const taken = new Set(); const morning = pickFor("morning", tagged(["morning", "day", "bright", "work"]), taken); if (morning) taken.add(morning.id); const afternoon = pickFor("afternoon", tagged(["office", "workday", "weekday", "day"]), taken); if (afternoon) taken.add(afternoon.id); const night = pickFor("night", tagged(["night", "evening", "cold", "dry", "occlusive"]), taken); const slots = [ { tag: "Morning", time: "07h", note: "Soft, lifted, bright.", product: morning || products[0] }, { tag: "Afternoon", time: "14h", note: "Quiet through the desk.", product: afternoon || products[1] || products[0] }, { tag: "Night", time: "22h", note: "Occlusive, on damp skin.", product: night || products[2] || products[0] }, ]; return (
Brooklyn, NY · 21h04

Cold, and dry. The air is pulling water out of skin.

  • 47°Ftemp
  • 28%humidity
  • UV 2indoor
{slots.map((s, i) => { const b = bottleFor(s.product); return (
go("pdp", { id: s.product.id })}>
— {s.tag} · {s.time}
{s.product.house}
{s.product.name}
{s.note}
→
); })}
); } // ---------- THE OPENING STORY (single product, magazine-led) ---------- function OpeningStory({ go }) { const products = (window.MC_DATA && window.MC_DATA.PRODUCTS) || []; const p = products.find(x => x.id === "biologique-p50") || products[0]; if (!p) return null; const b = bottleFor(p); return (
Eumorph · Issue {ISSUE.number} The long read pg. 24

The chemist's wife
who couldn't tolerate
any cosmetic on
the market.

By Cécile Marchand · 04 February — five-minute read
Plate 02 · the 1970, photographed Tuesday

In 1970, in a small Paris laboratory, a biologist named Y. Allouche composed a formula for his own wife. She had reacted to every cream on the rue Saint-Honoré that year, and to most of the décennies before. He worked from a chemist's instinct — phenol1, niacinamide, vinegar, sulfur — diluted into a solution intended to be dabbed onto cotton, not poured into a palm.

It worked. She wore it. Her sister wore it. Her sister's hairdresser in the seventh arrondissement wore it. Within five years it had moved out of the laboratory and into a small clinic in the Marais, and from there — quietly, in unmarked amber bottles — into the dressing rooms of three couture houses whose names we are not at liberty to print here.

Today the original formula is illegal in EU cosmetics under its 1970 name2. The reformulation softened it, and the softer thing is what most pharmacies sell. We source the 1970 through international distribution channels, in the bottle you see at left.

Composed
Paris, 1970
By
Y. Allouche, biologist
House
{p.house}
Edition
The 1970
); } // ---------- THE EDIT — Cécile's three-product routine ---------- function TheEdit({ go, addToBag }) { const products = (window.MC_DATA && window.MC_DATA.PRODUCTS) || []; const ids = ["sisley-black-rose", "ab-rich-cream", "mfk-baccarat"]; const lines = ids.map(id => products.find(p => p.id === id)).filter(Boolean); const subtotal = lines.reduce((s, p) => s + p.price, 0); return (
Plate 03
Still life · 04.iv.2026
{lines.map((p, i) => { const b = bottleFor(p); const heights = [200, 240, 220]; return (
{String(i + 1).padStart(2, "0")} · {p.name.split(/\s/)[0]}
); })}

An evening
in amber.

A three-product sequence to be performed in order, with twenty minutes between the second and third. Composed after a week with old issues of Vogue Paris, 1978.

{lines.map((p, i) => (
go("pdp", { id: p.id })}> {String(i + 1).padStart(2, "0")}
{p.line.split("—").pop().trim()}
{p.house} · {p.name}
${p.price}
))}
); } // ---------- THREE RAILS — how it arrives ---------- function ThreeRails({ go }) { const rails = [ { id: "vault", num: "I", name: "The Vault", blurb: "Held in our temperature-controlled rooms in Long Island City. Inspected, authenticated, dispatched within two business days.", lede: "Stocked & shipped from Brooklyn." }, { id: "atelier", num: "II", name: "The Atelier", blurb: "Sourced from international distribution channels in Paris, Grasse, and Tokyo. Slightly longer transit; identical guarantee.", lede: "From abroad, to here." }, { id: "lab", num: "III", name: "The Lab", blurb: "Routines, blends, and bespoke editions assembled by Cécile. Made-to-order; never stocked. Eight to twelve a year.", lede: "Composed for one." }, ]; return (

From there,
to here.

Eumorph holds three rails — a vault for what we keep, an atelier for what travels from abroad, and a lab for what is made for one. Each ships in its own way; the guarantee is identical.

{rails.map((r, i) => (
go("her-shelf")}>
{r.num}
{r.name}
{r.lede}

{r.blurb}

Enter →
))}
); } // ---------- WEEK RAIL — compact horizontal strip of 7 small chips ---------- function WeekRail({ go }) { const products = (window.MC_DATA && window.MC_DATA.PRODUCTS) || []; const days = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"]; const today = new Date().getDay(); const todayIdx = (today + 6) % 7; // Pick 7 distinct products, looping through whatever the catalog provides. // No backend coupling — just rotates from the existing PRODUCTS list. const week = days.map((d, i) => ({ day: d, product: products[i % products.length], })); return (

One week.
Seven quiet arrivals.

One product per day. Drawn from the shelf, rotated weekly.

{week.map((d, i) => { if (!d.product) return null; const b = bottleFor(d.product); const isToday = i === todayIdx; return (
go("pdp", { id: d.product.id })} >
{d.day}{isToday && }
{d.product.house}
{d.product.name}
); })}
); } // ---------- CÉCILE — inline, on the page ---------- const CECILE_OPENERS = [ "Tell me the room you're walking into and I'll tell you what to wear on your skin.", "What's the weather where you are? I find half of skin failure is climate, not chemistry.", "If you'd like — describe a fragrance you wore once and loved. I'll find it again, or something near it.", ]; const CECILE_CHIPS = [ "It's cold and dry where I am.", "I want something for an evening, nothing loud.", "What did the women in 1970s Paris actually use?", "I have an event Friday and tired skin.", "Build me a quiet morning.", ]; function CecileVoice({ inputRef, addToBag, go }) { // The inline panel is now a *launcher* into the floating chat. // Typing here, hitting Enter, clicking Send, or tapping any chip // opens the popover seeded with that text. const [opener] = useS2(() => CECILE_OPENERS[Math.floor(Math.random() * CECILE_OPENERS.length)]); const [val, setVal] = useS2(""); const launch = useC2((text) => { const fallback = "Tell me what you'd like to find."; const seed = (text ?? val).trim() || fallback; setVal(""); if (window.__openCecile) window.__openCecile(seed); }, [val]); return (
{opener}
{CECILE_CHIPS.map((c, i) => ( launch(c)}>{c} ))}
setVal(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); launch(); } }} onClick={(e) => { // First click into the inline box pops the floating chat — // it's the real conversation surface. if (!val) { e.currentTarget.blur(); launch(""); } }} placeholder="Tell me what you'd like to find…" /> launch()}>Send ↵
Conversation opens in the corner — Cécile remembers what you've asked her.
); } function CecileSection({ inputRef, addToBag, go }) { return (
— a quiet line, open until 23h CET

Tell me what you'd like.

I'll find it, or something near it.

); } // ---------- HOUSE GRID — the v1 product grid, brought back ---------- // ---------- THE VAULT — a long shelf list, not a calendar grid ---------- function HouseGrid({ go }) { const products = (window.MC_DATA && window.MC_DATA.PRODUCTS) || []; const items = products.slice(0, 6); // Each row gets a distinct, specific subline — not filler. const VAULT_NOTES = { "ab-rich-cream": "Triggering complex, on damp skin only.", "biologique-p50": "1970 phenol formula, sourced abroad.", "mfk-baccarat": "Saffron, ambergris, cedar — and a quiet math.", "diptyque-philosykos": "Fig leaf, fig wood, fig fruit. Nothing else.", "sisley-black-rose": "Forty minutes, a clay mask, and stillness.", "u-beauty-resurfacing": "Eight serums folded into one.", "byredo-mojave": "Sandalwood that doesn't reach past the desk.", "tomford-tobacco": "Smoke and vanilla, for an unhurried Sunday.", "111skin-bio-cellulose": "Sheet of bio-cellulose, twenty minutes.", }; // categorize by line const cats = items.map(p => { const line = (p.line || "").toLowerCase(); let cat = "Care"; if (line.includes("parfum") || line.includes("fragrance") || line.includes("eau")) cat = "Scent"; else if (line.includes("hair") || line.includes("shampoo")) cat = "Hair"; else if (line.includes("body") || line.includes("bath")) cat = "Body"; else if (line.includes("mask") || line.includes("sheet")) cat = "Mask"; else if (line.includes("toner") || line.includes("exfoli")) cat = "Tonic"; return { p, cat }; }); return (
[ The vault — Long Island City ]

Six objects,
on a shelf.

Held in temperature-controlled rooms in Long Island City. Inspected, authenticated, dispatched within two business days. The list rotates slowly — once or twice a season. We don't carry forty-one at once because we can't keep track of more.

{cats.map(({ p, cat }, i) => { const b = bottleFor(p); return (
go("pdp", { id: p.id })}>
{String(i + 1).padStart(2, "0")}.
{cat}
{p.line.split("—").pop().trim()}
{p.house} {p.name}
{VAULT_NOTES[p.id] || p.notes_short || p.tagline || "—"}
${p.price}
{p.size}
— in vault
→
); })}
); } // ---------- ON THE SHELF — Atlas of What Grows ---------- // A hand-feel world map; cities are ink stains; pick one and a postcard // reveals the terroir (what grows there) and the houses we carry from it. function ResidenceSection({ go }) { // Equirectangular projection: lon → x [0..360], lat → y [0..180] // Map viewBox is 720 × 360 so 1 unit = 0.5° const project = (lat, lon) => ({ x: (lon + 180) * 2, y: (90 - lat) * 2, }); const cities = [ { city: "Brooklyn", country: "United States", lat: 40.68, lon: -73.94, stamp: "USPS · NY 11217", grows: "Nothing grows here. The vault, the lab, the chair Cécile sits in.", terroir: [ { what: "the vault", note: "11,000 sq ft · climate 17 °C, RH 55%" }, { what: "the lab", note: "where we test every formula on Brooklyn tap water — the worst-case base." }, { what: "Cécile's desk", note: "a green-shaded library lamp, lit until 23h." }, ], houses: ["Le Labo", "U Beauty", "Eumorph (vault)"], cecile: "Where everything gets its passport stamped, Cécile says. The least romantic city on this map; the most useful.", }, { city: "London", country: "United Kingdom", lat: 51.50, lon: -0.13, stamp: "ROYAL MAIL · SW1", grows: "An archive of British perfumery, kept under a Burlington Arcade glass roof.", terroir: [ { what: "Penhaligon's archive", note: "Wellington Street, since 1870. Cécile reads the back-catalogue twice a year." }, { what: "clinical skincare", note: "a tradition of bench-tested formulas; we read the published trials before we stock." }, ], houses: ["Penhaligon's", "Augustinus Bader"], cecile: "London is for archives and bench-tested skincare. We never come here for sun.", }, { city: "Paris", country: "France", lat: 48.85, lon: 2.35, stamp: "LA POSTE · 75006", grows: "Tuberose absolute, civet tincture, iris pallida (aged six years), a stubborn idea of taste.", terroir: [ { what: "iris pallida", note: "rhizomes aged six years before distillation. one of the most expensive raw materials in perfumery." }, { what: "tuberose absolute", note: "extracted at 30 °C; one kilo of flowers yields three grams." }, { what: "the rive gauche", note: "where four of the six Paris houses on our shelf still keep ateliers within walking distance of each other." }, ], houses: ["Diptyque", "Frédéric Malle", "Officine Universelle Buly", "Maison Francis Kurkdjian", "Byredo", "Maison de Mai"], cecile: "Paris isn't a place; it's an opinion about restraint. Six houses, all within fifteen minutes on foot.", }, { city: "Grasse", country: "France", lat: 43.66, lon: 6.92, stamp: "PROVENCE · 06130", grows: "Centifolia rose (May, before 9am), jasmine grandiflorum (August nights), tuberose, mimosa.", terroir: [ { what: "Rosa centifolia", note: "the May rose; picked at first light, before the sun cracks the petals open." }, { what: "Jasmine grandiflorum", note: "harvested by hand, after midnight, when the indole is highest." }, { what: "the fields", note: "the region we visit each spring; twenty-three hectares of working perfume agriculture." }, ], houses: ["Maison de Mai", "Lab Marchand"], cecile: "If a perfume claims jasmine and isn't from Grasse, India, or Egypt — read the back of the bottle again.", }, { city: "Florence", country: "Italy", lat: 43.77, lon: 11.25, stamp: "POSTE ITALIANE · 50100", grows: "Iris (orris root, four-year cure), bergamot from Calabria, monastic tinctures.", terroir: [ { what: "Santa Maria Novella", note: "founded 1221. The world's oldest still-operating pharmacy." }, { what: "orris root", note: "harvested, peeled, and aged four years in cellars below the Duomo's level." }, { what: "Acqua di Rose", note: "a recipe unchanged since 1612. We carry the same SKU." }, ], houses: ["Santa Maria Novella", "Officina Profumo"], cecile: "Florence sells you a bottle of rosewater that has outlasted seventeen popes. Buy two.", }, { city: "Muscat", country: "Sultanate of Oman", lat: 23.59, lon: 58.40, stamp: "OMAN POST · 100", grows: "Boswellia sacra — the only place on earth where the finest frankincense resin still bleeds.", terroir: [ { what: "Boswellia sacra", note: "the trees are tapped in Dhofar; resin hardens for fourteen days before harvest." }, { what: "Hojari grade", note: "the highest grade of frankincense; the basis of Amouage's most prized compositions." }, { what: "a royal house", note: "Amouage was founded in 1983 by decree of the late Sultan Qaboos." }, ], houses: ["Amouage"], cecile: "If you've never smelled real frankincense — the resin, on a hot stone — you've never smelled the desert. Start with Interlude.", }, { city: "Tokyo", country: "Japan", lat: 35.68, lon: 139.69, stamp: "日本郵便 · 〒107", grows: "Hinoki cypress, yuzu (Kōchi prefecture), an obsession with the brief.", terroir: [ { what: "Hinoki", note: "two-hundred-year-old cypress; the wood used in onsen bath panels and in some Japanese perfumery bases." }, { what: "Yuzu zest", note: "cold-pressed within hours of picking; the most fragile citrus oil on our shelf." }, { what: "the archive tradition", note: "Japanese houses keep meticulous formula archives; Cécile reads the public ones." }, ], houses: ["Comme des Garçons Parfums", "Shiseido"], cecile: "Tokyo is the city where editing is taken seriously. Two houses; both teach restraint.", }, { city: "Melbourne", country: "Australia", lat: -37.81, lon: 144.96, stamp: "AUSPOST · VIC 3000", grows: "Eucalyptus globulus, Tasmanian sandalwood (santalum spicatum), a calmer kind of design.", terroir: [ { what: "Tasmanian sandalwood", note: "the sustainable alternative to overharvested Mysore; harvested at 18+ years." }, { what: "Eucalyptus globulus", note: "the blue gum — every Aesop hand wash you've ever used has its DNA in it." }, { what: "Collins Street", note: "Aesop's flagship; a model for how a brick-and-mortar should feel quiet." }, ], houses: ["Aesop"], cecile: "If you want to learn what an honest store looks like — go to Collins Street. Stay for an hour. Buy nothing.", }, ]; // sort west→east so the postcard order matches walking the map const byLon = [...cities].sort((a, b) => a.lon - b.lon); const totalHouses = cities.reduce((s, c) => s + c.houses.length, 0); // Active city: auto-cycle, pause on user pick const [activeIdx, setActiveIdx] = React.useState(2); // start on Paris const [locked, setLocked] = React.useState(false); React.useEffect(() => { if (locked) return; const t = setInterval(() => { setActiveIdx((i) => (i + 1) % byLon.length); }, 11000); return () => clearInterval(t); }, [locked, byLon.length]); const active = byLon[activeIdx]; return (
[ atlas of what grows · plate 09 ]

An atlas
of what grows.

Perfume is an agricultural product with a passport. Skincare, mostly, is a chemistry one. We carry {totalHouses} houses from {cities.length} cities, and we visit each at least once a year. This is what they grow there, and what we bottle from it.

{/* LEFT — the map */}
┌ ┐ └ ┘
PLATE 09 Mappa Mundi Eumorpha scale unspecified · projection equirectangular · ink & tea on linen
{cities.length} cities · {totalHouses} houses {locked ? "paused on " + active.city.toLowerCase() : "drifting · 11s"} {locked && ( )}
{/* RIGHT — the postcard stack */}
{/* faux back cards */}
{String(activeIdx + 1).padStart(2,"0")}/{byLon.length}
EUMORPH
POSTAL
9¢
{active.stamp}
{new Date().toLocaleDateString("en-GB", { day:"2-digit", month:"short", year:"2-digit" }).toUpperCase()}
{Math.abs(active.lat).toFixed(2)}°{active.lat >= 0 ? "N" : "S"} · {" "}{Math.abs(active.lon).toFixed(2)}°{active.lon >= 0 ? "E" : "W"}

{active.city}

{active.country}

what grows here {active.grows}

    {active.terroir.map((t, i) => (
  • · {t.what} {t.note}
    • ))}
{active.houses.length === 1 ? "House" : "Houses"} on the shelf · {active.houses.length}
{active.houses.map((h, i) => ( {h} ))}
— CÉCILE

"{active.cecile}"

{/* city dock — tiny west→east strip showing all cities */}
{byLon.map((c, i) => ( ))}
Eight cities · forty-one houses on the shelf · refreshed monthly { e.preventDefault(); go("in-residence"); }}>Open the full atlas →
); } // ---------- MEMBERSHIP ---------- function MemberSection({ go }) { const perks = [ { k: "The locked rate", v: "9% off, kept forever at the rate of the day you join. Not a coupon. A contract." }, { k: "Four sample editions", v: "A small box, hand-tied, on each equinox and solstice. Composed for your skin and the season." }, { k: "Cécile, by name", v: "She replies herself, until 23h CET. The file in front of her is the one she keeps for you." }, { k: "Twenty-four hours early", v: "Restocks, vault rotations, and the back-in-stock list — before the public sees them." }, { k: "$50, on your birthday", v: "Applied automatically the first of the month. No marketing email. No countdown. Just a credit." }, { k: "Audited, once a year", v: "A written letter from Cécile, with the protocol adjusted. Includes a take-home box." }, ]; return (
{/* LEFT — the card */}
— № 0001 · founder EUMORPH · CIRCLE
Membership · annual

The Circle

$50 / yr. $149

A locked rate, four sample editions, and a curator who answers by name — kept on a single card, not in a database.

Issued · {ISSUE.monthLabel} — cancel anytime — rate stays
{/* the wax seal */}
No marketing email · cancel anytime
— Pays for itself at the second order, on average. From the 2025 cohort: members spent $830 with us on average and saved $74.70.1 For perfumers, MUAs and aestheticians: { e.preventDefault(); go("pro"); }}>The Founding 100 →
1 n=412 active members, calendar 2025. Internal figures — audited annually by our accountants. Past members are not future members; your mileage will vary.
{/* RIGHT — perks (kept light, paper-toned) */}
— What it is, in plain English

Six things, kept.

    {perks.map((p, i) => (
  1. {String(i + 1).padStart(2, "0")}
    {p.k}
    {p.v}
    2. ))}
); } // ---------- BEAUTY INDEX — what Cécile has read ---------- function BeautyIndex({ go }) { // The index has three layers: dossiers (long-form), traces (live citations), readers (who's pulled it) const dossiers = [ { num: "047", title: "Phenol, in dilution", sub: "the chemistry of the 1970 Lotion P50, & why the EU rewrote it in 2023", words: "12,400", reads: "8,212", route: "pdp", routeId: "biologique-p50" }, { num: "046", title: "Baccarat 540, decoded", sub: "saffron · ambergris · cedar — and the math of \"a cathedral fragrance\"", words: "8,800", reads: "23,118", route: "pdp", routeId: "mfk-baccarat" }, { num: "045", title: "TFC8®, in plain English", sub: "Augustinus Bader, the protein the patent calls a triggering complex", words: "6,200", reads: "5,041", route: "pdp", routeId: "ab-rich-cream" }, { num: "044", title: "What 1970s Paris actually wore", sub: "from Jean Patou's archives, Hermès' couriers, and a hairdresser in the 7th", words: "9,300", reads: "11,602", route: "in-residence", routeId: null }, ]; const traces = [ { src: "Wikipedia · Lotion P50", note: "cited in the article footnote · stable since Mar 2026" }, { src: "Common Crawl · CC-MAIN-26-13", note: "indexed 2026-03-14 · 8,412 docs scraped" }, { src: "Claude (Sonnet 4.5)", note: "answered 47× in last 30 days when asked about \"P50\"" }, { src: "Perplexity · pro tier", note: "linked in 12 reasoning traces · attribution intact" }, { src: "Google · AI Overviews", note: "surfaced for 6 queries · still attributed (sometimes)" }, ]; const stats = [ { v: "8,412", k: "Dossiers in the index", note: "Published; CC-BY" }, { v: "47", k: "Credentialed authors", note: "Perfumers · chemists · editors" }, { v: "14,228", k: "AI citations · 30 days", note: "Across four major models" }, { v: "32–52", k: "Structured attributes / SKU", note: "INCI · provenance · pH · notes" }, ]; return (
[ open access · creative commons by 4.0 ]

What Cécile
has read.

Eight thousand long-form dossiers on ingredients, perfumers, founders, climates, and concerns. Published openly, read by Wikipedia and every model trained after April 2026. The shelf is downstream of the index.

{/* MAIN — split: dossiers on left (4 rows), live traces on right */}
The four most-read this month e.preventDefault()}>Open the index →
    {dossiers.map((d, i) => (
  1. { e.preventDefault(); if (d.route === "pdp" && d.routeId) go("pdp", { id: d.routeId }); else if (d.route) go(d.route); }} style={{ cursor: "pointer" }}>
    № {d.num}

    {d.title}

    {d.sub}

    {d.words} words · {d.reads} reads · read by Cécile, twice
    →
    2. ))}
{/* footer stats */}
{stats.map((s, i) => (
{s.v}
{s.k}
— {s.note}
))}
); } Object.assign(window, { HeroV2, ClimateRow, OpeningStory, TheEdit, ThreeRails, WeekRail, CecileSection, CecileVoice, BeautyIndex, ResidenceSection, MemberSection, HouseGrid, FloatingCecile });