/* Round 41: shared paper backdrop, native-video edge feather, full catalog explorer. */
html,body{background:#f6f5ef;overflow-x:clip}
body[data-state=home] .scene{isolation:auto;overflow:visible;clip-path:none;background:transparent}
body[data-state=home] .scene:before{inset:0 0 -190px;background-size:100% auto;background-position:center top;mask-image:linear-gradient(to bottom,#000 0%,#000 64%,transparent 98%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 64%,transparent 98%)}
body[data-state=home] .scene:after{inset:0 0 -190px;mask-image:linear-gradient(to bottom,#000 50%,transparent 100%)}
body[data-state=home] .detail-field{mask-image:linear-gradient(to bottom,#000 0%,#000 73%,transparent 100%)}
body[data-state=home] .art{mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 56%,#000a 73%,transparent 95%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 56%,#000a 73%,transparent 95%)}
body[data-state=home] .art>video,body[data-state=home] .art>.still{mask-image:linear-gradient(90deg,transparent,#000 28%,#000 93%,transparent)!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 93%,transparent)!important}
body[data-state=home] #homeSections>.site-section:first-child{padding-top:180px}
body[data-state=home] #homeSections>.site-section:first-child:before{top:125px}
body[data-state=home] .dna-tethers{overflow:hidden}
.boot,.fragments,#particles{display:none!important}
/* Map: left explanation, central full catalog, DNA exploration on the right. */
body[data-state=map] .scene{height:max(830px,calc(100svh - 80px));min-height:830px;max-height:none}
body[data-state=map] .map-intro{top:15%;left:5.5%;width:23%;max-width:none}
body[data-state=map] .map-intro h2{font-size:clamp(28px,2.9vw,43px);line-height:1.3}
body[data-state=map] .map-preview{max-width:none}
body[data-state=map] .preview-products{display:none}
body[data-state=map] .map-lede{font-size:12px;line-height:1.9}
body[data-state=map] .art{right:-16vw;width:67vw;top:52%;transform:translateY(-50%) scale(.83);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 81%,transparent)}
.catalog-matrix{display:none}
body[data-state=map] .catalog-matrix{display:block;position:absolute;left:33%;top:15%;width:31%;z-index:5;max-height:73%;overflow:auto;scrollbar-width:thin;scrollbar-color:#a5b7a6 transparent;padding:0 12px 20px 0}
.matrix-label{font-size:9px;letter-spacing:.15em;color:#7a8b7d;margin:0 0 17px}
.matrix-tabs{display:flex;gap:7px;border-bottom:1px solid #adc0af;padding:0 0 14px}
.matrix-tabs button{font-size:11px;padding:8px 9px;border:1px solid #acbbad70;white-space:nowrap}
.matrix-tabs button[aria-pressed=true]{background:#365747;color:#f6f5ef;border-color:#365747}
.matrix-heading{display:flex;align-items:baseline;justify-content:space-between;margin:21px 0 13px}
.matrix-heading h3{font-size:22px;font-weight:500;margin:0}.matrix-heading span{color:#7d937f;font-size:12px}
.matrix-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.matrix-items button{text-align:left;min-width:0;display:grid;grid-template-columns:1fr auto;gap:5px;padding:12px 0;border-bottom:1px solid #b5c5b580}
.matrix-items button:hover,.matrix-items button:focus-visible{background:#e7eee370}
.matrix-items button span{font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.matrix-items button small{font-size:8px;color:#7b8e7d;line-height:1.5;overflow-wrap:anywhere}
.matrix-items button i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;color:#819885}
.matrix-note{font-size:9px;line-height:1.9;color:#879582;margin-top:18px}
.bio-extra{position:absolute;left:36%;top:36%;width:128px;height:92px;pointer-events:none;z-index:1;color:#6d8372;opacity:.23}
.bio-extra svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:.9}
.bio-extra .bio-step{animation:bio-visit 26s ease-in-out infinite;opacity:0}
.bio-extra .bio-join{stroke-dasharray:90;animation:bio-join 26s ease-in-out infinite}
@keyframes bio-visit{0%,58%,100%{opacity:0}12%,43%{opacity:1}}
@keyframes bio-join{0%,18%{stroke-dashoffset:90}35%,100%{stroke-dashoffset:0}}
body:not([data-state=home]) .bio-extra{display:none}
body[data-dna-directory=true] .bio-extra{opacity:.08}
body[data-motion-paused=true] .bio-extra *,body[data-bio-motion=off] .bio-extra *{animation-play-state:paused!important}
@media(min-width:1700px){body[data-state=map] .catalog-matrix{left:32%;width:33%}.matrix-items button{padding:15px 0}.matrix-items button span{font-size:14px}}
@media(max-width:1000px) and (min-width:651px){body[data-state=map] .map-intro{width:27%;left:5%}body[data-state=map] .catalog-matrix{left:37%;width:35%}.matrix-tabs{flex-wrap:wrap}.matrix-tabs button{font-size:10px}.matrix-items{grid-template-columns:1fr}body[data-state=map] .art{right:-28vw;opacity:.65}}
@media(max-width:650px){body[data-state=home] .scene:before{background-size:auto 100%;inset:0 0 -110px;mask-image:linear-gradient(to bottom,#000 55%,transparent 94%)}body[data-state=home] .scene:after{inset:0 0 -110px}body[data-state=home] .art{mask-image:linear-gradient(180deg,transparent,#000 15%,#000 56%,transparent 94%)}body[data-state=home] #homeSections>.site-section:first-child{padding-top:110px}body[data-state=home] #homeSections>.site-section:first-child:before{top:65px}.bio-extra{display:none}body[data-state=map] .scene{height:auto;min-height:900px;padding-bottom:100px}body[data-state=map] .map-intro{position:relative;top:auto;left:auto;width:auto;margin:30px 7% 0;max-height:none;overflow:visible}body[data-state=map] .map-intro h2{font-size:30px}body[data-state=map] .map-preview{display:none}body[data-state=map] .map-lede{font-size:11px}body[data-state=map] .catalog-matrix{position:relative;left:auto;top:auto;width:auto;max-height:none;overflow:visible;margin:34px 7% 10px;padding:0;z-index:7}body[data-state=map] .art{top:160px;right:-45vw;width:110vw;opacity:.16;pointer-events:none;transform:translateY(-35%) scale(.83)}.matrix-items{gap:0 14px}.matrix-items button span{font-size:12px}.matrix-items button{padding:13px 0}.matrix-tabs button{padding:9px 8px;font-size:11px}body[data-state=map] .scene-bottom{bottom:28px}}
@media(prefers-reduced-motion:reduce){.bio-extra *{animation:none!important}.bio-extra .bio-step{opacity:.5}.bio-extra .bio-join{stroke-dashoffset:0}}
/* Keep all three exploration targets on screen and fully legible. */
@media(min-width:1001px){body[data-state=map] .art{right:-3vw;width:54vw;mask-image:none;transform:translateY(-50%) scale(.87)}body[data-state=map] .art>.still{mask-image:linear-gradient(180deg,transparent,#000 12%,#000 83%,transparent)}body[data-state=map] .hotspot>span{background:#f6f5efd9}}
/* Route changes have no geometry tween; outgoing reading rails disappear immediately. */
body:not([data-state=product]) .reading-layout{display:none!important}
.art,.pencil-side{transition:none!important}