@font-face{font-family:Cabinet;src:url(assets/serif.woff)}@font-face{font-family:Inter;src:url(assets/sans.woff)}*{box-sizing:border-box}body{margin:0;background:#fff;color:#23221f;font-family:Inter,Arial,sans-serif}header,footer{padding:26px 5vw;display:flex;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:.08em;color:#77736a}header a{color:inherit;text-decoration:none}main{text-align:center}.stage{height:min(760px,calc(100svh - 145px));min-height:570px;position:relative;max-width:1100px;margin:auto}.core{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:340px;transition:transform .7s,top .7s;z-index:2}#seal{border:0;background:transparent;cursor:pointer;padding:0;transition:transform .5s}#seal:hover{transform:scale(1.04)}.seal-crop{display:block;width:160px;height:162px;overflow:hidden;margin:auto}.seal-crop img{width:425px;max-width:none;display:block;transform:translate(-130px,-34px);mix-blend-mode:multiply}h1{font-family:Cabinet,Georgia,serif;font-weight:400;font-size:42px;line-height:1.12;margin:15px 0;color:#24221e}h1 span{display:block;font-size:17px;letter-spacing:.15em;margin-bottom:9px}#hint{font-size:11px;color:#8b8272;margin-top:25px}.threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.threads line{stroke:#cbb68a;stroke-width:1;opacity:0;transition:opacity .7s}.open .threads line{opacity:.65}.node{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.4);opacity:0;visibility:hidden;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s, left .7s,top .7s;z-index:3;width:120px}.open .node{transform:translate(-50%,-50%);opacity:1;visibility:visible}.orb{width:62px;height:62px;border:1px solid #d4c29d;border-radius:50%;background:#fff;display:inline-grid;place-items:center;color:#8f6d30;cursor:pointer;box-shadow:0 6px 24px #99805a0b;transition:transform .4s,box-shadow .4s,background .4s}.orb svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}.node-label{display:block;font-family:Cabinet,Georgia,serif;font-size:16px;margin-top:12px}.selected .orb{transform:scale(1.24);background:#fcfaf5;box-shadow:0 10px 30px #99805a22}.orb:focus-visible,#seal:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid #9b7437;outline-offset:6px}#destination{position:absolute;top:69%;left:50%;transform:translate(-50%,0);width:min(410px,85%);padding:22px 30px;text-align:left;background:#fff;border:1px solid #e9dfcc;box-shadow:0 16px 50px #4032190b;z-index:5;animation:appear .35s}.card-kicker{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#9b7437}#destination h2{font-family:Cabinet,Georgia,serif;font-weight:400;font-size:25px;margin:9px 0}#destination p{font-size:12px;line-height:1.7;color:#747066;margin:0 0 12px}#destination a{color:#896528;font-size:11px;text-decoration:none;border-bottom:1px solid #cbb68a;padding-bottom:4px}#dismiss{position:absolute;right:10px;top:9px;border:0;background:white;color:#777;font-size:22px;cursor:pointer}.simple{display:inline-block;margin:18px 0;color:#8d8270;font-size:10px;text-decoration:none}footer{border-top:1px solid #f0ece4;font-size:9px}@keyframes appear{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@media(max-width:600px){header{padding:20px 20px;font-size:9px}.private{font-size:8px}.stage{height:700px;min-height:650px}.core{width:260px;top:44%}h1{font-size:32px}.seal-crop{width:125px;height:127px}.seal-crop img{width:332px;transform:translate(-102px,-27px)}.node{width:95px}.orb{width:49px;height:49px}.orb svg{width:21px;height:21px}.node-label{font-size:13px;margin-top:9px}#hint{font-size:10px;max-width:200px;margin:20px auto}#destination{top:70%;padding:20px 24px}#destination h2{font-size:23px}footer{flex-direction:column;gap:9px;text-align:center} .simple{margin:12px 0 24px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* Fit the constellation, preview and footer within the viewport. */
body{height:100svh;min-height:0;display:flex;flex-direction:column}
header{flex:none;padding:18px 5vw}
main{flex:1;min-height:0;display:flex;flex-direction:column}
.stage{flex:1;width:100%;height:auto;min-height:0}
.core{top:calc((100% - 190px)*.48);width:300px}
#destination{top:auto;bottom:4px;max-height:180px;padding:16px 24px;overflow-y:auto}
#destination h2{font-size:23px;margin:7px 0}
#destination p{line-height:1.5;margin-bottom:9px}
.simple{flex:none;margin:10px 0 14px}
footer{flex:none;align-items:center;flex-wrap:wrap;position:relative;padding:16px 5vw}
@media(max-width:600px){
header{padding:14px 16px;gap:10px}
.core{width:240px;top:calc((100% - 180px)*.48)}
.seal-crop{width:100px;height:102px}
.seal-crop img{width:266px;transform:translate(-82px,-22px)}
h1{font-size:28px;margin:10px 0}h1 span{font-size:13px;margin-bottom:6px}
#hint{font-size:9px;margin:12px auto;max-width:170px}
.orb{width:44px;height:44px}.node{width:90px}.node-label{font-size:12px;margin-top:7px}
#destination{bottom:3px;max-height:170px;padding:13px 20px;width:min(410px,92%)}
#destination h2{font-size:21px}#destination p{font-size:11px}
footer{padding:12px 16px;gap:7px}.simple{margin:7px 0 10px}
}
@media(max-height:700px){
header{padding-top:10px;padding-bottom:10px}
.seal-crop{width:78px;height:80px}.seal-crop img{width:208px;transform:translate(-64px,-17px)}
h1{font-size:25px;margin:6px 0}h1 span{font-size:12px;margin-bottom:4px}
#hint{margin:8px auto;font-size:9px;max-width:170px}
.orb{width:38px;height:38px}.orb svg{width:19px;height:19px}.node-label{font-size:11px;margin-top:5px}
.core{width:210px}footer{padding-top:9px;padding-bottom:9px}
}

/* A quiet opening thought, fading away when the constellation unfolds. */
.opening-thought{position:absolute;left:50%;top:74%;transform:translate(-50%,-50%);width:min(620px,86%);margin:0;font-family:Cabinet,Georgia,serif;font-size:clamp(19px,2.1vw,26px);font-weight:400;font-style:italic;line-height:1.55;color:#85734f;opacity:1;transition:opacity .6s ease;pointer-events:none}
.open .opening-thought,.opening-thought.thought-hidden{opacity:0}
@media(max-width:600px){.opening-thought{top:73%;width:86%;font-size:20px;line-height:1.5}.thought-break{display:none}}
@media(max-height:550px){.opening-thought{font-size:17px;line-height:1.4}}

.node-label{max-width:120px;margin-left:auto;margin-right:auto}.open .core{width:240px}.open .seal-crop{width:90px;height:92px}.open .seal-crop img{width:239px;transform:translate(-73px,-19px)}.open h1{font-size:29px}.open #hint{max-width:170px;margin:12px auto}@media(max-width:600px){.open .core{width:160px}.open h1{font-size:22px}.open h1 span{font-size:10px}.open .seal-crop{width:62px;height:64px}.open .seal-crop img{width:166px;transform:translate(-51px,-14px)}.open #hint{font-size:8px;max-width:130px}.node-label{max-width:90px}}

/* Keep readable controls in narrow previews and tablet viewports. */
body{height:auto;min-height:100svh}
main{min-height:auto}
.stage{min-height:360px;flex-basis:360px}
.stage.open{min-height:560px;flex-basis:560px}
.node{width:144px}
.node-label{max-width:144px;font-size:16px;line-height:1.3;color:#373027;margin-top:12px}
.orb{width:56px;height:56px}
.orb svg{width:25px;height:25px;stroke-width:1.5}
.selected .orb{transform:scale(1.12)}
.open .core{width:230px}
.open .seal-crop{width:90px;height:92px}
.open .seal-crop img{width:239px;transform:translate(-73px,-19px)}
.open h1{font-size:29px;margin:12px 0}
.open h1 span{font-size:14px}
.open #hint{font-size:11px;line-height:1.45;max-width:190px;margin:14px auto;color:#655d50}
#destination{bottom:12px;max-height:196px;width:min(460px,90%);padding:20px 26px}
#destination p{font-size:14px;line-height:1.55}
#destination a{font-size:13px}
#destination h2{font-size:25px}
.card-kicker{font-size:10px}
.simple{font-size:12px}
@media(max-width:600px){
.stage.open{min-height:590px;flex-basis:590px}
.node{width:96px}
.node-label{font-size:14px;max-width:96px;line-height:1.3;margin-top:10px}
.orb{width:48px;height:48px}.orb svg{width:23px;height:23px}
.open .core{width:134px}
.open .seal-crop{width:68px;height:70px}
.open .seal-crop img{width:181px;transform:translate(-56px,-15px)}
.open h1{font-size:22px;line-height:1.15}.open h1 span{font-size:11px;letter-spacing:.08em}
.open #hint{font-size:10px;max-width:130px;line-height:1.4;margin:12px auto}
#destination{width:92%;padding:17px 22px;max-height:205px}
#destination h2{font-size:23px}
header{font-size:10px}.private{font-size:9px}
}
@media(max-width:360px){.node{width:88px}.node-label{max-width:88px;font-size:13px}.open .core{width:120px}.open h1{font-size:20px}.open #hint{max-width:118px}}

/* Staggered constellation: space for long captions and unequal branches. */
.stage.open{min-height:630px;flex-basis:630px}
.opening-thought{top:77%;width:min(650px,86%);color:#79633f}
body:not(:has(.stage.open)) .stage{min-height:420px;flex-basis:420px}
@media(max-width:600px){.stage.open{min-height:660px;flex-basis:660px}.opening-thought{top:78%;font-size:20px}.open .node-label{font-size:14px}.open .core{width:134px}}
@media(max-width:360px){.open .core{width:120px}.open .node-label{font-size:13px}}

/* Final viewport sizing: the footer and preview share the available height. */
body{height:100svh;min-height:0}
header{padding:12px 4vw;min-height:38px}
main{flex:1;min-height:0}
.stage,.stage.open,body:not(:has(.stage.open)) .stage{min-height:0;flex:1 1 0;height:auto}
footer{padding:10px 4vw;font-size:10px;gap:8px}
.simple{margin:6px 0 8px;font-size:11px;line-height:1.3}
.node{width:132px}.node-label{max-width:132px;font-size:15px;margin-top:8px;line-height:1.2}
.orb{width:48px;height:48px}.orb svg{width:23px;height:23px}
.open .core{width:210px}.open .seal-crop{width:72px;height:74px}.open .seal-crop img{width:192px;transform:translate(-59px,-16px)}
.open h1{font-size:25px;margin:8px 0}.open h1 span{font-size:12px;margin-bottom:5px}
.open #hint{font-size:10px;line-height:1.3;margin:9px auto;max-width:170px}
#destination{bottom:4px;max-height:calc(var(--card-space,180px) - 6px);padding:14px 22px;width:min(450px,90%)}
#destination h2{font-size:22px;margin:6px 0}
#destination p{font-size:12px;line-height:1.45;margin-bottom:8px}
#destination a{font-size:12px}.card-kicker{font-size:9px}
.opening-thought{top:76%;font-size:clamp(18px,2vw,25px)}
.short-stage.open .orb{width:40px;height:40px}.short-stage.open .node-label{font-size:13px;margin-top:7px}
.short-stage.open .seal-crop{width:58px;height:60px}.short-stage.open .seal-crop img{width:155px;transform:translate(-47px,-13px)}
.short-stage.open h1{font-size:22px}.short-stage.open #hint{font-size:9px;margin:6px auto;max-width:150px}
@media(max-width:600px){
header{padding:10px 14px;font-size:9px;min-height:34px}.private{font-size:8px}
footer{padding:8px 14px;gap:5px;font-size:9px}
.node{width:90px}.open .node-label{max-width:90px;font-size:13px}
.open .core{width:130px}.open h1{font-size:21px}.open h1 span{font-size:10px}.open #hint{max-width:124px;font-size:9px}
.orb{width:44px;height:44px}
#destination{padding:12px 19px;width:92%}#destination h2{font-size:21px}
.opening-thought{top:78%;font-size:19px;line-height:1.4}
}
@media(max-width:360px){.node{width:84px}.open .node-label{max-width:84px;font-size:12px}.open .core{width:116px}.open h1{font-size:19px}}
/* Very low windows and enlarged text may scroll to keep every control usable. */
@media(max-height:480px){body{height:auto;min-height:100svh}.stage.open{min-height:360px;flex-basis:360px}.stage{min-height:320px;flex-basis:320px}}

/* The upper branch label sits outside the line, above its icon. */
.node[data-key="ligne"] .node-label{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);width:max-content;max-width:132px;margin:0;padding:2px 5px;background:#fff}

/* Warm gold branches and closer, quieter captions. */
.threads line{stroke:#b28b3d;stroke-width:1.2}
.open .threads line{opacity:.95}
.node-label,.short-stage.open .node-label{margin-top:3px}
.node[data-key="ligne"] .node-label{bottom:calc(100% + 3px);margin:0}
#destination-link{display:block;width:fit-content;max-width:100%;margin:10px auto 0;text-align:center}

/* Hide the shortcut while the catalogue icon is available; keep layout stable. */
.stage.open ~ .simple{visibility:hidden;opacity:0;pointer-events:none}

/* A golden selected medallion retains the existing scale and transition. */
.selected .orb{background:linear-gradient(135deg,#f0d58c 0%,#c9a24e 48%,#ae812d 100%);border-color:#a77c2e;color:#30230d;box-shadow:0 8px 26px #b28b3d38,inset 0 1px 0 #fff4cb9c}
.selected .node-label{color:#896423}


/* Centered rubric preview with its own icon and publisher seal as the link. */
#destination{text-align:center;padding:10px 24px}
#destination h2{display:flex;align-items:center;justify-content:center;gap:9px;font-size:20px;line-height:1.15;margin:6px 0}
#destination-icon{display:inline-flex;flex:0 0 23px;color:#9f792f}
#destination-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#destination-heading{max-width:calc(100% - 32px)}
#destination p{margin:0 auto 6px;line-height:1.4}
#destination #destination-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;padding:2px 8px;margin:4px auto 0;min-height:44px;line-height:1.2;width:fit-content;color:#896528}
.destination-emblem{display:block;width:28px;height:29px;overflow:hidden;transition:transform .25s}
.destination-emblem img{display:block;width:75px;max-width:none;transform:translate(-23px,-6px);mix-blend-mode:multiply}
#destination-link:hover .destination-emblem,#destination-link:focus-visible .destination-emblem{transform:scale(1.08)}
#destination-link:hover>span:last-child{text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){#destination{padding:10px 22px}#destination h2{font-size:19px;gap:7px}}

/* Let each preview use its full content height, without an inner scrollbar. */
#destination{width:min(500px,92%);height:auto;max-height:none;overflow:visible;padding:14px 24px}
.destination-emblem{width:36px;height:37px}
.destination-emblem img{width:96px;transform:translate(-29.5px,-7.7px);filter:grayscale(1);transition:filter .25s}
#destination-link:hover .destination-emblem img,
#destination-link:focus-visible .destination-emblem img,
#destination-link:active .destination-emblem img,
#destination-link.opening .destination-emblem img{filter:grayscale(0)}
@media(max-width:600px){#destination{padding:13px 22px}}

/* One consistent frame for every rubric; only its contents change. */
#destination{height:var(--preview-height,190px)}
#destination:not([hidden]){display:flex;flex-direction:column;align-items:center}
#destination>.card-kicker,#destination>h2,#destination>p{flex-shrink:0}
#destination #destination-link{flex-shrink:0;margin-top:auto}

@media(max-width:600px){.node{width:90px}.node-label{font-size:13px;line-height:1.2}.orb{width:48px;height:48px}.orb svg{width:22px;height:22px}}

/* Keep the entire welcome, constellation and footer within one viewport. */
body{height:100svh;min-height:0;overflow:hidden}
main{flex:1;min-height:0}
.stage,.stage.open,body:not(:has(.stage.open)) .stage{min-height:0;flex:1 1 0;height:auto}
.open .opening-thought{opacity:0}
.opening-thought{font-size:clamp(16px,2vw,23px);line-height:1.4;z-index:1}
.threads{z-index:0}.threads line{stroke-width:1.4}
.open .core{width:180px}.open #hint{display:none}
.open .seal-crop,.short-stage.open .seal-crop{width:58px;height:60px}
.open .seal-crop img,.short-stage.open .seal-crop img{width:155px;transform:translate(-47px,-13px)}
.open h1,.short-stage.open h1{font-size:23px;line-height:1.12;margin:7px 0}.open h1 span{font-size:11px;margin-bottom:4px}
.node,.short-stage.open .node{width:120px}.node-label,.short-stage.open .node-label{font-size:14px;line-height:1.2;margin-top:4px}
.orb,.short-stage.open .orb{width:44px;height:44px}
.node[data-key="ligne"] .node-label{bottom:calc(100% + 4px)}
#destination{padding:12px 22px}#destination p,#destination a{font-size:14px}.card-kicker{font-size:10px}
@media(max-width:600px){
.node,.short-stage.open .node{width:94px}.node-label,.open .node-label,.short-stage.open .node-label{max-width:94px;font-size:14px}
.open .core{width:126px}.open h1,.short-stage.open h1{font-size:20px}.open h1 span{font-size:10px}
.opening-thought{font-size:17px;width:88%}
header{padding:8px 14px}footer{padding:6px 14px;gap:4px}
#destination{padding:10px 18px}#destination h2{font-size:19px}
}
@media(max-height:600px){
header{padding-top:6px;padding-bottom:6px}.simple{margin:3px 0}footer{padding-top:5px;padding-bottom:5px}
.open .core{width:150px}.open h1,.short-stage.open h1{font-size:20px}
.open .seal-crop,.short-stage.open .seal-crop{width:48px;height:50px}.open .seal-crop img,.short-stage.open .seal-crop img{width:128px;transform:translate(-39px,-11px)}
.orb,.short-stage.open .orb{width:38px;height:38px}.node-label,.open .node-label,.short-stage.open .node-label{font-size:13px}
#destination{padding:8px 18px}#destination h2{font-size:18px}#destination p,#destination a{font-size:12px}
.destination-emblem{width:28px;height:29px}.destination-emblem img{width:75px;transform:translate(-23px,-6px)}
}

@media(max-width:360px){.open .core{width:110px}.open h1,.short-stage.open h1{font-size:18px}}

/* Crop only the seal (438,116 to 1002,650), excluding the printed lettering. */
:is(.seal-crop,.destination-emblem){position:relative;height:auto!important;aspect-ratio:564/534;overflow:hidden}
:is(.seal-crop,.destination-emblem) img{position:absolute;left:-77.659574%;top:-21.722847%;width:256.737589%!important;height:auto!important;max-width:none;transform:none!important;display:block}

/* Keep the central composition continuous while the branches unfold. */
.core{transition:top .65s cubic-bezier(.4,0,.2,1),width .65s cubic-bezier(.4,0,.2,1);transform:translate(-50%,-50%)}
#seal,#seal:hover{transform:none;transition:none}
.seal-crop{transition:width .65s cubic-bezier(.4,0,.2,1)}
.core h1{transition:font-size .65s cubic-bezier(.4,0,.2,1),margin .65s cubic-bezier(.4,0,.2,1),line-height .65s cubic-bezier(.4,0,.2,1)}
.core h1 span{transition:font-size .65s cubic-bezier(.4,0,.2,1),margin .65s cubic-bezier(.4,0,.2,1),letter-spacing .65s cubic-bezier(.4,0,.2,1)}
.core #hint{display:block;max-height:70px;overflow:hidden;opacity:1;transition:opacity .3s ease,max-height .65s cubic-bezier(.4,0,.2,1),margin .65s cubic-bezier(.4,0,.2,1)}
.open .core #hint{display:block;max-height:0;opacity:0;margin:0 auto;pointer-events:none}
.node{transition:transform .65s cubic-bezier(.4,0,.2,1),opacity .45s ease,left .65s cubic-bezier(.4,0,.2,1),top .65s cubic-bezier(.4,0,.2,1),visibility 0s .65s}
.open .node{transition:transform .65s cubic-bezier(.4,0,.2,1),opacity .45s ease,left .65s cubic-bezier(.4,0,.2,1),top .65s cubic-bezier(.4,0,.2,1),visibility 0s}
@media(prefers-reduced-motion:reduce){.core,.seal-crop,.core h1,.core h1 span,.core #hint,.node,.open .node{transition:none!important}}

/* Keep all branches reachable when the private viewer has a short viewport. */
body:has(.stage .node[data-key="creation-roman"]){height:auto;min-height:100svh;overflow-y:auto;overflow-x:hidden}
body:has(.stage .node[data-key="creation-roman"]) main{min-height:min-content}