.member-grid{grid-template-columns:repeat(4,1fr)}
.portrait-photo::before,.portrait-photo::after{content:none}
.portrait-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .5s var(--ease),filter .5s ease}
.member-card:hover .portrait-photo img{transform:scale(1.025);filter:grayscale(.75)}
.member-social{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:10px 12px;border:1px solid var(--ink);font:10px Arial;letter-spacing:.12em;transition:background .2s,color .2s}
.member-social:hover{background:var(--ink);color:var(--paper)}
.member-social i{font-style:normal}
.member-coming .portrait{background:repeating-linear-gradient(135deg,#f1f1ed 0 12px,#e8e8e3 12px 13px)}
.member-coming .portrait span{font:70px Georgia;color:transparent;-webkit-text-stroke:1px #aaa}
.member-coming h3{font-size:clamp(20px,2vw,28px);letter-spacing:.02em}
.art-kuraimori{background:var(--ink)}
.art-kuraimori::before{content:none}
.art-kuraimori img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .7s var(--ease),filter .7s ease}
.product-card:hover .art-kuraimori img{transform:scale(1.025);filter:grayscale(.8) contrast(1.05)}
.kuraimori-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
.kuraimori-card .product-card-art{aspect-ratio:2/1;border-bottom:0;border-right:1px solid var(--ink)}
.kuraimori-card .art-kuraimori img{object-fit:contain}
.kuraimori-card .product-card-copy{min-height:0;display:flex;flex-direction:column;justify-content:center}
.stair-girl{transform:translate(-50%,-84%) translateY(var(--girl-bob,0)) scale(var(--girl-scale)) scaleX(var(--girl-direction,1)) rotate(var(--girl-lean,0deg))}
@media(max-width:760px){.member-grid{grid-template-columns:1fr}.kuraimori-card{display:block}.kuraimori-card .product-card-art{aspect-ratio:2/1;border-right:0;border-bottom:1px solid var(--ink)}.stair-girl{transform:translate(-50%,-82%) translateY(var(--girl-bob,0)) scale(var(--girl-scale)) scaleX(var(--girl-direction,1)) rotate(var(--girl-lean,0deg))}}

/* Entrance: open the door, then move the camera through its threshold. */
.opening{overflow:hidden;perspective:1100px;transition:opacity .28s ease,visibility .28s;background:var(--paper)}
.opening.is-open{transform:none;opacity:0;visibility:hidden}
.door-trigger{transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.72,.02,.35,1) .48s,opacity .25s ease 1.5s}
.door-frame{overflow:visible;transform-style:preserve-3d;transition:box-shadow .45s ease}
.door-depth{z-index:0;inset:0;background:radial-gradient(ellipse at 50% 48%,#080808 0 12%,#1b1b1b 28%,#050505 64%,#000 100%);box-shadow:inset 0 0 0 1px #111;transform:translateZ(-5px)}
.door{z-index:2;backface-visibility:hidden;transition:transform .68s cubic-bezier(.7,0,.3,1),filter .5s ease}
.opening.is-entering .door{transform:rotateY(-108deg);filter:brightness(.8)}
.opening.is-entering .door-trigger{transform:translateZ(720px) scale(4.8);opacity:0}
.opening.is-entering .door-frame{box-shadow:0 0 0 9px var(--paper),0 0 0 10px var(--ink),0 0 80px 25px rgba(0,0,0,.24)}
.opening.is-entering .door-copy,.opening.is-entering .door-hint{opacity:0;transition:opacity .25s ease}
.opening.is-entering::before,.opening.is-entering::after{opacity:0;transition:opacity .25s ease}
@media(prefers-reduced-motion:reduce){.opening,.door-trigger,.door{transition:none!important}}