.method-four{position:relative;overflow:hidden;padding:clamp(70px,9vw,130px) 0 100px;scroll-margin-top:70px;color:#fff8ed}
.method-four__head{padding:0 var(--gutter,40px) 40px;max-width:850px}
.method-four__head h2{font:400 clamp(36px,4.5vw,64px)/1.06 'Cormorant Garamond',serif;margin:14px 0 18px}
.method-four__head p{font:300 13px/1.8 Jost,sans-serif;color:#fff8edaa;max-width:510px}
.method-four__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1.6vw,24px);padding:0 var(--gutter,40px)}
.mf-card{display:block;position:relative;width:100%;height:clamp(280px,53svh,540px);padding:0;border:0;background:none;color:inherit;perspective:1200px;touch-action:manipulation}
.mf-card__inner{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.22,.75,.25,1);transform:rotateY(0deg)}
.mf-card.is-turned .mf-card__inner{transform:rotateY(180deg)}
.mf-card__front,.mf-card__back{position:absolute;inset:0;display:flex;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:9px}
.mf-card__front img{display:block;width:100%;height:100%;object-fit:cover}
.mf-card__back{transform:rotateY(180deg);padding:clamp(12px,2vw,30px);align-items:flex-start;justify-content:center;flex-direction:column;background:linear-gradient(145deg,#12253b,#070f1c);text-align:left}
.mf-card__number{font:10px Jost,sans-serif;letter-spacing:.16em;color:#cdb384;margin-bottom:22px}
.mf-card__back strong{font:400 clamp(20px,2.5vw,38px)/1.1 'Cormorant Garamond',serif;margin-bottom:18px}
.mf-card__tease{font:300 clamp(10px,1.05vw,13px)/1.7 Jost,sans-serif;color:#fff8edb3}
.mf-card:focus-visible{outline:1px solid #cdb384;outline-offset:7px}
.mf-detail{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;padding:0;margin:0;border:0;color:#fff8ed;background:#070f1cf5;overflow:hidden;font-family:Jost,sans-serif}
.mf-detail::backdrop{background:#070f1cbb}
.mf-detail__stage{position:absolute;inset:0;perspective:1200px}
.mf-detail__visual{position:absolute;left:6vw;top:22svh;width:22vw;height:56svh;transform:rotateY(-12deg);overflow:hidden;border-radius:9px}
.mf-detail__visual img{width:100%;height:100%;object-fit:cover;opacity:.42}
.mf-detail__visual strong{position:absolute;left:18px;right:18px;bottom:26px;font:400 30px/1.12 'Cormorant Garamond',serif}
.mf-detail__copy{position:absolute;left:50%;top:50%;width:min(540px,44vw);max-height:76svh;overflow:auto;padding:18px 12px;transform:translate(calc(100vw + 50%),-50%);transition:transform .75s cubic-bezier(.16,1,.3,1);scrollbar-width:thin;scrollbar-color:#cdb38455 transparent}
.mf-detail.is-open .mf-detail__copy{transform:translate(-50%,-50%)}
.mf-detail__copy h3{font:400 clamp(36px,4vw,58px)/1.05 'Cormorant Garamond',serif;margin:20px 0 24px}
.mf-detail__number{font-size:10px;letter-spacing:.2em;color:#cdb384}
.mf-detail__copy p{font-size:14px;font-weight:300;line-height:1.95;color:#fff8edc4;margin:20px 0}
.mf-detail__copy .mf-detail__tease{color:#cdb384;font-size:12px;margin-bottom:28px}
.mf-detail__close{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.mf-detail{transition:background .65s ease}
.mf-detail::backdrop{transition:background .65s ease}
.mf-detail.is-returning,.mf-detail.is-returning::backdrop{background:transparent}
.mf-detail.is-returning .mf-detail__copy{transition-duration:.55s;pointer-events:none}
.mf-detail__visual img,.mf-detail__visual strong{transition:opacity .55s ease}
.mf-detail.is-returning .mf-detail__visual{opacity:1}
.mf-detail.is-returning .mf-detail__visual img{opacity:1}
.mf-detail.is-returning .mf-detail__visual strong{opacity:0}
@media(max-width:767px){.method-four__head{padding:0 20px 30px}.method-four__row{padding:0 18px;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}.mf-card{height:clamp(225px,35svh,330px)}.mf-card__back{padding:20px 16px}.mf-card__back strong{font-size:clamp(22px,5vw,30px);margin-bottom:12px}.mf-card__number{font-size:8px;margin-bottom:14px}.mf-card__tease{font-size:11px;line-height:1.6}.mf-detail__visual{left:4vw;top:8svh;width:24vw;height:25svh;opacity:.65}.mf-detail__visual strong{font-size:16px;left:9px;right:9px;bottom:12px}.mf-detail__copy{left:50%;width:calc(100vw - 48px);max-height:72svh;top:48%}.mf-detail.is-open .mf-detail__copy{transform:translate(-50%,-50%)}.mf-detail__copy h3{font-size:36px}.mf-detail__copy p{font-size:13px;line-height:1.85}.mf-detail__visual{opacity:.15;pointer-events:none}.mf-detail__close{bottom:14px}}
@media(prefers-reduced-motion:reduce){.mf-card__inner,.mf-detail__copy{transition:none}}

@media(hover:none),(pointer:coarse){.mf-card:focus,.mf-card:focus-visible{outline:none;-webkit-tap-highlight-color:transparent}}

.method-four__head p{max-width:none;font-size:var(--s-1,12px);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim,#fff8edaa);line-height:1.8}

.mf-detail__visual img{display:block}

/* Polished glass is painted once; only the card plane and its highlight move. */
.mf-card__inner{transition-duration:.6s}
.mf-card__front,.mf-card__back{border:1px solid #e4eeff24;box-shadow:inset 0 1px 0 #ffffff3d}
.mf-card__front::after,.mf-card__back::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(125deg,#ffffff20,transparent 36%,#d8e8ff0a 68%,#ffffff1c);box-shadow:inset 0 0 28px #dceaff0c}
.mf-card__back{background:linear-gradient(135deg,#ffffff20,#ffffff05 42%,#ffffff14),#101d30}
.mf-card.is-turning .mf-card__inner{will-change:transform}
@media(max-width:767px){.mf-card__inner{transition-duration:.75s}.mf-card__front::after,.mf-card__back::after{box-shadow:none}.mf-detail__copy{transition-duration:.58s}}
@media(prefers-reduced-motion:reduce){.mf-card__inner{transition:none}.mf-card.is-turning .mf-card__front::before,.mf-card.is-turning .mf-card__back::before{animation:none}}

/* Quiet polished faces, with the original mobile rotation and no travelling stripe. */
.mf-card__front::before,.mf-card__back::before{display:none!important}

/* Original hinge motion on mobile, with plain edges and no glass bevel. */
@media(max-width:767px){
 .mf-card__inner{transition:transform .75s cubic-bezier(.22,.75,.25,1);transform-style:preserve-3d}
 .mf-card__front,.mf-card__back{border:0;box-shadow:none}
 .mf-card__front::after,.mf-card__back::after{display:none}
 .mf-card.is-turning .mf-card__inner{will-change:auto}
 .mf-card__back{background:linear-gradient(145deg,#12253b,#070f1c)}
}
.mf-detail__copy{transform:translate3d(calc(100vw + 50%),-50%,0);backface-visibility:hidden}
.mf-detail.is-open .mf-detail__copy{transform:translate3d(-50%,-50%,0)}
.method-four__head .float3d__in{filter:none}
.method-four__head .float3d__glow{background-image:linear-gradient(100deg,transparent calc(var(--sx) - 14%),#fffdf6 var(--sx),transparent calc(var(--sx) + 14%));filter:blur(3px) drop-shadow(0 0 8px #fffdf68c);opacity:var(--glow)}
.mf-detail__copy h3{position:relative}
.mf-detail__copy h3 .mf-title-glow{position:absolute;inset:0;pointer-events:none;color:transparent;-webkit-text-fill-color:transparent;background:linear-gradient(110deg,transparent 38%,#fffdf6 50%,transparent 62%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;filter:blur(3px);opacity:.4}
.mf-detail.is-open .mf-detail__copy h3 .mf-title-glow{animation:methodReadingLight 1.1s ease-out both}
@keyframes methodReadingLight{from{background-position:110% 50%;opacity:0}45%{opacity:.55}to{background-position:30% 50%;opacity:.28}}
.mf-read-cue{position:absolute;right:18px;bottom:18px;width:18px;height:18px;opacity:0;pointer-events:none}
.mf-read-cue::before,.mf-read-cue::after{content:'';position:absolute;width:7px;height:7px;border-color:#fff8edb3}
.mf-read-cue::before{right:0;top:0;border-top:1px solid;border-right:1px solid}
.mf-read-cue::after{left:0;bottom:0;border-left:1px solid;border-bottom:1px solid}
.mf-card.is-turned .mf-read-cue{animation:methodReadInvite 3s ease-in-out infinite}
@keyframes methodReadInvite{0%,100%{opacity:.35;transform:scale(.86)}50%{opacity:.85;transform:scale(1)}}
@media(max-width:900px){.method-four__head .float3d__in{animation:methodTitleFloat 8s ease-in-out infinite;animation-play-state:paused}.method-four.cue-in-view .method-four__head .float3d__in{animation-play-state:running}}
@keyframes methodTitleFloat{0%,100%{transform:translate3d(0,0,0) rotateY(0)}50%{transform:translate3d(0,-2px,5px) rotateY(1.2deg)}}
@media(prefers-reduced-motion:reduce){.mf-card__inner{transition:none}.method-four__head .float3d__in,.mf-detail__copy h3 .mf-title-glow,.mf-card.is-turned .mf-read-cue{animation:none}.mf-card.is-turned .mf-read-cue{opacity:.6}}

.mf-detail__copy p{font-size:15.5px;line-height:1.9}
.mf-detail__copy .mf-detail__tease{font-size:13px}
@media(max-width:767px){.mf-detail__copy p{font-size:14.5px;line-height:1.85}.mf-detail__copy .mf-detail__tease{font-size:13px}}

.mf-card:nth-child(1){--mf-turn:-180deg;perspective:1100px}
.mf-card:nth-child(2){--mf-turn:180deg;perspective:950px}
.mf-card:nth-child(3){--mf-turn:-180deg;perspective:1400px}
.mf-card:nth-child(4){--mf-turn:180deg;perspective:1200px}
.mf-card.is-turned .mf-card__inner{transform:rotateY(var(--mf-turn,180deg))}
.mf-detail__copy{mask-image:linear-gradient(180deg,transparent,#000 12px,#000 calc(100% - 22px),transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 12px,#000 calc(100% - 22px),transparent)}
.mf-detail.is-open .mf-detail__copy p{animation:methodParagraphFade .7s ease both}
.mf-detail.is-open .mf-detail__copy p:nth-of-type(2){animation-delay:.1s}
.mf-detail.is-open .mf-detail__copy p:nth-of-type(3){animation-delay:.2s}
@keyframes methodParagraphFade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.mf-detail.is-open .mf-detail__copy p{animation:none}}

/* A long, continuous reading fade, with enough inset for the last line to remain readable. */
@media(max-width:767px){
 .mf-detail__copy{padding-bottom:60px;scroll-padding-bottom:60px;
 mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 64px),#000e calc(100% - 44px),#0008 calc(100% - 22px),transparent 100%);
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 64px),#000e calc(100% - 44px),#0008 calc(100% - 22px),transparent 100%);
 }
}


/* Mobile reading uses the whole width: no background image rectangle behind the letters. */
@media(max-width:767px){
 .mf-detail__copy{width:100vw;max-height:80svh;box-sizing:border-box;padding:30px 28px 112px;border:0;outline:none;background:none;box-shadow:none;scrollbar-width:none;
 mask-image:linear-gradient(180deg,transparent 0,#0008 12px,#000 32px,#000 calc(100% - 120px),#000e calc(100% - 88px),#0008 calc(100% - 48px),#0002 calc(100% - 16px),transparent 100%);
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#0008 12px,#000 32px,#000 calc(100% - 120px),#000e calc(100% - 88px),#0008 calc(100% - 48px),#0002 calc(100% - 16px),transparent 100%);
 }
 .mf-detail__copy::-webkit-scrollbar{display:none}
 .mf-detail__visual{transition:opacity .55s ease}
 .mf-detail.is-open .mf-detail__visual{opacity:0}
 .mf-detail.is-returning .mf-detail__visual{opacity:1}
}


@media(max-width:767px){
 .mf-detail.is-open .mf-detail__visual{top:3svh;opacity:.23;border:0;box-shadow:none;background:none;mask-image:url('/assets/img/spaces-edge.svg?v=19');-webkit-mask-image:url('/assets/img/spaces-edge.svg?v=19');mask-size:100% 100%;-webkit-mask-size:100% 100%}
 .mf-detail.is-returning .mf-detail__visual{mask:none;-webkit-mask:none;opacity:1}
}

@media(max-width:767px){.mf-detail__visual{top:3svh}}

/* Slightly smaller desktop photographs; the existing inter-card gaps stay intact. */
@media(min-width:768px){
 .method-four__row{padding-inline:clamp(64px,8vw,140px)}
 .mf-card{height:clamp(260px,49svh,500px)}
}