:root{color-scheme:dark;--bg:#080808;--surface:#121212;--ink:#ededeb;--muted:#a4a4a1;--line:#343434;--accent:#ededeb;--on-accent:#080808;--font:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font)}h1,h2,h3,p,figure{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:5px}h1,h2{font-weight:500;line-height:.95;letter-spacing:-.075em}h1 em,h2 em{font-style:normal}h1{font-size:clamp(3rem,6vw,6.2rem)}h2{font-size:clamp(2.8rem,5vw,5.2rem)}h3{font-weight:400;line-height:1.2}p{color:var(--muted);max-width:58ch}img{max-width:100%}.skip{position:absolute;left:20px;top:-100px;z-index:10;padding:12px;background:var(--ink);color:var(--bg)}.skip:focus{top:10px}[hidden]{display:none!important}.masthead{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:0 3%;min-height:90px;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center}.brand-word{font-size:32px;font-weight:700;letter-spacing:-2.5px;line-height:1}.brand-period{color:inherit}.masthead nav{display:flex;gap:32px}.masthead nav a{font-size:14px;min-height:44px;display:flex;align-items:center;color:var(--muted)}.masthead nav a:hover,.masthead nav [aria-current]{color:var(--ink)}.header-cta{font-size:14px;display:flex;align-items:center;gap:35px;min-height:44px}.micro{font:12px/1.5 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}.section{margin:0 3%;padding:95px 0}.text-link{display:inline-flex;gap:30px;align-items:center;min-height:44px;border-bottom:1px solid #777;font-size:14px}.text-link:hover{border-color:var(--ink)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:45px;min-height:50px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);padding:13px 21px;font-size:14px}.button:hover{background:#cfcfcd}.button:active{background:#aaa}.button>span{font-size:23px}.encounter{isolation:isolate;position:relative;min-height:clamp(620px,calc(100svh - 90px),920px);margin:0 3%;overflow:clip;border-bottom:1px solid var(--line)}.encounter-image{position:absolute;z-index:-1;top:0;right:-3%;height:100%;width:73%;display:flex;justify-content:center;align-items:center}.encounter-image img{display:block;width:100%;height:100%;object-fit:contain;filter:grayscale(1) contrast(1.12) brightness(.9);mask-image:radial-gradient(ellipse 61% 67% at 52% 44%,#000 40%,transparent 87%);transition:filter 300ms ease}.encounter.in-color .encounter-image img{filter:none}.encounter-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 0;font-size:12px;letter-spacing:.035em}.color-control{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:0 2px;border:0;border-bottom:1px solid #555;color:var(--muted);background:none;font-size:12px}.color-control:hover{color:var(--ink)}.color-control[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}.encounter-copy{position:relative;max-width:44%;padding-top:30px;padding-bottom:145px}.encounter h1{font-size:clamp(6.5rem,12.5vw,12rem);line-height:.82;font-weight:500;letter-spacing:-.085em;margin-bottom:35px}.encounter-intro{max-width:30ch}.encounter-intro>p{font-size:15px;line-height:1.6;margin-bottom:23px}.encounter-bottom{position:absolute;bottom:0;left:0;right:0;min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:25px;background:linear-gradient(0deg,#080808 10%,#080808cc 60%,transparent)}.explore-link{font-size:12px;display:flex;align-items:center;gap:30px;min-height:44px}.scene-caption{display:flex;flex-direction:column;gap:3px;margin-left:auto}.scene-caption>span:first-child{font-size:16px}.scene-caption>span:last-child{color:var(--muted);font-size:12px}.scene-controls{display:flex;gap:10px;margin-left:30px}.scene-controls button{background:none;color:var(--ink);border:1px solid var(--line);border-radius:50%;width:46px;height:46px;font-size:20px}.scene-controls button:hover{background:var(--ink);color:var(--bg)}.scene-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.section-heading{display:grid;grid-template-columns:1fr 2fr 1fr;gap:35px;align-items:start;margin-bottom:60px}.section-heading>.text-link{justify-self:end;align-self:end}.section-heading h2{font-size:clamp(2.8rem,4.5vw,4.7rem)}.selected-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5%}.card-image{position:relative;display:block;background:var(--bg)}.card-image img{display:block;object-fit:contain;width:100%;height:auto;aspect-ratio:.85;filter:grayscale(1);transition:filter 200ms ease}.gallery-color .card-image img{filter:none}.image-arrow{position:absolute;right:10px;top:10px;width:32px;height:32px;display:grid;place-items:center;background:#080808;border:1px solid #555;font-size:22px}.card-caption{display:flex;justify-content:space-between;gap:15px;margin-top:23px}.card-caption .micro{display:none}.card-caption h2,.card-caption h3{font:400 19px/1.2 var(--font);letter-spacing:-.03em}.price{font-size:12px;white-space:nowrap;color:var(--muted)}.card-meet{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);margin-top:10px}.card-meet:hover{color:var(--ink)}.presentation-note{font-size:12px;margin-top:30px}.beyond{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.beyond-content{display:grid;grid-template-columns:2fr 1fr;gap:10%;margin-top:45px}.beyond h2{font-size:clamp(3.8rem,7.5vw,7rem)}.beyond-content>div{align-self:end}.beyond-content p{margin-bottom:25px;font-size:16px}.beyond-line{margin-top:65px;padding-top:25px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:12px;letter-spacing:.05em}.contact-row{display:flex;justify-content:space-between;align-items:end;gap:10%;margin-top:40px}.contact h2{font-size:clamp(3.2rem,7vw,7rem)}.contact-row p{font-size:14px;margin-bottom:20px}footer{padding:0 3% 25px;overflow:hidden}.footer-word{font-size:clamp(5rem,25.5vw,30rem);font-weight:700;letter-spacing:-.09em;line-height:.9;border-bottom:1px solid var(--line);padding-bottom:35px;margin-left:-.015em}.footer-top{display:flex;justify-content:space-between;align-items:start;gap:25px;padding:35px 0}.footer-top>.brand{display:none}.footer-top p{font-size:14px}.footer-bottom{display:flex;justify-content:space-between;gap:25px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.footer-bottom a{min-height:44px}.archive{padding-top:25px}.back-link{min-height:44px;display:inline-flex;align-items:center;color:var(--muted);font-size:12px}.archive-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin:40px 0 55px}.archive-heading>.micro{display:none}.archive-heading h1{margin-top:20px;font-size:clamp(3.5rem,7vw,7rem)}.archive-heading p{font-size:14px}.filters{display:flex;align-items:end;gap:25px;padding:25px 0;border-block:1px solid var(--line)}.filters>div{display:grid;gap:8px}.search-field{flex:1}.filters label{font-size:12px;color:var(--muted)}input,select{width:100%;min-height:50px;border:1px solid var(--line);border-radius:0;padding:11px 15px;background:var(--surface);color:var(--ink)}input::placeholder{color:#aaa}.catalog-meta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:20px 0 40px}.catalog-meta>.color-control{order:3}.catalog-meta>span:last-child{font-size:12px;color:var(--muted)}.catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:55px 30px}.catalog-grid .card-caption{flex-wrap:wrap;gap:10px}.catalog-grid .card-caption h2{font-size:18px}.catalog-note{margin-top:40px}.small-note{font-size:12px;color:var(--muted)}.empty{padding:100px 20px;text-align:center}.empty p{margin:25px auto}.detail{padding-top:25px}.detail-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:9%;align-items:start;margin-top:35px}.detail-art{position:sticky;top:25px}.image-button{position:relative;display:block;width:100%;background:none;border:0;padding:0;color:var(--ink)}.image-button img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain}.zoom-note{display:flex;align-items:center;min-height:44px;color:var(--muted);font-size:12px;text-align:left}.detail-art figcaption{color:var(--muted);font-size:12px}.detail-copy{padding-top:15px}.detail h1{font-size:clamp(3rem,5.5vw,5.7rem);margin:25px 0 35px;overflow-wrap:anywhere}.story p{font-size:16px;margin-bottom:20px}.detail-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin:30px 0}dl{margin:35px 0 25px}dl>div{display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding:15px 0;font-size:14px}dt{color:var(--muted)}dd{margin:0}.conversation{display:flex;justify-content:space-between;gap:50px;align-items:center;border-block:1px solid var(--line);padding:50px 0;margin-top:90px}.conversation h2{font-size:clamp(2.4rem,4vw,4rem);margin:25px 0}.conversation p{font-size:14px;max-width:60ch}.conversation>.button{flex-shrink:0}.next-creature{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:35px 0;margin-top:25px}.next-creature>span:nth-child(2){font-size:30px;letter-spacing:-.05em}.next-creature>span:last-child{font-size:30px}dialog{width:min(1000px,94vw);max-height:94vh;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:20px}dialog::backdrop{background:#000e}.dialog-top{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-bottom:15px}.dialog-top h2{font-size:24px;letter-spacing:-.03em}.dialog-top button{background:none;color:var(--ink);border:1px solid var(--line);padding:10px 20px;min-height:44px}dialog>img{display:block;width:100%;height:75vh;object-fit:contain}
@media(min-width:1800px){.section,.masthead,.encounter{max-width:1680px;margin-left:auto;margin-right:auto}}@media(max-width:1000px){.masthead nav{gap:24px}.header-cta{display:none}.encounter-copy{max-width:48%}.encounter h1{font-size:13vw}.encounter-image{width:78%;right:-12%}.selected-grid{gap:25px}.section-heading{grid-template-columns:1fr 2fr}.section-heading>.text-link{grid-column:2;justify-self:start}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card-caption{flex-wrap:wrap}.beyond-content{gap:7%}.conversation{flex-direction:column;align-items:start;gap:30px}.detail-layout{gap:5%}.scene-controls{margin-left:10px}}
@media(max-width:639px){.masthead{min-height:80px;gap:20px;flex-wrap:wrap}.brand-word{font-size:28px}.masthead nav{gap:19px}.masthead nav a{font-size:12px}.section{padding:60px 0}.encounter{min-height:760px}.encounter-top{padding:15px 0;font-size:10px;gap:10px;align-items:start}.color-control{font-size:11px;gap:8px;min-height:44px}.encounter-top>span{max-width:150px;padding-top:12px}.encounter-image{width:120%;height:560px;top:60px;right:-25%}.encounter-image img{object-fit:contain;mask-image:radial-gradient(ellipse 60% 64% at 50% 43%,#000 45%,transparent 90%)}.encounter-copy{max-width:100%;padding:10px 0 125px;pointer-events:none}.encounter h1{font-size:clamp(5.6rem,25vw,9rem);line-height:.84;margin:20px 0 0;max-width:220px;position:relative;z-index:1}.encounter-intro{margin-top:310px;max-width:100%;pointer-events:auto}.encounter-intro>p{max-width:29ch;font-size:14px;margin-bottom:18px}.encounter-bottom{min-height:90px;gap:10px;flex-wrap:wrap;padding:15px 0}.explore-link{display:none}.scene-caption{margin-left:0;max-width:55%}.scene-caption>span:last-child{font-size:10px}.scene-controls{margin-left:auto}.scene-controls button{width:44px;height:44px}.section-heading{display:block;margin-bottom:35px}.section-heading h2{font-size:2.8rem;margin-top:25px}.section-heading>.text-link{margin-top:20px}.selected-grid{grid-template-columns:1fr;gap:40px}.selected .card-image img{max-height:470px;aspect-ratio:auto}.card-caption{flex-wrap:nowrap}.presentation-note{font-size:12px}.beyond-content{display:block;margin-top:30px}.beyond h2{font-size:3.8rem}.beyond-content>div{margin-top:30px}.beyond-line{gap:12px;font-size:10px;margin-top:35px}.contact-row{display:block;margin-top:30px}.contact h2{font-size:3.6rem}.contact-row>div{margin-top:30px}.footer-word{font-size:25vw;padding-bottom:20px}.footer-top{gap:20px;align-items:start;flex-direction:column}.footer-bottom{flex-wrap:wrap;gap:15px}.footer-bottom>span:first-child{width:100%}.archive-heading{display:block;margin:25px 0 35px}.archive-heading h1{font-size:3.2rem}.archive-heading p{margin-top:25px}.filters{flex-wrap:wrap;gap:15px}.filters .search-field{flex-basis:100%}.filters>div:nth-child(2){flex:1;min-width:0}.filters .button{gap:20px}.catalog-meta{gap:10px;align-items:start;flex-direction:column;margin-bottom:30px}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 17px}.catalog-grid .card-caption{display:block}.catalog-grid .card-caption h2{font-size:16px;overflow-wrap:anywhere}.catalog-grid .price{display:block;font-size:12px;margin-top:8px}.catalog-grid .card-meet{font-size:11px}.image-arrow{right:5px;top:5px;width:27px;height:27px;font-size:18px}.detail{padding-top:20px}.detail-layout{display:block;margin-top:25px}.detail-art{position:static}.detail-copy{padding-top:40px}.detail h1{font-size:3.4rem}.conversation{padding:35px 0;margin-top:50px}.conversation>.button{font-size:12px;gap:20px}.next-creature{flex-wrap:wrap}.next-creature>.micro{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Exploratory atlas: no storefront controls. */
.effect-definitions{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.name-index{display:flex;flex-wrap:wrap;column-gap:28px;row-gap:2px;border-block:1px solid var(--line);padding:23px 0;margin:10px 0 25px;scroll-margin-top:20px}
.name-index a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--muted);text-decoration-thickness:1px;text-underline-offset:5px}
.name-index a:hover,.name-index a:focus-visible{color:var(--ink);text-decoration:underline}
.atlas-heading{display:flex;justify-content:space-between;gap:25px;align-items:center;margin:0 0 55px}
.wander-button{color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);padding:5px 0;cursor:pointer}
.atlas-grid{grid-template-columns:1.15fr 1fr;gap:95px 9%;align-items:start}
.atlas-grid .creature-card:nth-child(2n){margin-top:135px}
.atlas-grid .creature-card{scroll-margin-top:30px;min-width:0}
.atlas-grid .card-caption h2{font-size:22px}
.card-image{overflow:hidden;isolation:isolate}
.art-original{display:block;filter:grayscale(1);transform:translateZ(0);transform-origin:50% 35%}
.card-image .art-original img{filter:none;transition:none}
.art-echo{display:block;position:absolute;inset:0;opacity:0;pointer-events:none;transform-origin:50% 35%}
.card-image .art-echo img{width:100%;height:100%;object-fit:contain;aspect-ratio:auto;filter:none;transition:none}
.echo-upper{clip-path:polygon(0 22%,100% 22%,100% 35%,0 35%)}
.echo-lower{clip-path:polygon(0 57%,100% 57%,100% 67%,0 67%)}
.card-image::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#0002 3px 4px);opacity:0}
.card-caption{align-items:baseline}
.card-caption .card-meet{border:0;margin:0;min-height:44px;white-space:nowrap;font-size:12px}
.next-creature{display:none}
.encounter-path{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:35px 0;margin-top:25px;border-bottom:1px solid var(--line)}
.encounter-path a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.encounter-path a:nth-child(2){color:var(--muted);font-size:12px}
@keyframes signal-arrival{0%{transform:scale(1);filter:grayscale(1)}12%{transform:scale(1.035) translateX(-.5%);filter:grayscale(.5) contrast(1.1)}20%{transform:scale(1.13) skewX(-1.5deg);filter:url(#signal-warp) saturate(1.35) contrast(1.12)}31%{transform:scale(1.025) translateX(.5%);filter:saturate(1.2)}43%{transform:scale(1.1) translate(-.5%,.5%);filter:url(#signal-warp) contrast(1.08)}57%{transform:scale(1.035);filter:saturate(1.2)}73%{transform:scale(1.06);filter:saturate(1.1)}100%{transform:scale(1.025);filter:grayscale(0)}}
@keyframes slice-slip{0%,8%{opacity:0;transform:translateX(0) scale(1)}18%{opacity:.6;transform:translateX(12px) scale(1.13);filter:url(#signal-warp) saturate(1.5)}30%{opacity:0;transform:translateX(-8px) scale(1.025)}43%{opacity:.45;transform:translateX(-12px) scale(1.1);filter:url(#signal-warp)}58%,100%{opacity:0;transform:translateX(0) scale(1.025)}}
@media(hover:hover) and (pointer:fine){
.card-image:hover .art-original{animation:signal-arrival 880ms steps(1,end) 1 forwards}
.card-image:hover .art-echo{animation:slice-slip 880ms steps(1,end) 1 forwards}
.card-image:hover .echo-lower{animation-direction:reverse}
.card-image:hover::after{opacity:1}
.card-image:hover img{transform:none}
}
.card-image:focus-visible .art-original{animation:signal-arrival 880ms steps(1,end) 1 forwards}
.card-image:focus-visible .art-echo{animation:slice-slip 880ms steps(1,end) 1 forwards}
.card-image:focus-visible::after{opacity:1}
@media(max-width:1000px){.atlas-grid{gap:65px 6%}.atlas-grid .creature-card:nth-child(2n){margin-top:90px}.card-caption{flex-wrap:wrap;gap:2px}}
@media(max-width:639px){.name-index{column-gap:20px;padding:15px 0}.name-index a{font-size:14px}.atlas-heading{align-items:start;flex-direction:column;gap:15px;margin-bottom:35px}.atlas-grid{grid-template-columns:1fr;gap:45px}.atlas-grid .creature-card:nth-child(2n){margin-top:0}.atlas-grid .card-image img{aspect-ratio:auto;max-height:530px}.atlas-grid .card-image .art-echo img{height:100%;max-height:none}.atlas-grid .card-caption{display:flex;flex-wrap:nowrap;gap:20px}.atlas-grid .card-caption h2{font-size:21px}.encounter-path{flex-wrap:wrap;gap:12px}.encounter-path a:nth-child(2){order:3;width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){
.card-image:hover .art-original,.card-image:focus-visible .art-original{animation:none!important;transform:none;filter:grayscale(0)}
.card-image:hover .art-echo,.card-image:focus-visible .art-echo{animation:none!important;opacity:0}
.card-image:hover::after,.card-image:focus-visible::after{opacity:0}
}

/* Mobile is its own composition: header, heading, artwork, action. */
.mobile-menu{display:none}
@media(max-width:767px){
.masthead{position:relative;min-height:72px;margin:0 5%;flex-wrap:nowrap;gap:20px;z-index:5}
.masthead>.desktop-nav,.header-cta{display:none}
.brand-word{font-size:30px;letter-spacing:-2px}
.mobile-menu{display:block}
.mobile-menu summary{display:flex;align-items:center;justify-content:space-between;gap:25px;list-style:none;min-height:44px;font-size:14px;cursor:pointer}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu summary>span{font-size:22px;font-weight:400}
.mobile-menu[open] summary>span{transform:rotate(45deg)}
.mobile-menu summary:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.masthead .mobile-menu nav{position:absolute;left:0;right:0;top:100%;display:grid;gap:0;padding:12px 0 20px;background:var(--bg);border-bottom:1px solid var(--line);z-index:6}
.masthead .mobile-menu nav a{display:flex;min-height:50px;font-size:18px;border-top:1px solid var(--line)}
.encounter{display:grid;grid-template-columns:minmax(0,1fr);position:relative;min-height:0;overflow:visible;margin:0 5%;padding-bottom:0;isolation:isolate}
.encounter-top{grid-column:1;grid-row:1;padding:13px 0;min-height:60px;gap:20px;align-items:center;font-size:10px}
.encounter-top>span{max-width:170px;padding:0;letter-spacing:.02em}
.encounter-top .color-control{font-size:11px;gap:8px;flex-shrink:0;min-height:44px}
.encounter-copy{display:contents;pointer-events:auto;max-width:none;padding:0}
.encounter h1{grid-column:1;grid-row:2;font-size:clamp(3.5rem,16.5vw,6.2rem);line-height:.95;letter-spacing:-.075em;font-weight:500;max-width:none;position:static;margin:8px 0 23px;z-index:auto}
.encounter h1 .desktop-break{display:none}
.encounter-image{grid-column:1;grid-row:3;position:relative;inset:auto;width:100%;height:clamp(270px,81vw,440px);z-index:auto;display:block;overflow:hidden}
.encounter-image img{width:100%;height:100%;object-fit:contain;object-position:center;mask-image:radial-gradient(ellipse 76% 80% at 50% 46%,#000 58%,transparent 99%)}
.encounter-intro{grid-column:1;grid-row:4;position:static;margin:0;padding:20px 0 22px;max-width:none;pointer-events:auto;display:flex;flex-direction:column;gap:17px}
.encounter-intro>p{margin:0;max-width:37ch;font-size:14px;line-height:1.55}
.encounter-intro>.button{width:100%;justify-content:space-between;min-height:50px}
.encounter-bottom{grid-column:1;grid-row:5;position:static;inset:auto;display:flex;min-height:87px;flex-wrap:nowrap;padding:17px 0;border-top:1px solid var(--line);gap:16px;background:none}
.encounter-bottom .explore-link{display:none}
.scene-caption{margin:0;max-width:58%;min-width:0;gap:2px}
.scene-caption>span:first-child{font-size:16px;overflow-wrap:anywhere}
.scene-caption>span:last-child{font-size:11px}
.scene-controls{margin-left:auto;gap:8px;flex-shrink:0}
.scene-controls button{width:44px;height:44px}
.section{margin-left:5%;margin-right:5%}
.atlas-grid{grid-template-columns:minmax(0,1fr);gap:45px}
.atlas-grid .creature-card:nth-child(2n){margin-top:0}
.detail-layout{display:block}
.detail-art{position:static}
.detail-copy{padding-top:35px}
}
@media(max-width:350px){.encounter-top>span{max-width:130px}.encounter-top .color-control{font-size:10px}.encounter h1{font-size:3.3rem}.scene-caption>span:last-child{font-size:10px}}

.atlas-index{border-block:1px solid var(--line);margin:0 0 25px}
.atlas-index summary{display:flex;justify-content:space-between;align-items:center;list-style:none;min-height:60px;cursor:pointer;font-size:14px}
.atlas-index summary::-webkit-details-marker{display:none}
.atlas-index summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.atlas-index summary>span{font-size:22px}
.atlas-index[open] summary>span{transform:rotate(45deg)}
.atlas-index .name-index{border:0;margin:0;padding:0 0 20px}

/* Hero sequence: a quiet frame, then a brief double exposure. */
.scene-options{display:flex;align-items:center;gap:28px}
.playback-control{min-width:66px}
.playback-control:disabled{color:var(--muted);cursor:default;border-bottom-color:var(--line)}
.encounter-copy{max-width:43%;padding-top:clamp(65px,11vh,150px);padding-bottom:145px}
.encounter h1{font-size:clamp(4.5rem,7.6vw,8.6rem);line-height:.96;letter-spacing:-.075em;margin:0 0 33px;white-space:nowrap}
.encounter-intro{max-width:31ch}
.encounter-intro>p{font-size:16px;line-height:1.6;margin-bottom:28px}
.encounter-intro>.button{background:none;color:var(--ink);border:0;border-bottom:1px solid #777;padding:10px 0;gap:65px;min-height:50px}
.encounter-intro>.button:hover{border-bottom-color:var(--ink)}
.encounter .scene-ghost,.encounter .scene-shard{position:absolute;inset:0;opacity:0;pointer-events:none;object-fit:contain;object-position:center;mix-blend-mode:screen;filter:grayscale(1);transition:none}
.scene-current,.scene-ghost,.scene-shard{transform-origin:54% 39%}
.shard-upper{clip-path:polygon(0 22%,100% 22%,100% 38%,0 38%)}
.shard-lower{clip-path:polygon(0 53%,100% 53%,100% 64%,0 64%)}
.encounter.is-transitioning .scene-current{animation:presence-arrives 1200ms steps(1,end) 1 both}
.encounter.is-transitioning .scene-ghost{animation:presence-remains 1200ms ease-out 1 both}
.encounter.is-transitioning .shard-upper{animation:presence-tear 1050ms steps(1,end) 1 both}
.encounter.is-transitioning .shard-lower{animation:presence-tear 1150ms steps(1,end) 1 reverse both}
@keyframes presence-arrives{0%{transform:scale(1.12) translate(-.8%,.4%) skewX(.8deg)}17%{transform:scale(1.025)}29%{transform:scale(1.085) translate(.5%,-.4%) skewX(-.7deg)}41%{transform:scale(1.015)}58%{transform:scale(1.045) translateX(-.2%)}78%,100%{transform:scale(1)}}
@keyframes presence-remains{0%{opacity:.5;transform:scale(1.03) translateX(-1%)}25%{opacity:.32;transform:scale(1.08) translateX(1.2%)}58%{opacity:.16;transform:scale(1.025) translateX(-.5%)}100%{opacity:0;transform:scale(1)}}
@keyframes presence-tear{0%{opacity:.15;transform:translateX(0) scale(1.1);filter:grayscale(.7)}18%{opacity:.55;transform:translateX(3%) scale(1.13);filter:url(#signal-warp) grayscale(.65)}32%{opacity:.2;transform:translateX(-2%) scale(1.025);filter:grayscale(.7)}46%{opacity:.4;transform:translateX(-3%) scale(1.09);filter:url(#signal-warp) grayscale(.65)}65%,100%{opacity:0;transform:translateX(0) scale(1)}}
@media(min-width:768px) and (max-width:1100px){.encounter-copy{max-width:45%;padding-top:90px}.encounter h1{font-size:7.7vw}.encounter-intro>p{font-size:15px}}
@media(max-width:767px){
.encounter-copy{display:contents;padding:0;max-width:none}
.encounter-top{display:grid;grid-template-columns:minmax(0,1fr);padding:12px 0 8px;gap:0;min-height:0}
.encounter-top>span{max-width:none;font-size:10px;min-height:23px}
.scene-options{justify-content:space-between;gap:20px;min-height:44px}
.encounter-top .color-control{font-size:11px}
.encounter h1{font-size:clamp(3.3rem,16vw,6.2rem);white-space:normal;line-height:.95;margin:8px 0 23px}
.encounter-intro{margin:0;padding:20px 0 22px;max-width:none}
.encounter-intro>p{font-size:14px;line-height:1.55;margin:0}
.encounter-intro>.button{width:100%;min-height:50px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);padding:13px 21px}
.encounter.is-transitioning .scene-current{animation:presence-mobile 1200ms steps(1,end) 1 both}
.encounter.is-transitioning .scene-ghost{animation:presence-remains 1200ms ease-out 1 both}
}
@keyframes presence-mobile{0%{transform:scale(1.065) translateX(-.4%)}24%{transform:scale(1.015)}40%{transform:scale(1.045) translateX(.3%)}65%,100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.encounter.is-transitioning .scene-current{animation:none!important;transform:none}.encounter .scene-ghost,.encounter .scene-shard{display:none!important}}

/* Fixed orientation and edge-to-edge cinematic frame. */
:root{--header-height:90px}
body{padding-top:var(--header-height)}
html{scroll-padding-top:calc(var(--header-height) + 25px)}
.masthead{position:fixed;inset:0 0 auto;min-height:var(--header-height);height:var(--header-height);margin:0;max-width:none;width:100%;padding:0 3%;background:#080808f5;border-bottom:1px solid var(--line);z-index:100;backdrop-filter:blur(12px)}
.skip:focus{position:fixed;z-index:200}
.detail-art{top:calc(var(--header-height) + 25px)}
.encounter{max-width:none;width:100%;margin:0;padding:0 3%;overflow:clip}
.encounter-image{right:0;width:64%;height:100%}
.encounter-image img,.encounter .scene-ghost,.encounter .scene-shard{object-fit:cover;object-position:50% 32%;mask-image:linear-gradient(90deg,transparent 0%,#000 19%,#000 100%)}
.encounter-bottom{left:3%;right:3%}
.encounter h1{position:relative;z-index:1}
.atlas-grid .creature-card{scroll-margin-top:calc(var(--header-height) + 25px)}
.conversation{scroll-margin-top:calc(var(--header-height) + 25px)}
@keyframes presence-arrives{0%{transform:scale(1.27) translate(-1.8%,.8%) skewX(-2.8deg)}13%{transform:scale(1.045) translateX(.6%)}26%{transform:scale(1.18) translate(1.2%,-.6%) skewX(2deg)}39%{transform:scale(1.035) translateX(-.5%)}56%{transform:scale(1.09) skewX(-.7deg)}76%,100%{transform:scale(1)}}
@keyframes presence-remains{0%{opacity:.62;transform:scale(1.14) translateX(-2.5%)}24%{opacity:.38;transform:scale(1.23) translateX(3%)}53%{opacity:.22;transform:scale(1.05) translateX(-1%)}100%{opacity:0;transform:scale(1)}}
@keyframes presence-tear{0%{opacity:.3;transform:translateX(-1%) scale(1.17);filter:grayscale(.8)}16%{opacity:.7;transform:translateX(5%) scale(1.27);filter:url(#signal-rupture) grayscale(.65)}31%{opacity:.14;transform:translateX(-4%) scale(1.06);filter:grayscale(.8)}46%{opacity:.55;transform:translateX(-6%) scale(1.17);filter:url(#signal-rupture) grayscale(.65)}65%,100%{opacity:0;transform:translateX(0) scale(1)}}
/* Detail art has occasional intrusions; the zoom dialog remains untouched. */
.detail-image-stage{position:relative;display:block;isolation:isolate;overflow:hidden}
.detail-original{display:block;transform-origin:50% 32%}
.detail-image-stage .detail-original img{max-height:78vh}
.detail-echo{position:absolute;inset:0;display:block;pointer-events:none;opacity:0;transform-origin:50% 32%;mix-blend-mode:screen}
.detail-echo img{width:100%;height:100%;object-fit:contain;max-height:none}
.detail-echo-upper{clip-path:polygon(0 18%,100% 18%,100% 40%,0 40%)}
.detail-echo-lower{clip-path:polygon(0 54%,100% 54%,100% 70%,0 70%)}
.detail-image-stage.is-haunting .detail-original{animation:detail-intrusion 1050ms steps(1,end) 1 both}
.detail-image-stage.is-haunting .detail-echo{animation:detail-tear 1050ms steps(1,end) 1 both}
.detail-image-stage.is-haunting .detail-echo-lower{animation-direction:reverse}
.detail-art figcaption{display:flex;justify-content:space-between;gap:20px;align-items:center}
@keyframes detail-intrusion{0%{transform:scale(1);filter:none}10%{transform:scale(1.12) translate(-1%,.5%) skewX(1deg);filter:contrast(1.2) saturate(1.3)}22%{transform:scale(1.025) translateX(1%);filter:grayscale(1)}35%{transform:scale(1.22) translate(-1.7%,-.7%) skewX(-3deg);filter:url(#signal-rupture) contrast(1.2)}48%{transform:scale(1.04);filter:grayscale(.4)}64%{transform:scale(1.13) translateX(.7%);filter:url(#signal-warp) saturate(1.4)}82%,100%{transform:scale(1);filter:none}}
@keyframes detail-tear{0%{opacity:0;transform:scale(1)}15%{opacity:.6;transform:translateX(4%) scale(1.13);filter:url(#signal-rupture) saturate(1.6)}30%{opacity:.12;transform:translateX(-2%) scale(1.025)}43%{opacity:.65;transform:translateX(-5%) scale(1.22);filter:url(#signal-rupture) grayscale(.7)}60%,100%{opacity:0;transform:scale(1)}}
@media(max-width:1000px) and (min-width:768px){.encounter-image{right:0;width:65%}}
@media(max-width:767px){
:root{--header-height:72px}
.masthead{margin:0;padding:0 5%;width:100%;height:72px;min-height:72px;position:fixed}
.encounter{margin:0;padding:0 5%;max-width:none;width:100%}
.encounter-image{position:relative;inset:auto;width:calc(100% + 10vw);height:clamp(290px,90vw,460px);margin-left:-5vw}
.encounter-image img,.encounter .scene-ghost,.encounter .scene-shard{object-fit:cover;object-position:50% 27%;mask-image:linear-gradient(180deg,#000 0%,#000 85%,transparent 100%)}
.encounter-bottom{position:static;inset:auto}
.detail-art{position:static}
.detail-image-stage.is-haunting .detail-original{animation:detail-intrusion-mobile 1050ms steps(1,end) 1 both}
.detail-art figcaption{gap:12px;flex-wrap:wrap}
}
@keyframes detail-intrusion-mobile{0%{transform:scale(1);filter:none}18%{transform:scale(1.08) translateX(-.5%);filter:contrast(1.12)}35%{transform:scale(1.13) skewX(-1deg);filter:url(#signal-warp) grayscale(.5)}57%{transform:scale(1.035);filter:saturate(1.2)}80%,100%{transform:scale(1);filter:none}}
@media(prefers-reduced-motion:reduce){.detail-image-stage.is-haunting .detail-original{animation:none!important;transform:none;filter:none}.detail-echo{display:none!important}}

/* Idle movement animates only actual artwork pixels, never captions or layout. */
.art-original img,.detail-original img,.scene-current{transform-origin:50% 35%}
.art-original{overflow:hidden}
.card-image .art-original img{backface-visibility:hidden}
@media(prefers-reduced-motion:reduce){.art-original img,.detail-original img,.scene-current{transform:none!important}}

/* The frame owns layout; transformed pixels cannot expand scrollable overflow. */
html{scrollbar-gutter:stable}
.encounter-image,.card-image,.detail-image-stage{overflow:clip;contain:paint;isolation:isolate;overflow-anchor:none;min-width:0;min-height:0}
.art-original{overflow:clip;overflow-anchor:none}
.encounter-image img,.art-original img,.detail-original,.detail-original img,.art-echo,.detail-echo,.scene-ghost,.scene-shard{overflow-anchor:none}
/* Repeated intrusions are scheduled independently for the active thumbnail. */
@media(hover:hover) and (pointer:fine){
.card-image:hover .art-original{animation:none;filter:grayscale(0);transform:scale(1.025)}
.card-image:hover .art-echo{animation:none}
}
.card-image:focus-visible .art-original{animation:none;filter:grayscale(0);transform:scale(1.025)}
.card-image:focus-visible .art-echo{animation:none}
.card-image.is-distorting .art-original{animation:signal-arrival 880ms steps(1,end) 1 forwards}
.card-image.is-distorting .art-echo{animation:slice-slip 880ms steps(1,end) 1 forwards}
.card-image.is-distorting .echo-lower{animation-direction:reverse}
.character-whisper{position:fixed;z-index:150;width:min(290px,calc(100vw - 28px));padding:19px 21px 22px;border:1px solid #ededeb35;background:rgba(10,10,10,.74);color:#ededeb;backdrop-filter:blur(5px);pointer-events:none;font:14px/1.5 Arial,Helvetica,sans-serif;box-shadow:0 12px 36px #0003;animation:whisper-in 320ms steps(1,end) both;overflow:clip;contain:paint}
.character-whisper[hidden]{display:none}
.character-whisper strong{display:block;font-size:11px;line-height:1.3;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px;font-weight:400}
.character-whisper span{display:block}
.character-whisper::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 4px,#0808080b 4px 5px);pointer-events:none}
.character-whisper.is-leaving{animation:whisper-out 240ms steps(1,end) both}
@keyframes whisper-in{0%{opacity:0;clip-path:inset(45% 0 45%);transform:translateX(-9px) skewX(7deg)}24%{opacity:.8;clip-path:inset(12% 0 29%);transform:translateX(6px) skewX(-4deg)}48%{opacity:.4;clip-path:inset(0 0 14%);transform:translateX(-3px)}70%,100%{opacity:1;clip-path:inset(0);transform:none}}
@keyframes whisper-out{0%{opacity:1;clip-path:inset(0)}30%{opacity:.6;clip-path:inset(17% 0 34%);transform:translateX(8px) skewX(-7deg)}65%{opacity:.3;clip-path:inset(61% 0 12%);transform:translateX(-5px)}100%{opacity:0;clip-path:inset(50% 0);transform:none}}
@media(prefers-reduced-motion:reduce){.character-whisper,.character-whisper.is-leaving{animation:none}.card-image.is-distorting .art-original,.card-image.is-distorting .art-echo{animation:none!important}}

/* A translucent whisper occupies nearby negative space instead of masking the drawing. */
.character-whisper strong{color:#b9b9b4}
.character-whisper .whisper-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.whisper-signal.is-flickering{animation:whisper-flicker 240ms steps(1,end) both}
@keyframes whisper-flicker{0%{opacity:.4;transform:translateX(-1px)}27%{opacity:.82;transform:none}58%{opacity:.28;transform:translateX(2px);filter:blur(.45px)}81%,100%{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.whisper-signal.is-flickering{animation:none}}

/* Replay the original torn-signal entrance for every character, alongside typing. */
.character-whisper{animation:none}
.character-whisper.is-entering{animation:whisper-in 320ms steps(1,end) both}
.character-whisper.is-leaving{animation:whisper-out 240ms steps(1,end) both}
@media(prefers-reduced-motion:reduce){.character-whisper.is-entering,.character-whisper.is-leaving{animation:none}}

/* A delayed, fragmented materialisation rather than an instant tooltip. */
.character-whisper.is-entering{animation:whisper-broken-in 920ms steps(1,end) both}
.character-whisper.is-leaving{animation:whisper-broken-out 420ms steps(1,end) both}
.whisper-shard{display:none;position:absolute;inset:19px 21px 22px;pointer-events:none;color:var(--ink)}
.whisper-shard-0{clip-path:polygon(0 12%,100% 12%,100% 36%,0 36%,0 68%,100% 68%,100% 78%,0 78%)}
.whisper-shard-1{clip-path:polygon(0 39%,100% 39%,100% 57%,0 57%,0 84%,100% 84%,100% 94%,0 94%)}
.character-whisper.is-entering .whisper-shard{display:block;animation:whisper-fragments 920ms steps(1,end) both}
.character-whisper.is-leaving .whisper-shard{display:block;animation:whisper-fragments 420ms steps(1,end) reverse both}
.character-whisper .whisper-shard-1{animation-direction:reverse}
@keyframes whisper-broken-in{
0%{opacity:0;clip-path:inset(49% 0 48%);transform:translateX(-18px) skewX(8deg)}
12%{opacity:.55;clip-path:polygon(0 8%,100% 8%,100% 24%,0 24%,0 61%,100% 61%,100% 70%,0 70%);transform:translateX(13px) skewX(-5deg)}
26%{opacity:.8;clip-path:inset(18% 0 29%);transform:translateX(-8px) skewX(3deg)}
41%{opacity:.5;clip-path:polygon(0 0,100% 0,100% 32%,0 32%,0 45%,100% 45%,100% 83%,0 83%);transform:translateX(7px)}
58%{opacity:.9;clip-path:inset(3% 0 8%);transform:translateX(-3px) skewX(-1deg)}
75%,100%{opacity:1;clip-path:inset(0);transform:none}}
@keyframes whisper-fragments{0%{opacity:0;transform:translateX(-14px)}16%{opacity:.7;transform:translateX(21px) skewX(-4deg);filter:url(#signal-warp)}34%{opacity:.45;transform:translateX(-17px)}53%{opacity:.65;transform:translateX(10px);filter:url(#signal-warp)}72%,100%{opacity:0;transform:none;filter:none}}
@keyframes whisper-broken-out{0%{opacity:1;clip-path:inset(0);transform:none}24%{opacity:.7;clip-path:inset(13% 0 24%);transform:translateX(-8px) skewX(4deg)}49%{opacity:.4;clip-path:polygon(0 12%,100% 12%,100% 29%,0 29%,0 64%,100% 64%,100% 76%,0 76%);transform:translateX(16px)}78%,100%{opacity:0;clip-path:inset(50% 0);transform:translateX(-5px)}}
@media(prefers-reduced-motion:reduce){.character-whisper.is-entering,.character-whisper.is-leaving{animation:none}.character-whisper .whisper-shard{display:none!important}}
/* Small orientation controls preserve the exhibition-like layout. */
.detail-orientation{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:16px}
.detail-orientation .back-link{margin:0;min-height:44px;display:inline-flex;align-items:center}
.detail-orientation nav{display:flex;align-items:center;gap:12px}
.detail-orientation nav a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;font-size:22px}
.detail-orientation nav a:hover{background:var(--ink);color:var(--bg)}
.work-position{font-size:11px;letter-spacing:.07em;color:var(--muted);white-space:nowrap}
.story{max-width:58ch}.story p{line-height:1.75;color:#b7b7b2}
.atlas-index{scroll-margin-top:calc(var(--header-height) + 18px)}
.return-index{position:fixed;bottom:max(22px,env(safe-area-inset-bottom));right:3%;z-index:90;display:flex;align-items:center;gap:28px;min-height:46px;padding:9px 16px;border:1px solid var(--line);background:#080808e8;backdrop-filter:blur(10px);font-size:12px;color:var(--ink)}
.return-index:hover{border-color:var(--ink)}
body:has(dialog[open]){overflow:hidden}
dialog{width:min(1180px,94vw);max-height:92svh;overflow:hidden;padding:18px}
.dialog-top{gap:15px;margin-bottom:12px}.dialog-top h2{overflow-wrap:anywhere;line-height:1.2}
.viewer-controls{display:flex;gap:8px;flex-shrink:0}
.dialog-top button{padding:8px 14px;font-size:12px;white-space:nowrap}
.zoom-surface{height:70svh;overflow:auto;overscroll-behavior:contain;background:#050505;scrollbar-color:#555 #080808;touch-action:pan-x pan-y pinch-zoom}
.zoom-surface>img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
dialog.is-magnified .zoom-surface>img{width:200%;height:200%;object-fit:contain}
.viewer-hint{display:flex;justify-content:space-between;gap:15px;font-size:11px;margin-top:10px;max-width:none;color:var(--muted)}
@media(max-width:767px){
.detail-orientation{gap:8px;padding-bottom:12px}.detail-orientation .back-link{font-size:12px}
.detail-orientation nav{gap:7px}.work-position{font-size:10px}.detail-orientation nav a{width:40px;height:44px;border-radius:0;border:0}
.return-index{right:5%;bottom:max(14px,env(safe-area-inset-bottom))}
dialog{padding:12px;width:96vw;max-height:94svh}.dialog-top{flex-wrap:wrap}.dialog-top h2{font-size:20px;flex:1}.viewer-controls{gap:6px}.dialog-top button{padding:8px 10px}.zoom-surface{height:69svh}
.masthead .mobile-menu nav{padding-inline:5%;max-height:calc(100svh - var(--header-height));overflow-y:auto}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

@media(max-width:479px){.dialog-top h2{flex:0 0 100%;font-size:19px}.viewer-controls{margin-left:auto}.zoom-surface{height:64svh}}

/* Root scroll-padding already reserves the fixed header; avoid counting it twice. */
.atlas-grid .creature-card,.atlas-index,.conversation{scroll-margin-top:0}

/* Each new whisper briefly fractures the existing signal before re-forming. */
.character-whisper.is-switching.is-leaving{animation:whisper-message-tear 420ms steps(1,end) both}
.character-whisper.is-entering .whisper-shard{animation-name:whisper-fragments-deep}
@keyframes whisper-message-tear{0%{opacity:1;clip-path:inset(0);transform:none}18%{opacity:.85;clip-path:polygon(0 0,100% 0,100% 28%,0 28%,0 43%,100% 43%,100% 76%,0 76%);transform:translateX(-12px) skewX(5deg)}42%{opacity:.55;clip-path:inset(14% 0 33%);transform:translateX(18px) skewX(-6deg)}66%{opacity:.3;clip-path:polygon(0 22%,100% 22%,100% 34%,0 34%,0 72%,100% 72%,100% 81%,0 81%);transform:translateX(-9px)}88%,100%{opacity:0;clip-path:inset(50% 0);transform:none}}
@keyframes whisper-fragments-deep{0%{opacity:0;transform:translateX(-18px)}16%{opacity:.75;transform:translateX(29px) skewX(-6deg);filter:url(#signal-warp)}33%{opacity:.5;transform:translateX(-23px) skewX(3deg)}52%{opacity:.7;transform:translateX(16px);filter:url(#signal-rupture)}72%,100%{opacity:0;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.character-whisper.is-switching.is-leaving{animation:none}}
/* More room for the collection and a wider, still cursor-bound whisper. */
.character-whisper{width:min(340px,calc(100vw - 28px))}
.archive.section{max-width:1880px;margin-inline:3%}
.atlas-options{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.archive-heading>p{max-width:43ch;font-size:15px;line-height:1.65}
.gallery-color .art-original{filter:grayscale(0)}
.gallery-color .card-image img{filter:none}
@media(min-width:1500px){
.archive.section{margin-inline:auto;width:94%;max-width:1880px}
.atlas-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:4%;row-gap:75px}
.atlas-grid .creature-card:nth-child(2n){margin-top:0}
.atlas-grid .creature-card:nth-child(3n+2){margin-top:80px}
.atlas-grid .creature-card:nth-child(3n){margin-top:35px}
.atlas-grid .card-caption{align-items:baseline;gap:15px}
.atlas-grid .card-caption h2{font-size:21px}
}
.beyond-content p+p{margin-top:22px}
.encounter-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6%;margin-top:65px;border-top:1px solid var(--line);padding-top:30px}
.encounter-notes p{font-size:14px;line-height:1.7;margin-top:15px}
.contact-details{display:grid;gap:8px;margin-top:25px;font-size:14px}
.contact-details>a{width:fit-content;min-height:35px;display:inline-flex;align-items:center}
.contact-details>a:hover{text-decoration:underline;text-underline-offset:5px}
.contact-details span{color:var(--muted);font-size:12px}.contact-details .source-contact{font-size:12px;color:var(--muted);margin-top:5px}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 25px;border-top:1px solid var(--line);padding:20px 0 5px;font-size:12px;color:var(--muted)}
.footer-legal a,.footer-legal button{display:inline-flex;align-items:center;min-height:44px}
.footer-legal button{border:0;background:none;padding:0;color:inherit;cursor:pointer}
.footer-legal a:hover,.footer-legal button:hover{color:var(--ink)}
.legal-page{max-width:1500px}.legal-heading{margin:45px 0 65px}.legal-heading h1{font-size:clamp(3rem,6vw,6rem);max-width:15ch;line-height:1.03;margin:25px 0}.legal-heading>p{font-size:16px}
.legal-layout{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2.5fr);gap:9%;align-items:start}
.legal-index{position:sticky;top:calc(var(--header-height) + 30px);display:grid;gap:4px;font-size:13px;color:var(--muted)}
.legal-index a{min-height:38px;display:flex;align-items:center}.legal-index a:hover{color:var(--ink)}
.legal-copy{max-width:72ch}.legal-copy section{border-top:1px solid var(--line);padding:30px 0 35px;scroll-margin-top:20px}
.legal-copy h2{font-size:26px;letter-spacing:-.035em;line-height:1.2;margin-bottom:22px}.legal-copy p{font-size:15px;line-height:1.8;max-width:none;margin:18px 0;color:#b7b7b2}.legal-copy a{text-decoration:underline;text-underline-offset:4px;color:var(--ink)}
.legal-copy .policy-date{font-size:12px;color:var(--muted)}
.storage-table{overflow-x:auto}.storage-table table{border-collapse:collapse;width:100%;font-size:13px;line-height:1.6}.storage-table th,.storage-table td{border-bottom:1px solid var(--line);padding:15px 12px 15px 0;text-align:left;vertical-align:top}.storage-table th{font-weight:400;color:var(--ink)}.storage-table td{color:var(--muted)}.storage-table code{font-family:inherit;overflow-wrap:anywhere}
.cookie-whisper{position:fixed;right:3%;bottom:max(22px,env(safe-area-inset-bottom));z-index:180;width:min(420px,94vw);max-height:calc(100svh - var(--header-height) - 35px);overflow:auto;background:#101010f5;border:1px solid #ededeb45;box-shadow:0 15px 60px #0009;padding:24px;isolation:isolate;overscroll-behavior:contain}
.cookie-whisper.is-entering{animation:whisper-broken-in 760ms steps(1,end) both}
.cookie-whisper.is-leaving{animation:whisper-message-tear 420ms steps(1,end) both}
.cookie-whisper h2{font-size:34px;line-height:1;letter-spacing:-.055em;margin:18px 0;position:relative}
.cookie-whisper p{font-size:13px;line-height:1.6;color:#b7b7b2;max-width:none}
.cookie-option{display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.5;border-block:1px solid var(--line);padding:17px 0;margin:18px 0;cursor:pointer}
.cookie-option input{accent-color:#ededeb;width:19px;height:19px;margin:2px 0 0;flex-shrink:0}.cookie-option small{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cookie-actions button{min-height:46px;border:1px solid #ededeb80;background:transparent;color:var(--ink);font-size:12px;padding:10px}
.cookie-actions button:hover{background:var(--ink);color:var(--bg)}
.cookie-links{display:flex;gap:22px;margin-top:13px;font-size:11px;color:var(--muted)}.cookie-links a{min-height:30px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:4px}
.cookie-feedback:empty{display:none}.cookie-whisper .cookie-feedback{font-size:11px;margin-top:12px;color:var(--ink)}
.cookie-noise{position:absolute;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 5px,#ededeb05 5px 6px);clip-path:polygon(0 10%,100% 10%,100% 26%,0 26%,0 64%,100% 64%,100% 79%,0 79%)}
.cookie-whisper.is-entering .cookie-noise{animation:whisper-fragments-deep 920ms steps(1,end) both}
.cookie-notice-open .return-index{visibility:hidden}
.no-script-privacy{padding:20px 3%;font-size:12px}
@media(max-width:767px){
.encounter-notes{grid-template-columns:1fr;gap:25px;margin-top:35px}.contact-details>a{min-height:44px}
.legal-heading{margin:30px 0 40px}.legal-layout{grid-template-columns:1fr;gap:30px}.legal-index{position:static;border-top:1px solid var(--line);padding-top:15px;grid-template-columns:1fr 1fr;gap:8px 18px}.legal-index a{min-height:44px}.legal-copy h2{font-size:24px}.legal-copy section{padding:25px 0}
.cookie-whisper{right:3%;bottom:max(12px,env(safe-area-inset-bottom));width:94%;padding:20px;max-height:72svh}.cookie-whisper h2{font-size:29px}.cookie-whisper>.micro{font-size:10px}
.atlas-options{gap:20px;justify-content:space-between;width:100%}
}
@media(prefers-reduced-motion:reduce){.cookie-whisper.is-entering,.cookie-whisper.is-leaving,.cookie-whisper.is-entering .cookie-noise{animation:none!important}}
/* Rare navigation interference, isolated from layout and hit targets. */
.nav-signal{position:relative;isolation:isolate}
.nav-signal>.nav-echo{font:inherit;position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;opacity:0;color:var(--ink);clip-path:polygon(0 18%,100% 18%,100% 39%,0 39%,0 64%,100% 64%,100% 78%,0 78%)}
.nav-signal.is-flickering{animation:nav-signal-blink 360ms steps(1,end) both}
.nav-signal.is-flickering>.nav-echo{animation:nav-signal-echo 360ms steps(1,end) both}
@keyframes nav-signal-blink{0%{opacity:1}19%{opacity:.45;text-shadow:2px 0 #ededeb55}37%{opacity:.9;text-shadow:-1px 0 #ededeb80}63%{opacity:.6;text-shadow:1px 0 #ededeb55}82%,100%{opacity:1;text-shadow:none}}
@keyframes nav-signal-echo{0%,100%{opacity:0;transform:none}22%{opacity:.65;transform:translateX(4px) skewX(-4deg)}47%{opacity:.35;transform:translateX(-3px)}68%{opacity:.45;transform:translateX(2px)}}
@media(max-width:767px){
.mobile-menu nav{transform-origin:top center;isolation:isolate;overflow:clip}
.mobile-menu.is-opening nav{animation:mobile-signal-in 740ms steps(1,end) both}
.mobile-menu.is-closing nav{animation:mobile-signal-out 420ms steps(1,end) both;pointer-events:none}
.mobile-menu.is-opening nav a{animation:mobile-link-arrives 640ms steps(1,end) both}
.mobile-menu.is-opening nav a:nth-child(2){animation-delay:70ms}
.mobile-menu.is-opening nav a:nth-child(3){animation-delay:130ms}
.mobile-menu nav::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 5px,#ededeb08 5px 6px);opacity:.5;z-index:-1}
.mobile-menu.is-opening nav::after,.mobile-menu.is-closing nav::after{animation:whisper-fragments-deep 740ms steps(1,end) both}
.mobile-menu.is-closing summary>span{transform:none}
}
@keyframes mobile-signal-in{0%{opacity:0;clip-path:inset(48% 0 49%);transform:translateX(-10px) skewX(3deg)}16%{opacity:.6;clip-path:polygon(0 0,100% 0,100% 24%,0 24%,0 52%,100% 52%,100% 70%,0 70%);transform:translateX(8px)}33%{opacity:.85;clip-path:inset(6% 0 24%);transform:translateX(-5px)}51%{opacity:.7;clip-path:polygon(0 0,100% 0,100% 38%,0 38%,0 44%,100% 44%,100% 96%,0 96%);transform:translateX(3px)}74%,100%{opacity:1;clip-path:inset(0);transform:none}}
@keyframes mobile-signal-out{0%{opacity:1;clip-path:inset(0);transform:none}25%{opacity:.75;clip-path:inset(8% 0 20%);transform:translateX(-6px) skewX(-2deg)}49%{opacity:.45;clip-path:polygon(0 10%,100% 10%,100% 30%,0 30%,0 65%,100% 65%,100% 77%,0 77%);transform:translateX(10px)}78%,100%{opacity:0;clip-path:inset(49% 0 50%);transform:none}}
@keyframes mobile-link-arrives{0%{opacity:.2;transform:translateX(-12px);filter:blur(1px)}24%{opacity:.7;transform:translateX(8px)}48%{opacity:.45;transform:translateX(-4px);text-shadow:4px 0 #ededeb60}75%,100%{opacity:1;transform:none;filter:none;text-shadow:none}}
@media(prefers-reduced-motion:reduce){.nav-signal.is-flickering,.nav-signal.is-flickering>.nav-echo,.mobile-menu.is-opening nav,.mobile-menu.is-closing nav,.mobile-menu.is-opening nav a,.mobile-menu.is-opening nav::after,.mobile-menu.is-closing nav::after{animation:none!important}}
/* The collection starts in the first screen; orientation is a compact preface. */
.archive.section{padding-top:22px}
.archive>.back-link{display:inline-flex;align-items:center;min-height:28px;margin:0;font-size:12px}
.archive-heading{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(250px,.8fr);align-items:center;gap:35px;margin:12px 0 22px}
.archive-heading h1{font-size:clamp(38px,4.1vw,66px);line-height:1.02;letter-spacing:-.065em;margin:10px 0 0}
.archive-heading h1 br{display:none}
.archive-heading>p{font-size:13px;line-height:1.65;max-width:43ch;margin:0;justify-self:end}
.archive-controls{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2fr);align-items:start;gap:0 30px;border-block:1px solid var(--line);margin-bottom:24px}
.archive-controls .atlas-index{border:0;margin:0;min-width:0}
.archive-controls .atlas-index summary{min-height:50px;gap:20px;justify-content:flex-start}
.archive-controls .atlas-index[open]{grid-column:1/-1}
.archive-controls .atlas-heading{display:flex;align-items:center;justify-content:flex-end;margin:0;min-height:50px}
.archive-controls .atlas-options{justify-content:flex-end;gap:28px}
.archive-controls .text-link,.archive-controls .color-control{border-bottom:0}
.archive-controls .atlas-index .name-index{padding-top:5px;padding-bottom:18px}
@media(max-width:1000px) and (min-width:768px){.archive-heading{grid-template-columns:1.3fr 1fr;gap:25px}.archive-heading h1{font-size:44px}}
@media(max-width:767px){
.archive.section{padding-top:14px}
.archive-heading{display:block;margin:8px 0 16px}
.archive-heading .micro{font-size:10px}
.archive-heading h1{font-size:clamp(31px,8.5vw,43px);margin-top:7px;max-width:none;line-height:1.04}
.archive-heading>p{font-size:12px;line-height:1.55;margin-top:10px;max-width:49ch}
.archive-controls{grid-template-columns:minmax(0,1fr) auto auto;column-gap:12px;margin-bottom:18px;align-items:center}
.archive-controls .atlas-heading,.archive-controls .atlas-options{display:contents}
.archive-controls .atlas-index summary{font-size:11px;gap:8px;min-height:48px;justify-content:space-between}
.archive-controls .atlas-index summary>span{font-size:17px}
.archive-controls .color-control{font-size:10px;gap:5px;justify-self:end}
.archive-controls .wander-button{font-size:11px;gap:9px;justify-self:end;white-space:nowrap}
.archive-controls:has(.atlas-index[open]){grid-template-columns:1fr 1fr}
.archive-controls:has(.atlas-index[open]) .color-control{justify-self:start}
}
@media(max-width:359px){.archive-controls{grid-template-columns:1fr 1fr}.archive-controls .atlas-index{grid-column:1/-1}.archive-controls .color-control{justify-self:start}}
/* The first row is visible together; later rows keep their irregular rhythm. */
.atlas-grid>.creature-card:nth-child(-n+2){margin-top:0}
@media(min-width:1500px){.atlas-grid>.creature-card:nth-child(-n+3){margin-top:0}}
/* The closing word is graphite: broken ink, with a few letters left as outlines. */
.footer-word{color:#777772;position:relative;overflow:clip;contain:paint;isolation:isolate}
.footer-glyph{display:inline-block;position:relative;vertical-align:baseline;-webkit-text-stroke:1px transparent}
.footer-glyph.is-outline{-webkit-text-fill-color:transparent;-webkit-text-stroke:1.25px #85857d}
.footer-glyph::before,.footer-glyph::after{content:attr(data-letter);position:absolute;inset:0;pointer-events:none;opacity:0;color:#a4a49a;-webkit-text-fill-color:currentColor;-webkit-text-stroke:0}
.footer-glyph::before{clip-path:polygon(0 16%,100% 16%,100% 31%,0 31%,0 63%,100% 63%,100% 73%,0 73%)}
.footer-glyph::after{clip-path:polygon(0 37%,100% 37%,100% 49%,0 49%,0 81%,100% 81%,100% 88%,0 88%)}
.footer-word.is-fracturing .footer-glyph{animation:footer-ink 760ms steps(1,end) both}
.footer-word.is-fracturing .footer-glyph::before{animation:footer-tear 760ms steps(1,end) both}
.footer-word.is-fracturing .footer-glyph::after{animation:footer-tear 760ms steps(1,end) reverse both}
.footer-word.is-fracturing .footer-glyph:nth-child(2n){animation-direction:reverse}
@keyframes footer-ink{0%,100%{opacity:1}14%{opacity:.45}30%{opacity:.85}47%{opacity:.6}69%{opacity:.9}}
@keyframes footer-tear{0%,100%{opacity:0;transform:none}15%{opacity:.65;transform:translateX(var(--glyph-shift,10px)) skewX(-3deg)}31%{opacity:.3;transform:translateX(calc(var(--glyph-shift,10px)*-1))}49%{opacity:.55;transform:translateX(var(--glyph-shift,10px)) skewX(2deg)}70%{opacity:0;transform:none}}
/* A clearer, still quiet top-level navigation. */
.masthead{border-bottom-color:#ededeb2b}
.masthead .desktop-nav{gap:36px}
.masthead .desktop-nav>a{font-size:15px;font-weight:500;color:#c6c6c0;min-height:48px;padding:0 2px;border-bottom:1px solid transparent}
.masthead .desktop-nav>a:hover,.masthead .desktop-nav>a:focus-visible{color:var(--ink);border-bottom-color:#b7b7b0}
.masthead .desktop-nav>a[aria-current="page"]{color:var(--ink);border-bottom-color:#a4a49a}
.masthead .header-cta{font-size:14px;color:#d0d0c9}
.mobile-menu summary{color:#ededeb;letter-spacing:.015em;font-weight:500}
.masthead .mobile-menu nav a{color:#cecec7}
.masthead .mobile-menu nav a[aria-current="page"]{color:var(--ink)}
@media(max-width:767px){.footer-glyph.is-outline{-webkit-text-stroke:1px #85857d}.masthead .mobile-menu summary{border:1px solid #ededeb35;padding:0 12px;gap:20px;min-height:42px}.masthead .mobile-menu[open] summary{border-color:#85857d}}
@media(prefers-reduced-motion:reduce){.footer-word.is-fracturing .footer-glyph,.footer-word.is-fracturing .footer-glyph::before,.footer-word.is-fracturing .footer-glyph::after{animation:none!important}}
/* Larger cyclic ruptures: graphite doubles shear away, then leave hollow glyphs. */
.footer-word{--footer-motion:1}
.footer-glyph{--glyph-ink:#777772;--glyph-stroke:transparent}
.footer-glyph.is-outline{--glyph-ink:transparent;--glyph-stroke:#85857d}
.footer-word.is-fracturing .footer-glyph{animation:footer-ink-rupture 1100ms steps(1,end) both}
.footer-word.is-fracturing .footer-glyph::before{animation:footer-deep-tear 1100ms steps(1,end) both}
.footer-word.is-fracturing .footer-glyph::after{animation:footer-deep-tear 1100ms steps(1,end) reverse both}
.footer-word.is-fracturing[data-variant="drag"] .footer-glyph::before{clip-path:polygon(0 4%,100% 4%,100% 24%,0 24%,0 48%,100% 48%,100% 79%,0 79%)}
.footer-word.is-fracturing[data-variant="rupture"] .footer-glyph::after{clip-path:polygon(0 11%,100% 11%,100% 37%,0 37%,0 67%,100% 67%,100% 94%,0 94%)}
.footer-word.is-fracturing[data-variant="split"] .footer-glyph:nth-child(2n)::before{animation-direction:reverse}
@keyframes footer-ink-rupture{
0%,100%{opacity:1;transform:none;-webkit-text-fill-color:var(--glyph-ink);-webkit-text-stroke:1.25px var(--glyph-stroke)}
12%{opacity:.7;transform:translateX(-2px) skewX(-2deg);-webkit-text-fill-color:transparent;-webkit-text-stroke:1.25px #85857d}
27%{opacity:.9;transform:translateX(2px);-webkit-text-fill-color:var(--glyph-ink)}
43%{opacity:.6;transform:skewX(2deg);-webkit-text-fill-color:transparent;-webkit-text-stroke:1.25px #85857d}
62%{opacity:.85;transform:translateX(-1px);-webkit-text-fill-color:#646460}
80%{opacity:1;transform:none;-webkit-text-fill-color:var(--glyph-ink);-webkit-text-stroke:1.25px var(--glyph-stroke)}}
@keyframes footer-deep-tear{
0%,100%{opacity:0;transform:none}
10%{opacity:.65;transform:translate(calc(var(--glyph-shift)*var(--footer-motion)),-3px) skewX(-7deg) scaleX(1.035)}
24%{opacity:.35;transform:translateX(calc(var(--glyph-shift)*var(--footer-motion)*-.65)) skewX(4deg)}
39%{opacity:.7;transform:translate(calc(var(--glyph-shift)*var(--footer-motion)*1.1),2px) skewX(-5deg)}
55%{opacity:.45;transform:translateX(calc(var(--glyph-shift)*var(--footer-motion)*-.8)) scaleX(1.06)}
72%{opacity:.2;transform:translateX(calc(var(--glyph-shift)*var(--footer-motion)*.3))}
87%{opacity:0;transform:none}}
@media(max-width:767px){.footer-word{--footer-motion:.38}}
@media(prefers-reduced-motion:reduce){.footer-word.is-fracturing .footer-glyph,.footer-word.is-fracturing .footer-glyph::before,.footer-word.is-fracturing .footer-glyph::after{animation:none!important}}
/* A soft, unstable signal: echoes dissolve while the resting word stays legible. */
.footer-glyph::before,.footer-glyph::after{filter:blur(2.4px)}
.footer-word.is-fracturing .footer-glyph{filter:blur(.8px)}
.footer-word.is-fracturing[data-variant="drag"] .footer-glyph{filter:blur(1.25px)}
.footer-word.is-fracturing[data-variant="rupture"] .footer-glyph::after{filter:blur(3.6px)}
@media(max-width:767px){.footer-glyph::before,.footer-glyph::after{filter:blur(1.4px)}.footer-word.is-fracturing .footer-glyph{filter:blur(.55px)}.footer-word.is-fracturing[data-variant="drag"] .footer-glyph{filter:blur(.8px)}.footer-word.is-fracturing[data-variant="rupture"] .footer-glyph::after{filter:blur(2.2px)}}
@media(prefers-reduced-motion:reduce){.footer-word.is-fracturing .footer-glyph{filter:none}}
/* The quiet state is softly out of focus; some bursts remain frozen mid-tear. */
.footer-glyph{filter:blur(.7px)}
.footer-word.is-held .footer-glyph,.footer-word.is-held .footer-glyph::before,.footer-word.is-held .footer-glyph::after{animation-play-state:paused!important}
@media(max-width:767px){.footer-glyph{filter:blur(.45px)}}
/* Paired hero fragments share a fixed text footprint, including during typing. */
.encounter [data-hero-title]{min-height:1em;position:relative;isolation:isolate}
[data-hero-title] .hero-copy-live{display:block}
.encounter [data-hero-message]{display:grid;position:relative;isolation:isolate}
[data-hero-message] .hero-copy-live,[data-hero-message] .hero-copy-sizer{grid-area:1/1;display:block}
.hero-copy-sizer{visibility:hidden;pointer-events:none;user-select:none}
.hero-copy-accessible{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-copy-ghost{position:absolute;inset:0;pointer-events:none;opacity:0;display:block;color:inherit}
.hero-ghost-upper{clip-path:polygon(0 12%,100% 12%,100% 38%,0 38%,0 65%,100% 65%,100% 78%,0 78%)}
.hero-ghost-lower{clip-path:polygon(0 41%,100% 41%,100% 56%,0 56%,0 84%,100% 84%,100% 96%,0 96%)}
.encounter.is-copy-out [data-hero-title] .hero-copy-live,.encounter.is-copy-out [data-hero-message] .hero-copy-live{animation:hero-words-leave 420ms steps(1,end) both}
.encounter.is-copy-in [data-hero-title] .hero-copy-live,.encounter.is-copy-in [data-hero-message] .hero-copy-live{animation:hero-words-arrive 920ms steps(1,end) both}
.encounter.is-copy-in .hero-copy-ghost,.encounter.is-copy-out .hero-copy-ghost{animation:hero-word-echo 920ms steps(1,end) both}
.encounter.is-copy-out .hero-copy-ghost{animation-duration:420ms}
.encounter.is-copy-in .hero-ghost-lower,.encounter.is-copy-out .hero-ghost-lower{animation-direction:reverse}
@keyframes hero-words-leave{0%{opacity:1;transform:none;filter:none}22%{opacity:.8;transform:translateX(-5px) skewX(-2deg);filter:blur(.8px)}48%{opacity:.45;clip-path:inset(15% 0 26%);transform:translateX(8px);filter:blur(1.4px)}76%,100%{opacity:0;clip-path:inset(48% 0 49%);transform:translateX(-3px);filter:blur(2px)}}
@keyframes hero-words-arrive{0%{opacity:.15;transform:translateX(-9px) skewX(3deg);filter:blur(2px)}19%{opacity:.55;clip-path:inset(14% 0 31%);transform:translateX(6px);filter:blur(.8px)}39%{opacity:.8;clip-path:inset(0 0 10%);transform:translateX(-4px) skewX(-1deg);filter:blur(.6px)}61%{opacity:.9;transform:translateX(2px);filter:blur(.3px)}82%,100%{opacity:1;clip-path:inset(0);transform:none;filter:none}}
@keyframes hero-word-echo{0%,100%{opacity:0;transform:none;filter:none}14%{opacity:.42;transform:translateX(15px) skewX(-3deg);filter:blur(1.6px)}33%{opacity:.22;transform:translateX(-11px);filter:blur(2px)}54%{opacity:.3;transform:translateX(7px) skewX(2deg);filter:blur(.8px)}77%{opacity:0;transform:none}}
@media(max-width:767px){.encounter [data-hero-title]{font-size:clamp(2.6rem,14.2vw,5.6rem);white-space:nowrap}.encounter [data-hero-message]{max-width:none}}
@media(prefers-reduced-motion:reduce){.encounter.is-copy-in .hero-copy-live,.encounter.is-copy-out .hero-copy-live,.encounter .hero-copy-ghost{animation:none!important}.encounter .hero-copy-ghost{display:none}}

/* Opaque, low-resolution photographic prints; existing drift and ruptures stay intact. */
.encounter .encounter-image .scene-current{opacity:1;filter:grayscale(1) contrast(1.14) brightness(.94)}
.encounter.in-color .encounter-image .scene-current{filter:saturate(.72) contrast(1.14) brightness(.94)}
.encounter .encounter-image img{image-rendering:pixelated}
.encounter-image::before,.encounter-image::after{content:"";position:absolute;inset:0;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 19%);z-index:2}
.encounter-image::before{background:url('/assets/hero/damaged-paper.svg') center/cover;opacity:.48;mix-blend-mode:soft-light}
.encounter-image::after{background:radial-gradient(ellipse at 62% 22%,#c6c0b02b,transparent 44%),radial-gradient(ellipse at 90% 77%,#0008,transparent 48%),url('/assets/hero/damaged-film.svg') center/cover;opacity:.5;mix-blend-mode:luminosity}
@media(max-width:767px){.encounter-image::before,.encounter-image::after{mask-image:linear-gradient(#000 82%,transparent)}}

/* Display pixel size in CSS pixels; canvas sampling reads this value. */
.encounter-image{--hero-pixel-size:10}

/* Character memories: a torn arrival, then an undisturbed reading surface. */
.character-life{border-top:1px solid #ededeb26;margin-top:clamp(48px,7vw,110px);padding-top:clamp(28px,4vw,60px);scroll-margin-top:115px}
.life-heading{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:32px}
.life-heading h2{font-size:clamp(2rem,4.4vw,4.6rem);letter-spacing:-.065em;font-weight:400;line-height:1.05;margin:15px 0 0}
.life-heading>p{font-size:14px;line-height:1.7;color:#aaa9a4;max-width:340px;margin:0}
.life-chapter{border-top:1px solid #ededeb26}
.life-chapter:last-child{border-bottom:1px solid #ededeb26}
.life-chapter summary{display:grid;grid-template-columns:minmax(115px,23%) 1fr 28px;align-items:center;gap:20px;min-height:88px;padding:20px 0;cursor:pointer;list-style:none}
.life-chapter summary::-webkit-details-marker{display:none}
.life-chapter summary:focus-visible{outline:1px solid #d3d3c9;outline-offset:6px}
.life-chapter summary:hover .memory-name{color:#fff}
.memory-age{font-size:10px;letter-spacing:.1em;color:#93938c}
.memory-name{font-size:clamp(19px,2.1vw,29px);letter-spacing:-.035em;color:#d3d3ca}
.memory-toggle{font-size:24px;justify-self:end;font-weight:400;transition:transform .25s}
.life-chapter[open] .memory-toggle{transform:rotate(45deg)}
.memory-body{padding:0 6% 32px 23%;padding-left:calc(23% + 15px);overflow:clip}
.memory-text{position:relative;max-width:66ch;font-size:clamp(17px,1.35vw,20px);line-height:1.8;color:#c4c4ba;margin:0;isolation:isolate}
.life-chapter[open] .memory-text{animation:whisper-broken-in 920ms steps(1,end) both}
.memory-echo{position:absolute;inset:0;opacity:0;pointer-events:none;clip-path:polygon(0 14%,100% 14%,100% 27%,0 27%,0 60%,100% 60%,100% 76%,0 76%);color:#ededeb}
.life-chapter[open] .memory-echo{animation:whisper-fragments-deep 920ms steps(1,end) both}
.life-chapter.is-memory-leaving .memory-text{animation:whisper-message-tear 420ms steps(1,end) both}
.life-jump{display:inline-flex;gap:30px;margin:12px 0 20px}
@media(max-width:767px){.character-life{scroll-margin-top:92px}.life-heading{display:block;margin-bottom:24px}.life-heading>p{margin-top:18px;font-size:13px}.life-chapter summary{grid-template-columns:1fr 24px;gap:8px;min-height:96px;padding:20px 0}.memory-age{grid-column:1}.memory-name{grid-column:1;grid-row:2}.memory-toggle{grid-column:2;grid-row:1/3}.memory-body{padding:0 0 28px}.memory-text{font-size:17px;line-height:1.8}}
@media(prefers-reduced-motion:reduce){.life-chapter[open] .memory-text,.life-chapter[open] .memory-echo{animation:none!important}.memory-echo{display:none}.memory-toggle{transition:none}}

/* Eroded detail print: frame stays still while its inner artwork moves. */
.detail-image-stage{width:fit-content;max-width:100%;margin-inline:auto;mask-image:url('/assets/eroded-photo-edge.svg');mask-size:100% 100%;mask-repeat:no-repeat;mask-mode:alpha}
.detail-image-stage .detail-original img{width:auto;max-width:100%;height:auto}

/* Same uneven print silhouette in the collection; link focus and arrow stay outside. */
.art-print{position:relative;display:block;width:fit-content;max-width:100%;margin-inline:auto;overflow:clip;contain:paint;mask-image:url('/assets/eroded-photo-edge.svg');mask-size:100% 100%;mask-repeat:no-repeat;mask-mode:alpha}
.art-print .art-original img{width:auto;max-width:100%}

/* Local alternative: a photographic apparition, with intact detail and a faint second exposure. */
.encounter-image{background:radial-gradient(ellipse at 73% 47%,#161615 0,transparent 68%)}
.encounter .encounter-image img{image-rendering:auto;object-fit:contain;object-position:76% 48%;mask-image:radial-gradient(ellipse 72% 78% at 66% 46%,#000 38%,#000c 62%,transparent 93%)}
.encounter .encounter-image .scene-current{opacity:1;filter:grayscale(1) contrast(1.2) brightness(.82)}
.encounter.in-color .encounter-image .scene-current{filter:saturate(.7) contrast(1.13) brightness(.85)}
.encounter .encounter-image .scene-afterimage{position:absolute;inset:0;pointer-events:none;opacity:.13;mix-blend-mode:screen;transform:translate(15px,3px) scale(1.025);filter:grayscale(1) contrast(1.65) blur(2px);mask-image:linear-gradient(100deg,transparent 29%,#0007 47%,transparent 54%,#000 67%,transparent 92%)}
.encounter-image::before{background:url('/assets/hero/damaged-film.svg') center/cover;opacity:.24;mix-blend-mode:soft-light}
.encounter-image::after{background:radial-gradient(ellipse at 71% 37%,transparent 29%,#0808085c 66%,#080808 100%),linear-gradient(90deg,#080808 0,transparent 30%);opacity:1;mix-blend-mode:normal}
.encounter.is-transitioning .scene-afterimage{opacity:0}
@media(max-width:767px){.encounter .encounter-image img{object-position:50% 40%;mask-image:linear-gradient(#000 80%,transparent)}.encounter .encounter-image .scene-afterimage{transform:translate(8px,2px) scale(1.025);mask-image:linear-gradient(110deg,transparent 22%,#000 51%,transparent 84%)}.encounter-image::after{background:linear-gradient(0deg,#080808,transparent 24%,transparent 82%,#08080866)}}
@media(prefers-reduced-motion:reduce){.encounter .encounter-image .scene-afterimage{display:none}}

/* Mobile keeps the atmosphere without an extra full-frame filtered exposure. */
@media(max-width:767px){.encounter .encounter-image .scene-afterimage{display:none}.scene-controls button,.encounter-path a{min-width:44px;min-height:44px}}
.zoom-surface [data-viewer-image]:not([src]){min-height:35vh}

.detail-art figcaption{min-height:52px}

/* Image-only apparition: the page blurs behind a fragmented, unframed original. */
dialog.art-viewer{position:fixed;inset:0;width:100vw;max-width:none;height:100svh;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:var(--ink)}
.art-viewer::backdrop{background:#03030396;backdrop-filter:blur(18px) saturate(.35);-webkit-backdrop-filter:blur(18px) saturate(.35)}
.viewer-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.art-viewer .zoom-surface{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:auto;background:none;padding:6svh 5vw;scrollbar-width:thin;scrollbar-color:#666 transparent;overscroll-behavior:contain}
.art-viewer .viewer-stage{--viewer-ratio:.9;position:relative;display:block;flex:none;width:min(90vw,calc(84svh * var(--viewer-ratio)));aspect-ratio:var(--viewer-ratio);padding:0;margin:0;border:0;background:none;color:inherit;cursor:zoom-in;isolation:isolate}
.art-viewer .viewer-stage>img,.art-viewer .viewer-fragment img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;mask-image:none;filter:none}
.art-viewer .viewer-stage:focus-visible{outline:1px solid #ededeb70;outline-offset:8px}
.art-viewer .viewer-close{position:fixed;right:max(16px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));z-index:5;width:44px;height:44px;border:0;background:#08080870;color:#deded4;font:30px/1 Arial;cursor:pointer}
.art-viewer.is-magnified .zoom-surface{display:block;padding:6svh 5vw}
.art-viewer.is-magnified .viewer-stage{width:min(180vw,calc(168svh * var(--viewer-ratio)));cursor:zoom-out}
.viewer-pieces,.viewer-fragment{position:absolute;inset:0;pointer-events:none}
.viewer-fragment{opacity:0;will-change:transform,opacity;animation:viewer-assemble 1050ms steps(1,end) both}
.art-viewer.is-assembling .viewer-stage>img{animation:viewer-materialize 1120ms steps(1,end) both}
.art-viewer.is-dissolving .viewer-stage{animation:viewer-disappear 440ms steps(1,end) both;pointer-events:none}
@keyframes viewer-assemble{0%{opacity:0;transform:translate(var(--piece-x),var(--piece-y)) skewX(var(--piece-skew)) scale(1.13);filter:contrast(1.6) blur(3px)}14%{opacity:.8;filter:contrast(1.4) blur(.8px)}29%{opacity:.18;transform:translate(calc(var(--piece-x)*-.3),calc(var(--piece-y)*.5)) skewX(-2deg)}47%{opacity:.95;transform:translate(calc(var(--piece-x)*.25),-3px);filter:contrast(1.25)}68%{opacity:.55;transform:translate(-3px,1px);filter:blur(.6px)}82%{opacity:1;transform:none;filter:none}94%,100%{opacity:0;transform:none;filter:none}}
@keyframes viewer-materialize{0%,20%{opacity:0;filter:blur(2px)}39%{opacity:.18;clip-path:inset(13% 0 32%)}56%{opacity:.55;clip-path:inset(0);filter:contrast(1.3) blur(.8px)}72%{opacity:.35;filter:blur(1.2px)}90%,100%{opacity:1;clip-path:none;filter:none}}
@keyframes viewer-disappear{0%{opacity:1;transform:none}24%{opacity:.7;transform:translateX(-9px) skewX(2deg);clip-path:inset(9% 0 24%)}55%{opacity:.4;transform:translateX(14px);filter:blur(2px);clip-path:polygon(0 15%,100% 15%,100% 31%,0 31%,0 64%,100% 64%,100% 80%,0 80%)}100%{opacity:0;transform:translateX(-5px);filter:blur(4px)}}
/* Independent quiet intrusions: two brief colour returns inside a 900ms burst. */
.card-image{--ambient-grey:1}.gallery-color .card-image{--ambient-grey:0}
.card-image.is-ambient .art-original{animation:ambient-colour 900ms steps(1,end) both}
.card-image.is-ambient .art-echo{animation:ambient-trace 900ms steps(1,end) both}
.card-image.is-ambient .echo-lower{animation-direction:reverse}
@keyframes ambient-colour{0%,100%{filter:grayscale(var(--ambient-grey));opacity:1;transform:none}14%{filter:grayscale(0) contrast(1.2);opacity:.68;transform:translateX(-2px)}23%{filter:grayscale(0);opacity:1;transform:none}37%{filter:grayscale(var(--ambient-grey));opacity:1}61%{filter:grayscale(0) contrast(1.15);opacity:.8;transform:translateX(2px)}73%{filter:grayscale(0);opacity:1;transform:none}85%{filter:grayscale(var(--ambient-grey));opacity:1}}
@keyframes ambient-trace{0%,100%{opacity:0;transform:none}15%,23%{opacity:.3;transform:translateX(7px)}38%{opacity:0}62%,72%{opacity:.24;transform:translateX(-9px)}86%{opacity:0;transform:none}}
@media(max-width:767px){.art-viewer::backdrop{backdrop-filter:blur(12px) saturate(.35);-webkit-backdrop-filter:blur(12px) saturate(.35)}.art-viewer .viewer-stage{width:min(94vw,calc(82svh * var(--viewer-ratio)))}.art-viewer .zoom-surface{padding:7svh 3vw}.art-viewer.is-magnified .viewer-stage{width:min(188vw,calc(164svh * var(--viewer-ratio)))}}
@media(prefers-reduced-motion:reduce){.viewer-fragment{display:none}.art-viewer.is-assembling .viewer-stage>img,.art-viewer.is-dissolving .viewer-stage,.card-image.is-ambient .art-original,.card-image.is-ambient .art-echo{animation:none!important}}

.art-viewer:not(.is-magnified) .zoom-surface{overflow:hidden}

/* Seamless photographic edges: feather the print itself, not its letterbox. */
.encounter-image{background:#080808}
.encounter .encounter-image img{width:auto;height:100%;max-width:none;object-fit:contain;object-position:center;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 82%,transparent),linear-gradient(0deg,transparent,#000 12%,#000 89%,transparent);mask-composite:intersect}
.encounter .encounter-image .scene-current{mix-blend-mode:lighten;flex:none}
.encounter .encounter-image .scene-afterimage,.encounter .encounter-image .scene-ghost,.encounter .encounter-image .scene-shard{margin:auto}
.encounter .encounter-image .scene-afterimage{mask-image:linear-gradient(90deg,transparent,#0008 25%,#0006 70%,transparent),linear-gradient(0deg,transparent,#000 18%,#000 80%,transparent);mask-composite:intersect;opacity:.09}
.encounter-image::before{mask-image:radial-gradient(ellipse at 65% 48%,#000 15%,transparent 72%);opacity:.18}
.encounter-image::after{mask-image:none;background:linear-gradient(90deg,#080808,transparent 27%,transparent 90%,#080808),linear-gradient(0deg,#080808,transparent 20%,transparent 90%,#080808)}
.encounter.is-transitioning .scene-current,.encounter.is-transitioning .scene-ghost,.encounter.is-transitioning .scene-shard,.encounter.is-transitioning .encounter-image::before,.encounter.is-transitioning .encounter-image::after{animation-duration:760ms}
.encounter.is-copy-out [data-hero-title] .hero-copy-live,.encounter.is-copy-out [data-hero-message] .hero-copy-live,.encounter.is-copy-out .hero-copy-ghost{animation-duration:240ms}
.encounter.is-copy-in [data-hero-title] .hero-copy-live,.encounter.is-copy-in [data-hero-message] .hero-copy-live,.encounter.is-copy-in .hero-copy-ghost{animation-duration:620ms}
@media(min-width:768px){.encounter-copy{max-width:46%;padding-top:clamp(52px,8vh,100px);padding-bottom:125px}.encounter h1{font-size:clamp(4.1rem,7.1vw,8rem);letter-spacing:-.07em;line-height:1;margin-bottom:26px}.encounter-intro{max-width:35ch}.encounter-intro>p{font-size:clamp(15px,1.05vw,18px);line-height:1.65;margin-bottom:22px}.encounter-intro .button{min-width:225px}.encounter-image{justify-content:flex-end}}
@media(max-width:767px){.encounter .encounter-image img{max-width:none;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(0deg,transparent,#000 14%,#000 91%,transparent);mask-composite:intersect}.encounter-image::after{background:linear-gradient(0deg,#080808,transparent 23%,transparent 86%,#080808)}.encounter-intro{padding-top:12px}.encounter-intro>p{margin-bottom:16px}}