/* EXPRESSIVE5 — decorative objects only; no canonical content transforms. */
.jn-graphic-object{--gx-paper:#f0e8cd;--gx-shade:#b5b09a;--gx-ink:#182a30;--gx-accent:#9a493f;--gx-folder:#536965;--gx-folder-back:#263e41;display:block;position:relative;width:100%;height:170px;min-width:0;isolation:isolate;pointer-events:none;contain:layout paint;flex-shrink:0;margin:0 auto 12px;color:var(--gx-ink)}
.jn-graphic-object[data-faction="brotherhood"]{--gx-paper:#d6c8a2;--gx-shade:#a89b7d;--gx-ink:#302e26;--gx-accent:#8c4735;--gx-folder:#887959;--gx-folder-back:#494334}
.jn-graphic-object svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 3px #0004)}
.gx-paper{fill:var(--gx-paper);stroke:var(--gx-ink);stroke-width:2;stroke-linejoin:round}.gx-paper-shadow{fill:var(--gx-shade)}.gx-ink{fill:var(--gx-ink)}.gx-accent,.gx-wax{fill:var(--gx-accent)}
.gx-wire,.gx-rule,.gx-fold-line{fill:none;stroke:var(--gx-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.gx-rule{stroke-width:1.5;opacity:.65}.gx-fold-line{stroke-width:1;opacity:.65}.gx-eye,.gx-seal-line{fill:none;stroke:var(--gx-paper);stroke-width:2;stroke-linecap:round}.gx-ground{fill:#0002}.gx-folder{fill:var(--gx-folder);stroke:var(--gx-ink);stroke-width:2}.gx-folder-back{fill:var(--gx-folder-back);stroke:var(--gx-ink);stroke-width:2}.gx-tab{fill:var(--gx-folder)}.gx-stamp-ring{fill:none;stroke:var(--gx-accent);stroke-width:3}.gx-tape{fill:#d2bd88;opacity:.9}.gx-talisman{fill:var(--gx-paper);stroke:var(--gx-accent);stroke-width:2}.gx-seal-ring{fill:var(--gx-accent);stroke:var(--gx-ink);stroke-width:1}.gx-reader{fill:var(--gx-folder);stroke:var(--gx-ink);stroke-width:2}.gx-repair{display:none;fill:#bc9e6c;stroke:var(--gx-ink);stroke-width:1}[data-faction="brotherhood"] .gx-repair{display:block}
.gx-owl-flight{transform:translate(500px,103px) scale(.76)}.gx-wing-left{transform-origin:-16px 0;transform:rotate(-67deg) scaleX(.58)}.gx-wing-right{transform-origin:16px 0;transform:rotate(67deg) scaleX(.58)}.gx-letter-sheet{transform:translate(295px,120px) scale(.01);opacity:0}.gx-envelope{transform:translate(205px,-19px) scale(.78);transform-origin:296px 155px;opacity:0}.gx-flight-trail{stroke:var(--gx-paper);stroke-dasharray:4 10;opacity:0}
.gx-folder-cover{transform-origin:300px 184px;transform:scaleY(.32) skewX(-5deg)}.gx-dossier-paper{transform:translateY(-7px)}.gx-packet-paper{transform:translateY(-12px)}.gx-clip{transform-origin:300px 40px}.gx-stamp{transform-origin:300px 148px}.gx-seal-left{transform:translateX(-74px) rotate(-9deg);transform-origin:300px 105px}.gx-seal-right{transform:translateX(74px) rotate(9deg);transform-origin:300px 105px}.gx-seal-core{transform:translateY(63px) scale(.48);transform-origin:300px 105px}.gx-seal-strap{opacity:0}.gx-id-card{transform:translateY(3px)}.gx-reader-mark{stroke-dasharray:160;stroke-dashoffset:0}.gx-search-slip{transform:translateY(-15px) rotate(-5deg);transform-origin:300px 155px}.gx-talisman-left{transform:translateX(-34px) rotate(-12deg);transform-origin:300px 105px}.gx-talisman-right{transform:translateX(34px) rotate(12deg);transform-origin:300px 105px}.gx-retrieval-ring{stroke-dasharray:450;stroke-dashoffset:0}.gx-map-talisman{transform-origin:300px 145px}.gx-map-rings{opacity:.45}.gx-map-thread{stroke-dasharray:180;stroke-dashoffset:0}
.jn-graphic-object[data-event="empty"] .gx-eye{d:path('M-23-3q6 7 12 0M11-3q6 7 12 0')}
.jn-graphic-object[data-event="letter"] .gx-envelope{opacity:1;transform:translate(0,0)}
.jn-graphic-object[data-event="letter"] .gx-letter-sheet{opacity:1;transform:translate(0,-5px) scale(1)}
.jn-graphic-object[data-event="compose"] .gx-envelope{opacity:1;transform:translate(0,0)}
.jn-graphic-object[data-event="sent"] .gx-owl-flight,.jn-graphic-object[data-event="sent"] .gx-envelope{opacity:0}
.jn-graphic-object[data-event="sent"] .gx-flight-trail{opacity:.5}
.jn-graphic-object[data-event="sent-tab"] .gx-envelope{opacity:1;transform:translate(0,0)}
.jn-graphic-object[data-event="denied"] .gx-seal-left,.jn-graphic-object[data-event="denied"] .gx-seal-right,.jn-graphic-object[data-event="denied"] .gx-seal-core{transform:none}.jn-graphic-object[data-event="denied"] .gx-seal-strap{opacity:1}
.jn-graphic-object[data-event="denied"] .gx-paper{fill:var(--gx-folder-back)}
.jn-graphic-object.gx-map-stage{position:absolute;width:160px;height:100px;max-width:100%;margin:0;z-index:2}.gx-map-stage svg{width:300px;max-width:none;margin-left:calc(50% - 150px)}
.jn-graphic-object[data-system="retrieval"]{height:138px}.jn-graphic-object[data-system="owl"]{height:160px}
/* One finite sequence per real interaction; mock replay is optional. */
.gx-play[data-system="owl"] .gx-owl-flight{animation:gx-arrive 1150ms cubic-bezier(.2,.6,.25,1) both}.gx-play[data-system="owl"] .gx-wing-left{animation:gx-wing-l 1150ms ease-in-out both}.gx-play[data-system="owl"] .gx-wing-right{animation:gx-wing-r 1150ms ease-in-out both}
.gx-play[data-event="letter"] .gx-envelope{animation:gx-envelope-drop 650ms ease-out both}.gx-play[data-event="letter"] .gx-letter-sheet{animation:gx-letter-open 950ms cubic-bezier(.22,.8,.3,1) both}
.gx-play[data-event="compose"] .gx-envelope-flap{transform-origin:296px 129px;animation:gx-flap 650ms ease-out both}
.gx-play[data-event="sent"] .gx-owl-flight{animation:gx-depart 1700ms cubic-bezier(.5,0,.6,1) both}.gx-play[data-event="sent"] .gx-envelope{animation:gx-carry 1700ms ease-in both}.gx-play[data-event="sent"] .gx-envelope-flap{transform-origin:296px 129px;animation:gx-fold-send 450ms ease-out both}.gx-play[data-event="sent"] .gx-wing-left{animation:gx-wing-l 1700ms ease-in-out both}.gx-play[data-event="sent"] .gx-wing-right{animation:gx-wing-r 1700ms ease-in-out both}
.gx-play[data-event="sent-tab"] .gx-envelope{animation:gx-file-envelope 550ms ease-out both}
.gx-play[data-system="folder"] .gx-folder-cover{animation:gx-folder-open 850ms cubic-bezier(.25,.7,.3,1) both}.gx-play[data-system="folder"] .gx-dossier-paper{animation:gx-record-slide 900ms ease-out both}
.gx-play[data-faction="brotherhood"][data-system="folder"] .gx-folder-stack{animation:gx-working-copy 650ms ease-out both}.gx-play[data-faction="brotherhood"] .gx-clip{animation:gx-clip-snap 850ms ease-out both}
.gx-play[data-system="mission"] .gx-packet{animation:gx-hand-file 800ms cubic-bezier(.15,.65,.3,1) both}.gx-play[data-system="mission"] .gx-packet-paper{animation:gx-record-slide 1050ms ease-out both}.gx-play[data-system="mission"] .gx-stamp{animation:gx-stamp-down 1050ms ease-out both}.gx-play[data-faction="brotherhood"][data-system="mission"] .gx-packet{animation:gx-toss-file 850ms ease-out both}.gx-play .gx-amend{stroke-dasharray:200;animation:gx-draw 1100ms ease-out both}
.gx-play[data-event="authorized"] .gx-seal-left{animation:gx-unseal-l 950ms ease-out both}.gx-play[data-event="authorized"] .gx-seal-right{animation:gx-unseal-r 950ms ease-out both}.gx-play[data-event="authorized"] .gx-seal-core{animation:gx-unseal-core 950ms ease-out both}.gx-play[data-event="denied"] .gx-seal-core{animation:gx-lock-seat 450ms ease-out both}
.gx-play[data-system="identity"] .gx-id-card{animation:gx-card-in 950ms ease-out both}.gx-play[data-system="identity"] .gx-id-seal{transform-origin:356px 113px;animation:gx-stamp-down 1100ms ease-out both}.gx-play .gx-counterfoil{animation:gx-counterfoil 950ms ease-out both}.gx-play .gx-reader-mark{animation:gx-draw 950ms ease-out both}
.gx-play .gx-talisman-left{animation:gx-knot-l 1050ms ease-out both}.gx-play .gx-talisman-right{animation:gx-knot-r 1050ms ease-out both}.gx-play .gx-retrieval-ring{animation:gx-draw 1050ms ease-out both}.gx-play .gx-search-slip{animation:gx-search 1100ms ease-in-out both}
.gx-play .gx-map-rings{transform-origin:300px 105px;animation:gx-ripple 850ms ease-out both}.gx-play .gx-map-talisman{animation:gx-pin-unfold 700ms ease-out both}.gx-play .gx-map-thread{animation:gx-draw 900ms ease-out both}
@keyframes gx-arrive{0%{transform:translate(-95px,50px) scale(.85) rotate(-9deg)}35%{transform:translate(190px,68px) scale(.85) rotate(5deg)}75%{transform:translate(455px,58px) scale(.8) rotate(-5deg)}100%{transform:translate(500px,103px) scale(.76)}}
@keyframes gx-wing-l{0%,28%,56%{transform:rotate(22deg)}14%,42%,70%{transform:rotate(-38deg)}100%{transform:rotate(-67deg) scaleX(.58)}}
@keyframes gx-wing-r{0%,28%,56%{transform:rotate(-22deg)}14%,42%,70%{transform:rotate(38deg)}100%{transform:rotate(67deg) scaleX(.58)}}
@keyframes gx-envelope-drop{0%{transform:translate(186px,-62px) rotate(-16deg);opacity:0}25%{opacity:1}100%{transform:none;opacity:1}}
@keyframes gx-letter-open{0%,20%{transform:translate(150px,108px) scale(.5,.06);opacity:0}30%{opacity:1}100%{transform:translate(0,-5px) scale(1);opacity:1}}
@keyframes gx-flap{from{transform:scaleY(-1)}to{transform:scaleY(1)}}
@keyframes gx-fold-send{from{transform:scaleY(-1)}to{transform:scaleY(1)}}
@keyframes gx-depart{0%,20%{transform:translate(500px,103px) scale(.76);opacity:1}42%{transform:translate(298px,85px) scale(.8);opacity:1}63%{transform:translate(340px,44px) scale(.8) rotate(-8deg);opacity:1}100%{transform:translate(735px,-80px) scale(.68) rotate(-14deg);opacity:0}}
@keyframes gx-carry{0%,20%{transform:translate(0,0);opacity:1}42%{transform:translate(0,0);opacity:1}63%{transform:translate(42px,-41px);opacity:1}100%{transform:translate(437px,-165px);opacity:0}}
@keyframes gx-file-envelope{from{transform:translate(0,-70px) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes gx-folder-open{0%,15%{transform:scaleY(1)}100%{transform:scaleY(.32) skewX(-5deg)}}
@keyframes gx-record-slide{0%,25%{transform:translateY(58px)}100%{transform:translateY(-12px)}}
@keyframes gx-working-copy{0%{transform:translateX(-190px) rotate(-11deg)}75%{transform:translateX(5px) rotate(2deg)}100%{transform:none}}
@keyframes gx-clip-snap{0%,45%{transform:translateY(-70px) rotate(-24deg);opacity:0}70%{transform:translateY(-5px) rotate(6deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes gx-hand-file{from{transform:translateY(160px)}to{transform:none}}
@keyframes gx-toss-file{from{transform:translate(-230px,-45px) rotate(-18deg)}70%{transform:translate(8px,3px) rotate(3deg)}to{transform:none}}
@keyframes gx-stamp-down{0%,58%{transform:translateY(-45px) scale(1.6);opacity:0}75%{transform:scale(.92);opacity:1}100%{transform:none;opacity:1}}
@keyframes gx-unseal-l{0%,20%{transform:none}100%{transform:translateX(-74px) rotate(-9deg)}}
@keyframes gx-unseal-r{0%,20%{transform:none}100%{transform:translateX(74px) rotate(9deg)}}
@keyframes gx-unseal-core{0%,25%{transform:none}100%{transform:translateY(63px) scale(.48)}}
@keyframes gx-lock-seat{0%{transform:scale(1.25);opacity:.4}100%{transform:none;opacity:1}}
@keyframes gx-card-in{0%{transform:translateY(-150px) rotate(-5deg)}55%{transform:translateY(31px)}100%{transform:translateY(3px)}}
@keyframes gx-counterfoil{0%,50%{transform:translateX(65px);opacity:0}100%{transform:none;opacity:1}}
@keyframes gx-knot-l{from{transform:translateX(18px) rotate(30deg)}to{transform:translateX(-34px) rotate(-12deg)}}
@keyframes gx-knot-r{from{transform:translateX(-18px) rotate(-30deg)}to{transform:translateX(34px) rotate(12deg)}}
@keyframes gx-search{0%{transform:none}35%{transform:translateY(-55px) rotate(-8deg)}65%{transform:translateY(0) rotate(2deg)}100%{transform:translateY(-15px) rotate(-5deg)}}
@keyframes gx-draw{from{stroke-dashoffset:450}to{stroke-dashoffset:0}}
@keyframes gx-ripple{from{transform:scale(.15);opacity:1}to{transform:scale(1);opacity:.45}}
@keyframes gx-pin-unfold{from{transform:scaleY(.05) rotate(-25deg)}to{transform:none}}
@media(max-width:500px){.jn-graphic-object{height:135px}.jn-graphic-object[data-system="owl"]{height:135px}.jn-graphic-object[data-system="retrieval"]{height:112px}}
/* Static final object states stay visible; real text/data is never part of this layer. */
@media(prefers-reduced-motion:reduce){.jn-graphic-object *{animation:none!important;transition:none!important}}
html[data-graphics-motion="off"] .jn-graphic-object *{animation:none!important;transition:none!important}
/* Brotherhood seals are unfastened working copies, not an official ritual release. */
.jn-graphic-object[data-faction="brotherhood"][data-event="authorized"] .gx-seal-left{transform:translate(-90px,25px) rotate(-22deg)}
.jn-graphic-object[data-faction="brotherhood"][data-event="authorized"] .gx-seal-right{transform:translate(70px,-20px) rotate(14deg)}
.gx-play[data-faction="brotherhood"][data-event="authorized"] .gx-seal-left{animation:gx-unfasten-l 1000ms ease-out both}
.gx-play[data-faction="brotherhood"][data-event="authorized"] .gx-seal-right{animation:gx-unfasten-r 1000ms ease-out both}
.gx-play[data-faction="brotherhood"][data-event="authorized"] .gx-seal-strap{transform-origin:225px 45px;animation:gx-peel-strap 700ms ease-out both}
.jn-graphic-object[data-event="error"] *{animation:none!important}
@keyframes gx-unfasten-l{0%,38%{transform:none}100%{transform:translate(-90px,25px) rotate(-22deg)}}
@keyframes gx-unfasten-r{0%,18%{transform:none}100%{transform:translate(70px,-20px) rotate(14deg)}}
@keyframes gx-peel-strap{0%,20%{transform:none;opacity:1}100%{transform:rotate(-65deg) scaleX(.2);opacity:0}}

/* ADOPTION1: all artwork is fixed over real DOM anchors, never in document flow. */
#jn-graphic-layer{position:fixed;inset:0;z-index:12001;pointer-events:none!important;overflow:clip;contain:strict;isolation:isolate}
#jn-graphic-layer *{pointer-events:none!important}
#jn-graphic-layer .jn-graphic-object{position:absolute;margin:0!important;min-width:0;width:var(--object-w);height:var(--object-h);left:var(--object-x);top:var(--object-y);contain:none;opacity:1}
#jn-graphic-layer .jn-graphic-object svg{width:100%;height:100%;margin:0;max-width:none}
#jn-graphic-layer .jn-graphic-object[data-system="owl"]{width:100vw;height:var(--object-h);left:0;top:var(--object-y)}
#jn-graphic-layer .jn-graphic-object[data-system="owl"] svg{overflow:visible}
.jn-overlay-exit{animation:jn-object-resolve 220ms ease-out forwards}
@keyframes jn-object-resolve{to{opacity:0;transform:translateY(12px) scale(.96)}}
@media(prefers-reduced-motion:reduce){.jn-overlay-exit{animation:none;opacity:0}#jn-graphic-layer *{animation:none!important;transition:none!important}}
html[data-graphics-motion="off"] #jn-graphic-layer *{animation:none!important;transition:none!important}
/* High-contrast static markers; the anchor stays in the map's actual coordinates. */
.map-record .jn-map-marker{fill:#f0e6c7;stroke:#182b30;stroke-width:2;paint-order:stroke fill;filter:drop-shadow(0 1px 1px #000a)}
.map-record .jn-map-center{fill:#8c3533;stroke:#fff4d7;stroke-width:1.5}
.map-record .jn-map-mark{fill:none;stroke:#182b30;stroke-width:1.5}
.map-record .map-hit-target{fill:transparent;pointer-events:all}
.map-record .map-area-pulse,.map-record .map-area-dot,.map-record .map-marker-ring,.map-record .map-marker-core{display:none}
.map-record .map-marker-icon{fill:#fff8dd;paint-order:stroke;stroke:#182b30;stroke-width:1;font-size:9px}
.map-record .map-area-label,.map-record .map-school-label{fill:#fff7df;stroke:#131c23;stroke-width:3;paint-order:stroke;letter-spacing:.04em;font-weight:900}
.map-record:focus{outline:none}.map-record:focus .jn-map-marker,.map-record.jn-map-selected .jn-map-marker{stroke:#fff8db;stroke-width:3;fill:#9e463c}
.map-record:focus .jn-map-mark,.map-record.jn-map-selected .jn-map-mark{stroke:#fff8db}
body[data-network-mode="brotherhood"] .map-record .jn-map-marker{fill:#d4bd80;stroke:#211b15}
body[data-network-mode="brotherhood"] .map-record.jn-map-selected .jn-map-marker{fill:#b46b42;stroke:#fff6dc}
/* Owl coordinates are viewport pixels; it really enters/leaves beyond the page edge. */
#jn-graphic-layer [data-system="owl"] .gx-owl-flight{transform:translate(var(--perch-x),80px) scale(.78)}
#jn-graphic-layer [data-system="owl"] .gx-ground,#jn-graphic-layer [data-system="owl"] .gx-perch{opacity:0}
#jn-graphic-layer [data-system="owl"].gx-play .gx-owl-flight{animation:jn-owl-arrive 1600ms ease-out both}
#jn-graphic-layer [data-event="sent"].gx-play .gx-owl-flight{animation:jn-owl-dispatch 1750ms ease-in both}
#jn-graphic-layer [data-event="sent"] .gx-owl-flight{opacity:0}
#jn-graphic-layer [data-event="letter"] .gx-envelope,#jn-graphic-layer [data-event="compose"] .gx-envelope{transform:translate(var(--letter-x),0)}
#jn-graphic-layer [data-event="letter"].gx-play .gx-envelope{animation:jn-mail-drop 850ms ease-out both}
#jn-graphic-layer [data-event="letter"] .gx-letter-sheet{transform:translate(var(--letter-x),0)}
#jn-graphic-layer [data-event="letter"].gx-play .gx-letter-sheet{animation:jn-letter-unfold 1050ms ease-out both}
#jn-graphic-layer [data-event="sent"].gx-play .gx-envelope{animation:jn-envelope-carry 1750ms ease-in both}
@keyframes jn-owl-arrive{0%{transform:translate(-160px,20px) scale(.85) rotate(-8deg)}55%{transform:translate(calc(var(--perch-x) * .6),25px) scale(.85) rotate(5deg)}100%{transform:translate(var(--perch-x),80px) scale(.78)}}
@keyframes jn-owl-dispatch{0%,20%{transform:translate(var(--perch-x),80px) scale(.78);opacity:1}50%{transform:translate(calc(var(--letter-x) + 296px),60px) scale(.82);opacity:1}100%{transform:translate(var(--page-right),-100px) scale(.8) rotate(-12deg);opacity:0}}
@keyframes jn-envelope-carry{0%,25%{transform:translate(var(--letter-x),0);opacity:1}50%{transform:translate(var(--letter-x),-40px);opacity:1}100%{transform:translate(var(--page-right),-200px);opacity:0}}
@keyframes jn-mail-drop{from{transform:translate(calc(var(--perch-x) - 296px),-70px);opacity:0}to{transform:translate(var(--letter-x),0);opacity:1}}
@keyframes jn-letter-unfold{0%,25%{transform:translate(var(--letter-x),0) scaleY(.05);opacity:0}100%{transform:translate(var(--letter-x),0);opacity:1}}
#jn-graphic-layer [data-system="folder"].gx-play svg,#jn-graphic-layer [data-system="mission"].gx-play svg{animation:jn-record-arrive 500ms ease-out both}
@keyframes jn-record-arrive{from{transform:translate(var(--origin-x,0px),50px) scale(.72);opacity:.4}to{transform:none;opacity:1}}
@media(max-width:520px){#jn-graphic-layer [data-system="owl"] .gx-envelope,#jn-graphic-layer [data-system="owl"] .gx-letter-sheet{scale:.55;transform-origin:296px 155px}/* Compact paper objects retain the fold/carry event on mobile. */}
@media(prefers-reduced-motion:reduce){.map-symbol-visual{transition:none!important}}

/* ANIMFIX1: keep Compose objects above inputs; successful static dispatch retains its envelope. */
#jn-graphic-layer [data-event="compose"] .gx-envelope{transform:translate(var(--letter-x),-65px);scale:.55;transform-origin:296px 155px}
#jn-graphic-layer [data-event="compose"] .gx-owl-body{scale:.77}
#jn-graphic-layer [data-event="sent"]:not(.gx-play) .gx-envelope{opacity:1;transform:translate(var(--letter-x),-35px)}