/* Three photographic glass chapters from the user's supplied reference. */
.aif-how{position:relative;isolation:isolate;overflow:clip;background:#100e10;scroll-margin-top:110px;padding:clamp(52px,5vw,86px) clamp(20px,5vw,76px) clamp(62px,6vw,98px)}
.aif-how::before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,#0a090aeb,#0a090a9c 50%,#0a090ad9),linear-gradient(#08070973,#0d0b0be6),url('assets/how/new-steps/upload.jpeg') center top/cover no-repeat;opacity:.75}
.aif-how::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(#100e1000 70%,#100e10),radial-gradient(ellipse at 50% 52%,#e8619912,transparent 74%);pointer-events:none}
.aif-how-layout{position:relative;width:min(1120px,100%);margin:0 auto}
.aif-how-heading{text-align:center;margin:0 auto clamp(36px,4vw,62px);max-width:1100px}
.aif-how-heading h2{font:700 clamp(28px,3.4vw,48px)/1.12 Arial,sans-serif;letter-spacing:-.025em;color:#fffafc;margin:0;text-wrap:balance}
.aif-how-intro{color:#e8e2e1b8;text-transform:uppercase;font-size:clamp(13px,1.5vw,19px);letter-spacing:.035em;margin:14px 0 0;line-height:1.5}
.aif-how-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);list-style:none;margin:0;padding:0}
.aif-how-chapters li{min-width:0;line-height:normal}
.aif-how-frame{position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:1792/2400;min-height:0;overflow:hidden;padding:0;border:1px solid #ffd2dfb8;border-radius:18px;background:#1d1719;color:white;font-family:inherit;cursor:pointer;box-shadow:0 0 0 1px #ffd1df40,inset 0 0 14px #ffe3ed20,0 0 16px #ff94b34a,0 10px 44px #ed709527;transition:transform .3s,border-color .3s,box-shadow .3s;-webkit-tap-highlight-color:transparent}
.aif-how-step-image{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;transition:transform .65s cubic-bezier(.16,1,.3,1),filter .45s}
.aif-how-glass{position:absolute;inset:0;background:linear-gradient(#19151924 0%,transparent 40%,#1210141a 62%,#100d10e0 100%);pointer-events:none}
.aif-how-glass::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#fff2 0%,#fff1 24%,transparent 24.5% 61%,#fff1 61.5%,transparent 82%);opacity:.58}
.aif-how-number{position:absolute;z-index:2;top:7%;left:20px;right:20px;display:block;text-align:center;text-transform:uppercase;font-weight:700;color:#fff3f7d9;letter-spacing:.04em;font-size:clamp(13px,1.3vw,17px);margin:0}
.aif-how-step-title{position:absolute;z-index:2;bottom:8%;left:16px;right:16px;display:block;text-align:center;font-size:clamp(19px,2.05vw,29px);font-weight:700;letter-spacing:-.025em;line-height:1.2;text-shadow:0 3px 16px #000}
.aif-how-frame:hover,.aif-how-frame.is-active{transform:translateY(-5px);border-color:#ffe4ed;box-shadow:0 0 0 1px #fff3,0 0 25px #ffaccf70,0 20px 50px #e76f9c38}
.aif-how-frame:hover .aif-how-step-image,.aif-how-frame.is-active .aif-how-step-image{transform:scale(1.025);filter:brightness(1.08)}
.aif-how-frame:focus-visible{outline:3px solid #ffe0ec;outline-offset:5px}
.aif-how-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.aif-how-dialog{padding:0;max-width:740px;max-height:90svh;overflow:auto;background:#171216;color:#fff;border:1px solid #ffd0e08c;border-radius:22px}
.aif-how-dialog::backdrop{background:#050405d1;backdrop-filter:blur(10px)}
.aif-how-detail-image{display:block;object-fit:cover;object-position:center 57%;width:100%;height:clamp(240px,42svh,400px)}
.aif-how-detail-copy{padding:24px}.aif-how-detail-copy .aif-how-number{position:static;text-align:left;font-size:13px}.aif-how-detail-copy h3{font-size:26px;margin:16px 0}.aif-how-detail-copy>p:not(.aif-how-number){color:#eee1e9cc;font-size:16px;line-height:1.6}
.aif-how-close{position:absolute;z-index:3;top:14px;right:14px;background:#110d13c9;border:1px solid #ffcad64a;color:#fff;border-radius:50%;width:40px;height:40px;font-size:28px;cursor:pointer}
@media(max-width:700px){.aif-how{padding:50px 20px 60px;scroll-margin-top:160px}.aif-how-heading{margin-bottom:28px}.aif-how-heading h2{font-size:clamp(28px,7.5vw,38px)}.aif-how-intro{font-size:13px;line-height:1.5}.aif-how-chapters{grid-template-columns:1fr;gap:24px;max-width:420px;margin:0 auto}.aif-how-frame{border-radius:20px}.aif-how-number{font-size:16px}.aif-how-step-title{font-size:clamp(25px,7vw,32px);left:22px;right:22px}.aif-how-dialog{width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){.aif-how-frame,.aif-how-step-image{transition:none}.aif-how-frame:hover,.aif-how-frame.is-active,.aif-how-frame:hover .aif-how-step-image,.aif-how-frame.is-active .aif-how-step-image{transform:none}}