.gallery-sketch-intro{color:#262b23;background:#f6f5ef radial-gradient(#777b6a12 .55px,#0000 .55px) 0 0/5px 5px;outline:none;flex-direction:column;min-height:100svh;padding:24px clamp(20px,5vw,76px) 28px;display:flex}.sketch-intro-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.sketch-intro-header .brand-logo{width:116px}.sketch-skip{min-height:44px;padding:10px 14px;font-size:14px}.sketch-intro-heading{text-align:center;margin:clamp(24px,5vh,64px) 0 28px}.sketch-intro-heading>span{font:500 12px var(--display);letter-spacing:.18em;color:#737965}.sketch-intro-heading h1{letter-spacing:-.055em;margin:12px 0 0;font-size:clamp(26px,3vw,44px);font-weight:550}.sketch-photo-stage{flex:1;justify-content:center;align-items:center;gap:clamp(12px,2.8vw,44px);min-height:280px;padding:18px 0 28px;display:flex}.sketch-photo{width:min(25vw,272px);transform:rotate(calc((var(--photo-index) - 1) * 3deg));animation:sketch-card-arrive var(--motion-slow) var(--ease-out) both;background:#fffef9;border:1px solid #272e1f12;flex:0 272px;margin:0;padding:10px 10px 0;box-shadow:0 16px 30px #2d332312}.sketch-photo-surface{aspect-ratio:4/5;background:#faf9f3;position:relative}.sketch-drawing,.sketch-original{width:100%;height:100%;display:block;position:absolute;inset:0}.sketch-original{object-fit:cover;opacity:0;animation:sketch-to-photo var(--motion-slow) var(--ease-in-out) calc(2s + var(--photo-index) * .15s) forwards}.sketch-guide{opacity:0;animation:sketch-guidelines 1s var(--ease-out) calc(var(--photo-index) * .15s) forwards}.sketch-pencil-path{fill:none;stroke:#fff;stroke-width:18px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px;animation:sketch-pencil-draw 2.1s linear calc(var(--photo-index) * .15s) forwards}.sketch-photo figcaption{color:#717663;justify-content:space-between;align-items:center;gap:8px;padding:15px 3px;font-size:12px;display:flex}.sketch-photo figcaption>span:first-child{font-family:var(--display);letter-spacing:.08em;font-size:12px}.sketch-preparing{place-items:center;min-height:300px;display:grid}.sketch-preparing .memory-pieces{width:94px;height:94px}.sketch-intro-footer{text-align:center;padding-top:18px}.sketch-intro-footer output{color:#747c68;margin-top:14px;font-size:14px;display:block}.sketch-time-line{background:#dce0d3;width:116px;height:2px;margin:auto;overflow:hidden}.sketch-time-line i{transform-origin:0;background:#7d8957;width:100%;height:100%;display:block;transform:scaleX(0)}.gallery-sketch-intro[data-phase=drawing] .sketch-time-line i{animation:2.9s linear forwards sketch-intro-time}.gallery-sketch-intro[data-phase=leaving] .sketch-time-line i{transform:scaleX(1)}.gallery-sketch-intro[data-phase=leaving] .sketch-photo-stage,.gallery-sketch-intro[data-phase=leaving] .sketch-intro-heading,.gallery-sketch-intro[data-phase=leaving] .sketch-intro-footer{opacity:0;transition:opacity var(--motion-slow) var(--ease-in-out), transform var(--motion-slow) var(--ease-in-out);transform:translateY(-10px)}.gallery-arriving{animation:gallery-sketch-arrive var(--motion-slow) var(--ease-out) both}@keyframes sketch-pencil-draw{to{stroke-dashoffset:0}}@keyframes sketch-guidelines{to{opacity:.07}}@keyframes sketch-to-photo{to{opacity:1}}@keyframes sketch-intro-time{to{transform:scaleX(1)}}@keyframes sketch-card-arrive{0%{opacity:0;translate:0 14px}to{opacity:1;translate:0}}@keyframes gallery-sketch-arrive{0%{opacity:.15}to{opacity:1}}@media (max-width:600px){.gallery-sketch-intro{padding:18px 18px 24px}.sketch-intro-header .brand-logo{width:100px}.sketch-photo-stage{flex:1 0 365px;min-height:365px;padding:12px 0;position:relative}.sketch-photo{width:min(62vw,240px);transform:translateX(calc((var(--photo-index) - 1) * 36px)) rotate(calc((var(--photo-index) - 1) * 9deg));position:absolute}.sketch-photo:first-child{z-index:3}.sketch-photo:nth-child(2){z-index:2;translate:0 -8px}.sketch-photo:nth-child(3){z-index:1;translate:0 -16px}.gallery-sketch-intro[data-photo-count="1"] .sketch-photo{transform:rotate(-3deg)}.gallery-sketch-intro[data-photo-count="2"] .sketch-photo{transform:translateX(calc((var(--photo-index) - .5) * 72px)) rotate(calc((var(--photo-index) - .5) * 12deg))}.sketch-intro-heading{margin-top:34px;margin-bottom:10px}.sketch-photo figcaption{padding:13px 0;font-size:12px}}@media (prefers-reduced-motion:reduce){.gallery-sketch-intro *,.gallery-arriving{transition:none!important;animation:none!important}}@media print{.gallery-sketch-intro{display:none!important}}