/* Willowmere exhibit uses the template's existing type and color tokens. */
.dreamscape{width:min(960px,100% - 48px);margin:2rem auto 0;position:relative;text-align:center}
.world-visual{display:block;position:relative;height:clamp(360px,52vw,650px);isolation:isolate;color:var(--umber)}
.world-visual:before{content:'';position:absolute;width:60%;height:14%;left:20%;bottom:14%;background:color-mix(in srgb,var(--accent) 12%,transparent);filter:blur(28px);border-radius:50%;z-index:-1}
#miniature{position:absolute;inset:0}#miniature canvas{display:block;width:100%;height:100%;pointer-events:none}
.fallback-preview{position:absolute;left:10%;top:10%;width:80%;height:70%;object-fit:contain}.webgl-ready .fallback-preview{display:none}
.visual-cue{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);font:300 var(--text-xs) var(--font-caps);letter-spacing:var(--track-caps);text-transform:uppercase;opacity:0;transition:opacity var(--dur-quick)}
.world-visual:hover .visual-cue,.world-visual:focus-visible .visual-cue{opacity:1}
.world-caption{margin:-1rem auto 0;max-width:600px;position:relative}.world-eyebrow{font:300 var(--text-xs) var(--font-caps);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--umber);margin-bottom:1rem}
.world-caption h2{font:400 clamp(1.7rem,3.6vw,2.4rem)/1.2 var(--font-display);letter-spacing:var(--track-title);text-indent:var(--track-title);color:var(--ink)}
.world-description{font:italic var(--text-lead)/var(--leading-snug) var(--font-serif);color:var(--ink-soft);max-width:40ch;margin:1rem auto 1.8rem;text-wrap:balance}
.world-caption .pill-btn{display:inline-flex;gap:1.3rem;align-items:center}.preview-status{font:italic var(--text-base)/var(--leading-snug) var(--font-serif);color:var(--umber);margin-top:1rem;min-height:1em}
@media(width<=600px){.dreamscape{width:calc(100% - 32px);margin-top:1rem}.world-visual{height:360px;margin:0 -16px}.world-caption{padding:0 12px}.world-description{font-size:1.16rem}.visual-cue{display:none}}
@media(prefers-reduced-motion:reduce){.visual-cue{transition:none}}
/* Two original inputs, kept beside the world as a small stack of sketch notes. */
.dreamscape{display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:24px;align-items:center}.dreamscape>.world-visual{grid-column:1;grid-row:1;height:auto;aspect-ratio:1.43}.dreamscape>.world-caption{grid-column:1;grid-row:2}.dreamscape>.preview-status{grid-column:1;grid-row:3}.reference-notes{grid-column:2;grid-row:1/4;position:relative;isolation:isolate;margin:28px 4px 0 0;text-align:center;transform:rotate(2deg)}.reference-notes:before,.reference-notes:after{content:'';position:absolute;inset:3px -3px -3px;background:#e5d8bd;border:1px solid #88765533;z-index:-1;transform:rotate(-5deg);box-shadow:0 3px 10px #0002}.reference-notes:after{inset:0;background:#efe4cc;transform:rotate(-2deg)}.note-sheet{position:relative;background:#f1e8d3;color:#4e4030;padding:22px 13px 12px;box-shadow:0 9px 22px #0003;border:1px solid #9c886a40}.note-sheet:before{content:'';position:absolute;top:-8px;left:calc(50% - 25px);width:50px;height:18px;transform:rotate(-7deg);background:#cfb987a6;border:1px solid #cfb98766;box-shadow:0 1px 3px #0001}.note-label{font:300 .58rem var(--font-caps);letter-spacing:.22em;text-transform:uppercase;color:#796547;margin:0 0 16px}.reference-page[hidden]{display:none}.note-image{display:block;width:100%;padding:0;border:0;background:#e5ddcd;cursor:zoom-in}.note-image img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}.reference-page figcaption{font:italic 1.05rem/1.3 var(--font-serif);color:#54432f;margin:13px 2px 9px}.note-paging,.dialog-paging{display:flex;align-items:center;justify-content:center;gap:17px}.note-paging button,.dialog-paging button{font:400 1.2rem/1 var(--font-serif);width:36px;height:32px;border:1px solid #9c886a45;background:transparent;color:inherit;cursor:pointer;border-radius:2px}.note-paging button:disabled,.dialog-paging button:disabled{opacity:.3;cursor:default}.note-paging button:not(:disabled):hover{background:#cdb98626}.note-paging span,.dialog-paging span{font:300 .62rem var(--font-caps);letter-spacing:.15em;min-width:50px}.note-instruction{font:italic .75rem/1.4 var(--font-serif);color:#7c6c55;margin:8px 0 0}.reference-notes:focus-visible{outline:2px solid var(--gold);outline-offset:12px}.reference-dialog{position:fixed;inset:0;margin:auto;max-width:min(1000px,94vw);max-height:94svh;width:max-content;padding:28px;background:#f1e8d3;color:#4e4030;border:1px solid #9c886a80;border-radius:3px;box-shadow:0 20px 80px #0008;overflow:auto}.reference-dialog::backdrop{background:#100a15d9;backdrop-filter:blur(5px)}.reference-dialog h2{font:400 .65rem var(--font-caps);letter-spacing:.2em;text-transform:uppercase;margin:0 30px 18px}.reference-close{position:absolute;right:10px;top:6px;width:36px;height:36px;border:0;background:transparent;color:#4e4030;font:400 1.8rem var(--font-serif);cursor:pointer}.reference-dialog>img{display:block;width:auto;max-width:100%;height:auto;max-height:67svh;margin:auto;object-fit:contain}.reference-dialog>p{font:italic 1.15rem/1.4 var(--font-serif);margin:14px 0;text-align:center}.dialog-paging{color:#4e4030}@media(width<=760px){.dreamscape{display:block}.dreamscape>.world-visual{height:clamp(350px,66vw,500px);aspect-ratio:auto}.reference-notes{width:min(290px,85%);margin:42px auto 20px;transform:rotate(1.5deg)}.reference-dialog{padding:24px 14px 16px}.reference-dialog>img{max-height:62svh}.reference-dialog h2{font-size:.58rem}}

/* Plain reference prints, held together by one small metal paperclip. */
.reference-notes{transform:rotate(1.5deg)}.reference-notes:before{inset:2px -3px -3px;background:#f2eee5;border:1px solid #c5bfae;transform:rotate(-4deg);box-shadow:0 3px 8px #0002}.reference-notes:after{display:none}.note-sheet{padding:7px 7px 6px;background:#f5f1e8;border:1px solid #c5bfae;box-shadow:0 5px 15px #0003}.note-sheet:before{width:12px;height:39px;top:-16px;left:18px;border:2px solid #a9a9a3;border-radius:7px;background:transparent;box-shadow:1px 1px 1px #fff9,inset 1px 0 1px #fff9,2px 2px 3px #0003;transform:rotate(-16deg);z-index:1}.note-sheet:after{content:'';position:absolute;width:5px;height:27px;top:-12px;left:22px;border:1px solid #b5b5af;border-top:0;border-radius:0 0 5px 5px;transform:rotate(-16deg);z-index:1}.note-paging{margin-top:6px;gap:12px}.note-paging button{border:0;width:30px;height:26px}.note-paging span{font-size:.59rem}.reference-page figcaption[hidden]{display:none}.note-image{background:#eee9df}.reference-dialog>p{display:none}

/* site amendment (sepanta): micro subtitle over the reference prints — one size below the eyebrow */
.sketches-title{font:300 var(--text-xs) var(--font-caps);text-transform:uppercase;letter-spacing:var(--track-caps);text-align:center;color:var(--umber);margin:30px 0 0;position:relative;z-index:1}

/* site amendment (sepanta): the pile now shows its true count — real fanned
   sheets (injected per sketch) replace the two decorative under-sheets, and
   the SKETCHES subheader sits on the page ground below the pile, not on
   paper. The top sheet is draggable (paging), so it advertises it. */
.reference-notes:before,.reference-notes:after{display:none!important}
.pile-wrap{position:relative}
.pile-sheet{position:absolute;inset:0;background:#ece0c6;border:1px solid #88765533;box-shadow:0 3px 10px #0002;z-index:-1}
.pile-sheet:nth-child(1){transform:rotate(-7deg) translate(-9px,6px);background:#e5d8bd}
.pile-sheet:nth-child(2){transform:rotate(-3.5deg) translate(7px,3px);background:#efe4cc}
.pile-sheet:nth-child(3){transform:rotate(3deg) translate(-5px,8px);background:#f2eee5}
.pile-sheet:nth-child(4){transform:rotate(6deg) translate(9px,5px);background:#e9dfc8}
.note-sheet{touch-action:pan-y;cursor:grab;will-change:transform;user-select:none;-webkit-user-select:none}
.note-sheet img{-webkit-user-drag:none;user-drag:none}
.note-sheet.dragging{cursor:grabbing;transition:none!important}
.note-sheet.settling{transition:transform .35s cubic-bezier(.22,.9,.3,1.1)}
.sketches-title{margin:26px 0 0;position:relative;z-index:1}

/* site amendment (sepanta): Starholm shares every class above; only its
   miniature mount and its fallback's visibility pair are its own. The pair
   exists because Willowmere's module flags `webgl-ready` on <body>, which
   must not hide Starholm's still — each dome hides only its own fallback. */
#starholm-miniature{position:absolute;inset:0}

/* site amendment (sepanta): Pelagic wears the same dome as its neighbours —
   the miniature is a site-side derivation of the handoff's scene.glb (the
   handoff itself ships only a still). Same visibility pair as Starholm:
   Willowmere's `webgl-ready` flag must not hide Pelagic's still — each dome
   hides only its own fallback. */
#pelagic-miniature{position:absolute;inset:0}
#pelagic-miniature canvas{display:block;width:100%;height:100%;pointer-events:none}
#starholm-miniature canvas{display:block;width:100%;height:100%;pointer-events:none}

/* site amendment (sepanta, 2026-09-11): ONE reveal grammar for all three
   domes. A 2D image must never share the frame with dome glass (owner) —
   so each dome's canvas stays invisible until its OWN model is live, the
   fallback still holds alone until that exact moment, and the two
   cross-fade. The in-dome billboard card stage is gone from every module;
   each module's ready class now lands on model load, and a failed fetch
   leaves the clean still (with its status line), never a marooned card.
   Willowmere's flag is the unprefixed `webgl-ready`; every still is paired
   to its own flag so no dome hides a neighbour's still. */
.fallback-preview{transition:opacity .5s ease}
body.webgl-ready .fallback-preview{display:block}
#miniature canvas,#starholm-miniature canvas,#pelagic-miniature canvas{opacity:0;transition:opacity .6s ease}
body.webgl-ready #miniature canvas{opacity:1}
body.starholm-webgl-ready #starholm-miniature canvas{opacity:1}
body.pelagic-webgl-ready #pelagic-miniature canvas{opacity:1}
body.webgl-ready .willowmere-fallback,
body.starholm-webgl-ready .starholm-fallback,
body.pelagic-webgl-ready .pelagic-fallback{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}

/* site amendment (sepanta): Fall’s Grace wears the same dome as its
   neighbours. Its own mount, its canvas invisible until its own model is
   live, and its own visibility pair — Willowmere's `webgl-ready` flag must
   not hide Fall’s Grace's still, and each dome hides only its own fallback. */
#falls-grace-miniature{position:absolute;inset:0}
#falls-grace-miniature canvas{display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s ease}
body.falls-grace-webgl-ready #falls-grace-miniature canvas{opacity:1}
body.falls-grace-webgl-ready .falls-grace-fallback{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}

/* site amendment (sepanta): Azurekeep wears the same dome. Its own mount, its
   canvas invisible until its own model is live, and its own visibility pair,
   so Willowmere's `webgl-ready` flag does not hide Azurekeep's still. */
#azurekeep-miniature{position:absolute;inset:0}
#azurekeep-miniature canvas{display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s ease}
body.azurekeep-webgl-ready #azurekeep-miniature canvas{opacity:1}
body.azurekeep-webgl-ready .azurekeep-fallback{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}

/* site amendment (sepanta): Aetherion wears the same dome, with its own mount,
   canvas and visibility pair, so no other dome's ready flag hides its still. */
#aetherion-miniature{position:absolute;inset:0}
#aetherion-miniature canvas{display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s ease}
body.aetherion-webgl-ready #aetherion-miniature canvas{opacity:1}
body.aetherion-webgl-ready .aetherion-fallback{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}

/* site amendment (sepanta): Manor by the Lake wears the same dome, with its own
   mount, canvas and visibility pair, so no other dome's ready flag hides its still. */
#manor-by-the-lake-miniature{position:absolute;inset:0}
#manor-by-the-lake-miniature canvas{display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s ease}
body.manor-by-the-lake-webgl-ready #manor-by-the-lake-miniature canvas{opacity:1}
body.manor-by-the-lake-webgl-ready .manor-by-the-lake-fallback{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}

/* site amendment (sepanta): The Spire wears the same dome, with its own mount,
   canvas and visibility pair, so no other dome's ready flag hides its still. */
#the-spire-miniature{position:absolute;inset:0}
#the-spire-miniature canvas{display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s ease}
body.the-spire-webgl-ready #the-spire-miniature canvas{opacity:1}
body.the-spire-webgl-ready .the-spire-fallback{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}

/* site amendment (sepanta): dreamwalks, how many times a world has been entered,
   one quiet line between the description and Enter. The line keeps its height
   while hidden, so its arrival never moves the Enter button. */
.dreamwalks{margin:-.9rem 0 1.4rem;font:300 var(--text-xs)/1rem var(--font-caps);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--umber);text-align:center}
.dreamwalks[hidden]{display:block;visibility:hidden}
.dreamwalks-eye{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.2em;margin-right:.5em;overflow:visible}
.dreamwalks-said{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}