/* Assagioli's Egg Diagram (/psychosynthesis/#egg-diagram). Moved 2026-11-08 from concepts.css. Behaviour: /js/egg.js.
   Egg pass 2026-11-11: bigger desktop egg, lighting (soft-light layer) instead of the flat veil, names only on hover or
   select, glass markers, reserved card height, FLIP enlarge, focus view, gold hairlines, dawn entrance and small motion. */

/* == EGG DIAGRAM (interactive; behaviour in /js/egg.js) ================ */
/* Phones and tablets: intro, egg with numbered markers and prev/next arrows (sized to the screen height),
   then the detail card tucked right under it (title, short line, text, "Read more" link, journey button).
   The card keeps the height of its tallest region (egg.js sets --egg-ph), so picking a region never moves the page.
   1100px and up: Rachel's layout. Intro, detail card and callout 7 on the left, egg in the middle (--aw wide, about
   560px of egg at 1440x900), callouts 6 3 4 5 2 1 on the right, joined to the egg by leader lines drawn by egg.js.
   Layers on the art, bottom to top: painting (img), light layer (svg.eggx__light, soft-light blend: dim + region light
   + dawn dusk), overlay (svg.eggx__svg: hit areas, gold hairlines, region outlines, beam, star glows, thread, journey
   spark, names), markers, pointer light (::after, desktop).
   Art and SVG overlay share one 1536x2048 coordinate space (see img/v2/egg-lum-labels.json). */
.eggx__head{display:grid;justify-items:center;gap:6px;text-align:center}
.eggx__head h2{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.05;text-wrap:balance}
.eggx__head h2::before,.eggx__head h2::after{content:"";flex:none;width:clamp(36px,7vw,110px);height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.eggx__head h2::after{background:linear-gradient(270deg,transparent,var(--gold))}
.eggx__sub{font:italic 500 clamp(1.45rem,2.6vw,2.15rem)/1.2 var(--serif);color:var(--plum)}
@media (max-width:560px){.eggx__head h2::before,.eggx__head h2::after{display:none}}

.eggx__stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "fig" "panel";gap:var(--group);margin-top:var(--group)}
.eggx__intro{grid-area:intro;max-width:34rem;margin-inline:auto;text-align:center}
.eggx__lh{font:italic 600 clamp(1.45rem,2vw,1.75rem)/1.2 var(--serif);color:var(--plum)}
.eggx__orn{display:block;width:64px;height:1px;margin:12px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.eggx__intro p{margin-top:12px;color:var(--plum-ink)}

/* the art: bleeds edge to edge on phones, edges melt into the section */
.eggx{overflow-x:clip} /* the art bleeds to the screen edge on phones; its SVG glow must never widen the page */
.eggx__fig{grid-area:fig;position:relative;margin:0 calc(var(--gutter) * -1);touch-action:pan-y}
/* phones and tablets: the egg is sized to the screen height so the egg and the card's title fit on one screen
   (header about 70px, dock about 80px, card title about 100px) */
.eggx__art{position:relative;width:min(100%,max(270px,calc((100vh - 250px) * .75)));max-width:560px;margin:0 auto;aspect-ratio:3/4;transform-origin:0 0;transition:transform .9s var(--ease-out)}
@supports (height:1svh){.eggx__art{width:min(100%,max(270px,calc((100svh - 250px) * .75)))}}
.eggx__art img{display:block;width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 80%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 80%,transparent 100%)}
.eggx__svg,.eggx__light{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* journey: a gentle 1.05 zoom toward the current region (egg.js sets --zx/--zy, the focus point as fractions, and --zs) */
.eggx__stage.is-tour .eggx__art{transform:translate(calc(var(--zx,.5) * (1 - var(--zs,1)) * 100%),calc(var(--zy,.5) * (1 - var(--zs,1)) * 100%)) scale(var(--zs,1))}

/* light layer: soft-light keeps the painting's colour. Dark = a little darker, warm white = lit. Never a flat veil. */
.eggx__light{mix-blend-mode:soft-light;pointer-events:none}
/* the light layer stays inside the painting and melts out with it (same mask as the img): the dawn's dusk band never
   tints the ivory around the egg, above the heading or under the card (2026-11-11 review) */
.eggx__light{overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 80%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 80%,transparent 100%)}
.eggx__dim{fill:#2a1430;opacity:0;transition:opacity .5s var(--ease-out)}
.eggx__stage.has-active .eggx__dim{opacity:.5}
.eggx__lt{fill:#fff6dc;opacity:0;transition:opacity .5s var(--ease-out)}
.eggx__lt.is-on{opacity:.85}
.eggx__lt.is-pv{opacity:.35}
.eggx__lt--pt{fill:url(#eggx-star)}
.eggx__lt--c{fill:url(#eggx-glow)} /* the field: a glow that softens to its edge, not a flat disc */
.eggx__dusk{opacity:0}

/* overlay: hit areas are transparent; everything else ignores the pointer */
.eggx__r{fill:#000;fill-opacity:0;stroke:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.eggx__lines,.eggx__ols,.eggx__beam,.eggx__starglow,.eggx__starlit,.eggx__spark{pointer-events:none}
/* the diagram's lines: thin gold hairlines (were painted white dashes) */
.eggx__ln{fill:none;stroke:#f1d9a0;stroke-width:3;stroke-opacity:.6;stroke-dasharray:1 1;stroke-dashoffset:0}
/* region outline: draws on in gold when a region is picked (pathLength=1) */
.eggx__ol{fill:none;stroke:#fde9ae;stroke-width:6;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;filter:url(#eggx-soft);transition:opacity .3s var(--ease-out),stroke-dashoffset 0s .3s}
.eggx__ol.is-on{opacity:1;stroke-dashoffset:0;transition:opacity .2s var(--ease-out),stroke-dashoffset .6s var(--ease-out)}
.eggx__ol.is-pv{opacity:.5;stroke-dashoffset:0;transition:opacity .25s var(--ease-out),stroke-dashoffset .6s var(--ease-out)}
.eggx__beam{fill:none;stroke:#fff3cf;stroke-width:26;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;filter:url(#eggx-soft)}
.eggx__starglow{opacity:0;transition:opacity .6s var(--ease-out)}
.eggx__stage[data-active="6"] .eggx__starglow{opacity:.7}
.eggx__starlit{opacity:0}
.eggx__thread{opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out)}
.eggx__stage[data-active="6"] .eggx__thread{opacity:1}
.eggx__thread-glow{fill:none;stroke:#f6d98c;stroke-width:22;stroke-linecap:round;opacity:.45;filter:url(#eggx-soft)}
.eggx__thread-dots{fill:none;stroke:#fffaf0;stroke-width:10;stroke-linecap:round;stroke-dasharray:0 26}
/* journey: a small point of light travels along the centre axis to the current region (egg.js sets --sy) */
.eggx__spark{opacity:0;transform:translate(770px,var(--sy,1660px));transition:transform .9s var(--ease-out),opacity .4s var(--ease-out)}
.eggx__stage.is-tour .eggx__spark{opacity:1}
/* names inside the egg (desktop): hidden; one shows on hover or when its region is selected */
.eggx__names{display:none;pointer-events:none}
.eggx__names text{font:600 54px var(--serif);text-anchor:middle;fill:var(--plum);stroke:rgba(255,249,236,.85);stroke-width:10;stroke-linejoin:round;paint-order:stroke;opacity:0;transition:opacity .35s var(--ease-out)}
.eggx__names .eggx__name--sm{font-size:44px}
/* .eggx__name--lt (light text) retired 2026-11-11: a name only shows on a lit region, where plum on an ivory halo reads best */
.eggx__names text.is-on{opacity:1}
.eggx__names text.is-pv{opacity:.85}

/* numbered markers on the art (phones, tablets and the desktop focus view): small glass discs with a gold ring.
   26px to the eye, 44px to the finger. Polish 2026-11-11: plum glass (--plum at .8, was a grey-brown mix that read as
   pebbles), a 1.5px gold-hi ring and a faint gold glow so they read on the blue and green parts of the painting. */
.eggx__mk{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);z-index:2;display:grid;place-items:center;width:26px;height:26px;margin:-13px 0 0 -13px;padding:0;border:0;border-radius:50%;font:500 .875rem/1 var(--caps);color:#fff8ea;text-shadow:0 1px 1px rgba(30,8,20,.45);background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.3),rgba(255,255,255,0) 50%),rgba(110,31,67,.8);background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.3),rgba(255,255,255,0) 50%),color-mix(in srgb,var(--plum) 80%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 0 0 1.5px var(--gold-hi),0 0 10px 1px rgba(243,226,180,.45),0 4px 10px -4px rgba(30,8,20,.55);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .3s var(--ease-out),background-color .3s var(--ease-out),color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.eggx__mk::before{content:"";position:absolute;inset:-9px;border-radius:50%} /* 44px tap area */
/* 4 and 5 sit close on small art (38px apart at 375x641): their 44px tap areas lean 3px away from each other so they never overlap */
.eggx__mk[data-region="4"]::before{inset:-9px -6px -9px -12px}
.eggx__mk[data-region="5"]::before{inset:-9px -12px -9px -6px}
.eggx__mk::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 1.5px var(--gold-hi);opacity:0;pointer-events:none}
.eggx__mk.is-on{color:var(--plum-deep);text-shadow:none;background:var(--gold-hi);transform:scale(1.12);box-shadow:0 0 0 1.5px var(--plum),0 0 0 5px rgba(243,226,180,.5),0 6px 14px -4px rgba(0,0,0,.45)}
.eggx__mk.is-on::after{animation:eggx-ping .9s var(--ease-out) both} /* one ring, once per selection */
.eggx__mk:active{transform:scale(.95)}
.eggx__mk:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:50%}
@keyframes eggx-ping{from{opacity:.95;transform:scale(1)}to{opacity:0;transform:scale(2)}}
/* prev / next beside the egg (phones and tablets) */
.eggx__arrow{position:absolute;bottom:12%;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;color:var(--plum);background:rgba(251,247,239,.92);box-shadow:inset 0 0 0 1px rgba(201,162,76,.75),0 8px 18px -12px rgba(74,16,41,.5);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s var(--ease-out)}
.eggx__arrow svg{width:20px;height:20px}
.eggx__arrow--prev{left:max(10px,calc(var(--gutter) - 10px))}
.eggx__arrow--prev svg{transform:rotate(180deg)}
.eggx__arrow--next{right:max(10px,calc(var(--gutter) - 10px))}
.eggx__arrow:active{transform:scale(.9)}
.eggx__arrow:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
.eggx__zoom{position:absolute;top:8px;right:max(10px,calc(var(--gutter) - 10px));z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:0;border-radius:999px;font:600 .875rem/1 var(--body);color:var(--plum);background:rgba(251,247,239,.92);box-shadow:inset 0 0 0 1px var(--gold),0 6px 16px -10px rgba(74,16,41,.5);cursor:zoom-in}
.eggx__zoom svg{width:16px;height:16px}
.eggx__zoom::before{content:"";position:absolute;inset:-4px}

/* detail panel */
/* the card tucks up into the soft bottom of the art so its title sits close under the egg.
   Its height is reserved (--egg-ph = the tallest region's card), the journey button sits at the bottom. */
.eggx__panel{grid-area:panel;position:relative;z-index:1;display:flex;flex-direction:column;width:100%;max-width:36rem;min-height:var(--egg-ph,0px);margin:-26px auto 0;padding:16px 18px 18px;border-radius:var(--r-card);background:var(--panel-bg);box-shadow:inset 0 0 0 1px var(--panel-line),var(--shadow-card);touch-action:pan-y}
.eggx__phead{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px}
/* nothing selected: seal, kicker, title and hint sit at the top like a selected card (were centred, which left about
   100px of empty cream above the seal and below the button on phones, 2026-11-11 polish); the journey button stays
   pinned at the foot. The reserved height is unchanged, so picking a region still moves the page 0px. */
.eggx__panel.is-rest{text-align:center}
.eggx__panel.is-rest .eggx__phead{grid-template-columns:minmax(0,1fr);justify-items:center;gap:6px}
.eggx__panel.is-rest .eggx__tour{justify-content:center}
/* the region number as a seal: plum disc, gold numeral, ivory gap, thin gold ring (echoes the markers on the egg) */
.eggx__pnum{display:grid;place-items:center;width:50px;height:50px;margin:6px;border-radius:50%;font:500 1.375rem/1 var(--caps);color:var(--gold-hi);background:radial-gradient(circle at 35% 30%,#8a2f57,var(--plum) 55%,var(--plum-deep));box-shadow:0 0 0 2px rgba(243,226,180,.9),0 0 0 5px #fbf7ef,0 0 0 6px rgba(201,162,76,.7),0 8px 16px -8px rgba(74,16,41,.55)}
.eggx__pk{font:500 .875rem/1.25 var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--plum)} /* 14px, same as every .kicker */
.eggx__pt{margin-top:4px;font-size:clamp(1.45rem,1.2rem + 1vw,1.75rem);line-height:1.18;color:var(--plum);text-wrap:balance}
.eggx__prog{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:14px}
.eggx__prog i{height:3px;border-radius:2px;background:rgba(201,162,76,.25);transition:background-color .4s var(--ease-out)}
.eggx__prog i.is-done{background:var(--gold)}
.eggx__prog i.is-on{background:var(--plum)}
.eggx__ps{margin-top:12px;font:italic 500 1.15rem/1.4 var(--serif);color:var(--plum-ink)}
.eggx__ps:empty{display:none}
.eggx__pl{margin-top:10px;font-size:1rem;line-height:1.55;color:var(--ink)}
.eggx__more{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;font:italic 600 1.125rem/1.25 var(--serif);letter-spacing:0;text-transform:none}
.eggx__more[hidden]{display:none}
.eggx__more svg{flex:none;width:16px;height:16px;transform:rotate(90deg)}

/* journey (inside the card, pinned to its foot) */
.eggx__tour{display:flex;justify-content:flex-start;margin-top:auto;padding-top:12px}
.eggx__go{white-space:nowrap}
.eggx__bar{display:flex;align-items:center;gap:10px;width:100%}
.eggx__step{display:none} /* the card's kicker already says "Step n of 7" */
.eggx__bar[hidden],.eggx__go[hidden]{display:none}
.eggx__nav{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;color:var(--plum);background:linear-gradient(180deg,#fffdf8,var(--ivory-2));box-shadow:inset 0 0 0 1px rgba(201,162,76,.75),0 8px 18px -12px rgba(74,16,41,.45);cursor:pointer;transition:transform .2s var(--ease-out)}
.eggx__nav:active{transform:scale(.95)}
.eggx__nav svg{width:20px;height:20px}
.eggx__nav[data-egg-prev] svg{transform:rotate(180deg)}
.eggx__nav[aria-disabled="true"]{opacity:.4;cursor:default}
.eggx__nav--end{margin-left:auto}
.eggx__nav--end svg{width:16px;height:16px}

.eggx__n{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font:500 .8125rem/1 var(--caps);color:var(--gold-hi);background:var(--plum);box-shadow:0 0 0 2px rgba(243,226,180,.9);transition:background-color .3s var(--ease-out),color .3s var(--ease-out)}
.is-on>.eggx__n,.is-on .eggx__cob .eggx__n{color:var(--plum-deep);background:var(--gold-hi);box-shadow:0 0 0 2px var(--plum)}

/* callouts (desktop; also the no-JS fallback list on phones) */
.eggx__co{display:grid;gap:18px;width:100%;max-width:36rem;margin:0 auto;padding:0;list-style:none}
.eggx__co li{transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.eggx__cob{display:inline-flex;align-items:center;gap:10px;padding:4px 16px 4px 4px;border:0;border-radius:22px;font:600 1.3rem/1.22 var(--serif);color:var(--plum-deep);text-align:left;background:linear-gradient(90deg,rgba(243,226,180,.8),rgba(251,247,239,.5));box-shadow:inset 0 0 0 1px rgba(201,162,76,.35);cursor:pointer;transition:background-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.eggx__cob .eggx__n{width:36px;height:36px;font-size:.9375rem}
.eggx__co p{margin:6px 0 0 50px;font-size:.9375rem;line-height:1.45;color:var(--plum-ink);cursor:pointer}
.eggx__co li.is-on{transform:translateY(-3px)}
.eggx__co li.is-on .eggx__cob{background:#fff;box-shadow:inset 0 0 0 1.5px var(--gold),0 14px 28px -14px rgba(74,16,41,.5)}
.eggx__stage.has-active .eggx__co li:not(.is-on):not(.is-pv){opacity:.5}
/* hover preview while another region stays selected: lighter than the selection */
.eggx__co li.is-pv .eggx__cob{background:linear-gradient(90deg,#fff,rgba(251,247,239,.7));box-shadow:inset 0 0 0 1px rgba(201,162,76,.7)}
.eggx__leads{position:absolute;inset:0;display:none;width:100%;height:100%;overflow:visible;pointer-events:none}
.eggx__leads g{transition:opacity .35s var(--ease-out)}
.eggx__leads path{fill:none;stroke:var(--plum);stroke-width:1.25;opacity:.75;transition:opacity .35s var(--ease-out),stroke-width .35s var(--ease-out)}
.eggx__leads circle{fill:var(--plum);stroke:#fdf6e6;stroke-width:2;transition:fill .35s var(--ease-out)}
.eggx__leads g.is-pv path{opacity:.85;stroke-width:1.6}
/* the selected line draws from the egg out to its callout (path runs callout -> egg, pathLength=1) */
.eggx__leads g.is-on path{stroke-width:2.2;opacity:1;stroke-dasharray:1 1;animation:eggx-lead .6s var(--ease-out) both}
.eggx__leads g.is-on circle{fill:var(--gold-hi);stroke:var(--plum)}
.eggx__stage.has-active .eggx__leads g:not(.is-on):not(.is-pv){opacity:.35}
@keyframes eggx-lead{from{stroke-dashoffset:-1}to{stroke-dashoffset:0}}

.js .eggx__co{display:none}
html:not(.js) .eggx__panel,html:not(.js) .eggx__arrow,html:not(.js) .eggx__mk{display:none}
html:not(.js) .eggx__stage{grid-template-areas:"intro" "fig" "cor" "col"}
html:not(.js) .eggx__co--r{grid-area:cor}
html:not(.js) .eggx__co--l{grid-area:col}

.eggx__credit{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:var(--stack);font:italic 500 1.1rem/1.35 var(--serif);color:var(--plum-ink);text-align:center}
.eggx__credit svg{flex:none;width:36px;height:23px;color:var(--gold)}
@media (max-width:560px){.eggx__credit{flex-direction:column;gap:6px}}

/* focus */
.eggx__stage button:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
.eggx__cob:focus-visible{border-radius:14px}

/* == DAWN ENTRANCE (once, on first view; egg.js adds .is-pre, then .is-in; never with reduced motion) ==
   0.15-1.85s the dusk lifts from the top down while a beam of light runs down the centre thread from the star (0.2-1.4s);
   the gold hairlines draw as the light reaches them; each marker settles in as the light passes its height
   (0.35s + y x 1.3s, 0.6s each). Done by about 2.2s. */
.eggx__stage.is-pre :is(.eggx__mk,.eggx__cob .eggx__n,.eggx__leads g){opacity:0}
.eggx__stage.is-pre .eggx__ln{stroke-dashoffset:1}
.eggx__stage:is(.is-pre,.is-in) .eggx__dusk{opacity:.6}
.eggx__stage.is-in .eggx__dusk{animation:eggx-dusk 1.7s .15s var(--ease-in-out) both}
.eggx__stage.is-in .eggx__beam{animation:eggx-beam 2s .2s var(--ease-in-out) both}
.eggx__stage.is-in .eggx__starglow{animation:eggx-star 2s .05s var(--ease-out) both}
.eggx__stage.is-in .eggx__ln--ax{animation:eggx-draw .85s .2s var(--ease-in-out) both}
.eggx__stage.is-in .eggx__ln--ax2{animation:eggx-draw .4s 1.05s var(--ease-out) both}
.eggx__stage.is-in .eggx__ln--h1{animation:eggx-draw .7s .7s var(--ease-out) both}
.eggx__stage.is-in .eggx__ln--h2{animation:eggx-draw .7s 1.3s var(--ease-out) both}
/* fill "backwards" (not "both"): when its own settle ends, each marker, number and leader line hands straight back to
   its normal look, so a selection made during the dawn (a #egg-n link, an early tap) shows at once, not at 2.7s */
.eggx__stage.is-in .eggx__mk{animation:eggx-settle .6s calc(.35s + var(--y,.5) * 1.3s) var(--ease-out) backwards}
.eggx__stage.is-in .eggx__cob .eggx__n{animation:eggx-settle .6s calc(.35s + var(--ey,.5) * 1.3s) var(--ease-out) backwards}
.eggx__stage.is-in .eggx__leads g{animation:eggx-fade .6s calc(.35s + var(--ey,.5) * 1.3s) var(--ease-out) backwards}
@keyframes eggx-dusk{from{transform:translateY(0)}to{transform:translateY(2688px)}}
@keyframes eggx-beam{0%{stroke-dashoffset:1;opacity:.9}60%{stroke-dashoffset:0;opacity:.75}100%{stroke-dashoffset:0;opacity:0}}
@keyframes eggx-star{0%{opacity:0}40%{opacity:.95}100%{opacity:0}}
@keyframes eggx-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes eggx-settle{from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:none}}
@keyframes eggx-fade{from{opacity:0}to{opacity:1}}
@keyframes eggx-swap{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes eggx-seal{from{opacity:0;transform:scale(.6) rotate(-30deg)}to{opacity:1;transform:none}}
.eggx__panel.is-swap :is(.eggx__ptxt,.eggx__ps,.eggx__pl,.eggx__more){animation:eggx-swap .4s var(--ease-out) both}
.eggx__panel.is-swap .eggx__pl{animation-delay:.05s}
.eggx__panel.is-swap .eggx__pnum{animation:eggx-seal .55s var(--ease-out) both}

/* scroll-linked star glow: the star brightens a little as the egg crosses the middle of the screen.
   Progressive: browsers without view timelines simply show the painting as it is. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .eggx__fig{view-timeline:--eggx-v block}
    .eggx__starlit{animation:eggx-starlit linear both;animation-timeline:--eggx-v;animation-range:cover 15% cover 85%}
  }
}
@keyframes eggx-starlit{0%,100%{opacity:0}50%{opacity:.5}}

/* pointer light (desktop mouse only): a very soft warm light follows the pointer over the painting (egg.js sets --px/--py) */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .eggx__art::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle 190px at var(--px,50%) var(--py,50%),rgba(255,246,222,.5),rgba(255,246,222,0) 72%);mix-blend-mode:soft-light;opacity:0;transition:opacity .6s var(--ease-out)}
  .eggx__art.is-lit::after{opacity:1}
}

@media (min-width:721px) and (max-width:1099px){
  .eggx__stage{max-width:600px;margin-inline:auto}
  .eggx__fig{margin-inline:0}
  .eggx__zoom{right:12px}
  .eggx__arrow--prev{left:8px}
  .eggx__arrow--next{right:8px}
}
/* desktop: --aw = the art's width (the egg itself is 76% of it, and 1.16 x --aw tall). Sized to the screen height so
   the whole egg, the callouts and the card fit under the header: about 700px at 1440x900 (egg about 530 x 810),
   780px (egg about 590 wide) on taller screens. The art's soft halo tucks under the stage edges (negative margins)
   so it costs no height: the stage is about 1.19 x --aw tall. */
@media (min-width:1100px){
  .eggx__stage{--aw:clamp(560px,min(52vw,calc((100vh - 78px) * .85)),780px);grid-template-columns:minmax(240px,300px) calc(var(--aw) * .76) minmax(250px,300px);grid-template-areas:"intro fig cor" "panel fig cor" "col fig cor";grid-template-rows:auto auto 1fr;justify-content:center;column-gap:clamp(24px,2.4vw,36px);row-gap:var(--group);align-items:start;margin:var(--group) calc(var(--gutter) * -.5) 0}
  .eggx__intro{margin:0;text-align:left}
  .eggx__orn{margin-left:0;background:linear-gradient(90deg,var(--gold),transparent)}
  .eggx__intro p{margin-top:10px}
  .eggx__fig{grid-row:1/-1;margin:calc(var(--aw) * -.085) calc(var(--aw) * -.12) calc(var(--aw) * -.058)}
  .eggx__art{width:var(--aw);max-width:none}
  .eggx__names{display:inline}
  .eggx__mk,.eggx__arrow{display:none}
  .eggx__panel{margin:0;padding:16px 18px 18px}
  .eggx__phead{gap:12px}
  .eggx__pnum{width:42px;height:42px;font-size:1.125rem}
  .eggx__pt{font-size:1.625rem}
  .eggx__ps{display:none}
  .eggx__pl{font-size:.96875rem}
  .eggx__more{font-size:1.0625rem}
  .eggx__go{width:100%;padding-inline:14px;letter-spacing:.1em}
  .js .eggx__co{display:grid}
  .eggx__co{max-width:none;margin:0}
  .eggx__co--r{grid-area:cor;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:0}
  .eggx__co--r p{margin-top:4px}
  .eggx__co--l{grid-area:col;align-self:end;padding-bottom:2%}
  .eggx__leads{display:block}
  .eggx__zoom{top:9%;right:auto;left:14%}
}

/* == ENLARGED VIEW: egg.js moves the same live stage into a full-screen overlay (.is-full) and back.
   Open and close scale the egg from and back to its place on the page (FLIP, about 350ms, --ease-out);
   reduced motion: a plain quick fade. == */
html.eggx-locked{overflow:hidden}
.eggx__fullbar{display:none}
.eggx__stage.is-full{position:fixed;inset:0;z-index:2000;margin:0;max-width:none;background:radial-gradient(120% 80% at 50% 28%,#fbf7ef 0%,#f4ebee 55%,#ebdce5 100%);overflow:hidden;overscroll-behavior:contain}
.eggx__veil{position:fixed;inset:0;z-index:2000;pointer-events:none;background:radial-gradient(120% 80% at 50% 28%,#fbf7ef 0%,#f4ebee 55%,#ebdce5 100%)}
.eggx__veil--under{z-index:1999}
.eggx__stage.is-full.is-opening{background:transparent}
.eggx__stage.is-opening>:not(.eggx__fig){animation:eggx-fade .3s .06s var(--ease-out) both}
.eggx__art.is-flying{z-index:2001}
.eggx__stage.is-full .eggx__fullbar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(14px,env(safe-area-inset-right)) 4px max(18px,env(safe-area-inset-left))}
.eggx__fulltitle{font:600 clamp(1.3rem,1.1rem + 1vw,1.75rem)/1.18 var(--serif);color:var(--plum)}
.eggx__close{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;color:var(--plum);background:rgba(251,247,239,.92);box-shadow:inset 0 0 0 1px rgba(201,162,76,.75),0 8px 18px -12px rgba(74,16,41,.5);cursor:pointer;-webkit-tap-highlight-color:transparent}
.eggx__close svg{width:18px;height:18px}
.eggx__close:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
.eggx__stage.is-full .eggx__intro,.eggx__stage.is-full .eggx__zoom{display:none}
/* phones and tablets: title bar, the egg as big as fits, the card docked at the bottom */
@media (max-width:1099px){
  .eggx__stage.is-full{display:flex;flex-direction:column;gap:0}
  .eggx__stage.is-full .eggx__fig{flex:1 1 auto;min-height:0;margin:0;display:grid;place-content:center;container-type:size}
  .eggx__stage.is-full .eggx__art{width:min(100cqw,75cqh);max-width:none;margin:0}
  .eggx__stage.is-full .eggx__arrow--prev{left:10px}
  .eggx__stage.is-full .eggx__arrow--next{right:10px}
  .eggx__stage.is-full .eggx__panel{flex:none;max-width:none;min-height:0;margin:0;max-height:min(32svh,300px);overflow-y:auto;overscroll-behavior:contain;border-radius:22px 22px 0 0;padding:12px 18px calc(14px + env(safe-area-inset-bottom))}
  .eggx__stage.is-full .eggx__prog{margin-top:10px}
}
/* desktop: a focus view. The egg at about 80% of the screen height with its own markers, the card beside it. */
@media (min-width:1100px){
  .eggx__stage.is-full{grid-template-columns:minmax(300px,380px) auto;grid-template-areas:"bar bar" "panel fig";grid-template-rows:auto minmax(0,1fr);justify-content:center;align-items:center;column-gap:clamp(32px,4vw,72px);row-gap:0;padding:0 clamp(20px,3vw,48px) 10px}
  .eggx__stage.is-full .eggx__fullbar{padding:12px 0 0}
  .eggx__stage.is-full .eggx__fig{grid-area:fig;grid-row:auto;margin:-12px 0 0}
  .eggx__stage.is-full .eggx__art{width:auto;height:calc(100vh - 74px);max-width:none}
  .eggx__stage.is-full .eggx__mk{display:grid;width:30px;height:30px;margin:-15px 0 0 -15px;font-size:.9375rem}
  .eggx__stage.is-full .eggx__mk::before{inset:-7px}
  .eggx__stage.is-full .eggx__co,.eggx__stage.is-full .eggx__leads,.eggx__stage.is-full .eggx__names{display:none} /* the markers and the card carry the names here */
  .eggx__stage.is-full .eggx__panel{grid-area:panel;align-self:center;max-width:380px;padding:20px 22px 22px}
  .eggx__stage.is-full .eggx__ps:not(:empty){display:block}
}

/* == BRIDGE: the egg is the map, the seven core concepts are the path == */
.eggx__bridge{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,2.5vw,32px);max-width:46rem;margin:var(--stack) auto 0;padding:18px clamp(16px,3vw,28px);border-radius:var(--r-card);background:var(--panel-bg);box-shadow:inset 0 0 0 1px var(--panel-line)}
.eggx__bridge p{display:grid;gap:4px;text-align:center}
.eggx__bridge b{font:italic 600 1.55rem/1.1 var(--serif);color:var(--plum)}
.eggx__bridge p span{font-size:1rem;line-height:1.45;color:var(--plum-ink)}
.eggx__bridge-arrow{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--gold);box-shadow:inset 0 0 0 1px rgba(201,162,76,.6)}
.eggx__bridge-arrow svg{width:18px;height:18px}
@media (max-width:560px){.eggx__bridge{grid-template-columns:1fr;gap:10px}.eggx__bridge-arrow{margin:0 auto;transform:rotate(90deg)}}

/* == "In the egg:" region chips inside each concept fold (data-egg-go selects the region and scrolls up) == */
.concept__regions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;margin-top:var(--group);padding-top:14px;border-top:1px solid rgba(201,162,76,.3)}
.concept__in{font:italic 600 1.1rem/1.2 var(--serif);color:var(--plum)}
.egg-chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:4px 16px 4px 5px;border-radius:999px;font:600 1.05rem/1.1 var(--serif);color:var(--plum-deep);text-decoration:none;background:linear-gradient(90deg,rgba(243,226,180,.8),rgba(251,247,239,.6));box-shadow:inset 0 0 0 1px rgba(201,162,76,.45);-webkit-tap-highlight-color:transparent;transition:box-shadow .25s var(--ease-out),background-color .25s var(--ease-out),transform .2s var(--ease-out)}
.egg-chip__n{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;font:500 .875rem/1 var(--caps);color:var(--gold-hi);background:var(--plum);box-shadow:0 0 0 2px rgba(243,226,180,.9)}
@media (hover:hover) and (pointer:fine){.egg-chip:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--gold),0 10px 20px -14px rgba(74,16,41,.5)}}
.egg-chip:active{transform:scale(.97)}
.egg-chip:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
/* one divider only: after a ruled pull line, the chip row uses that line (Carson 2026-11-09) */
.pull-line+.concept__regions{border-top:0;padding-top:0;margin-top:14px}

/* == "Read concept" cue: arriving from the egg's card, the concept's title gets a gold line that draws, holds, fades
   (egg.js adds .eggx-cue to the title for about 5s) == */
.eggx-cue{position:relative}
.fold__text b.eggx-cue{justify-self:start}
.eggx-cue::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--gold),var(--gold-soft));transform-origin:0 50%;pointer-events:none;animation:eggx-cue 4.4s .55s var(--ease-out) both}
h2.eggx-cue::after{left:50%;right:auto;bottom:-6px;width:5em;margin-left:-2.5em;transform-origin:50% 50%}
@keyframes eggx-cue{0%{opacity:1;transform:scaleX(0)}16%{opacity:1;transform:scaleX(1)}80%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}

/* phones 2026-11-10: Enlarge pill to the 44px tap floor (its ::before already reached 48px) */
@media (max-width:759px),(pointer:coarse){.eggx__zoom{min-height:44px}} /* 2026-11-10: touch tablets too */

/* reduced motion: no entrance, no travelling light or zoom, no scroll or pointer light; states change at once */
@media (prefers-reduced-motion:reduce){
  .eggx__stage *,.eggx__stage *::after,.egg-chip{animation:none!important;transition:none!important}
  .eggx__stage .eggx__art{transform:none!important}
  .eggx__spark,.eggx__beam,.eggx__dusk,.eggx__starlit{display:none}
  .eggx-cue::after{animation:none}
}