@font-face{font-family:Exposure;src:url('assets/exposure-regular.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Exposure;src:url('assets/exposure-italic.otf') format('opentype');font-style:italic;font-weight:400;font-display:swap}
*{box-sizing:border-box}html,body{margin:0;background:#f0eee6;color:#191919}html{scroll-snap-type:y mandatory}body{font-family:Exposure,Georgia,serif;font-weight:400;-webkit-font-smoothing:antialiased}::selection{background:#d8d4c8}
.passage-section{display:grid;place-items:center;align-content:center;padding:100px 28px;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always}
.passage{width:100%;max-width:20.65em;font-size:clamp(23px,2.5vw,32px);text-align:center}
.passage p,.passage h1{font:400 1em/1.6 Exposure,Georgia,serif;letter-spacing:-.018em;text-wrap:pretty;margin:0}.passage p+p{margin-top:.75em}strong{font-weight:600;font-synthesis:weight}em{font-weight:400;color:inherit}
a,a:visited{color:inherit;text-decoration:none;border:0}a:hover{color:inherit;text-decoration:none}a:focus-visible{outline:1px solid #191919;outline-offset:6px}a strong{text-decoration:underline dotted #9f9b92;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .2s}a:hover strong{text-decoration-color:#191919}
.story-word{white-space:nowrap}.word-icon{display:inline-block;width:1em;height:1em;font-family:'Apple Color Emoji','Segoe UI Emoji',sans-serif;font-size:.9em;line-height:1;vertical-align:-.08em;margin-inline-end:.12em;transform:rotate(-9deg);transition:transform .25s}.word-icon img{width:100%;height:100%;object-fit:contain;display:inline-block;border-radius:3px}.story-word:hover .word-icon{transform:rotate(0)}
figure{margin:0}.drawing{width:420px;max-width:90%;margin:0 auto 36px}.drawing img{width:100%;height:auto;display:block;object-fit:contain}.brand-art{height:180px;display:flex;align-items:center;justify-content:center}.brand-art img{width:112px;height:112px;object-fit:contain;filter:saturate(.82) sepia(.08)}
.opening{position:relative}.reading-hint{position:absolute;bottom:38px;left:0;right:0;text-align:center;font-size:15px;font-style:italic;color:#656158}.passage .contact{display:block;font-size:.66em;line-height:1.8;letter-spacing:0}
.media-section{padding:clamp(36px,6svh,72px) 16px;gap:18px;scroll-snap-stop:normal}
.monitor{position:relative;display:block;width:min(920px,calc(100vw - 32px));aspect-ratio:3/2;isolation:isolate;margin:0 auto}
.monitor-screen{position:absolute;left:9.77%;top:8.4%;width:80.4%;height:69.73%;overflow:hidden;display:grid;place-items:center;background:#151515;z-index:0;border-radius:2.4%}
.monitor-screen>.screen-image{display:block;width:100%;height:100%;object-fit:contain;filter:sepia(.08) saturate(.94)}
.monitor-frame{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;z-index:1}
.screen-crop{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.screen-crop img{position:absolute;max-width:none;width:396.9%;height:auto;top:-242%;left:-50.78%;filter:sepia(.1) saturate(.92)}.screen-crop.viz img{left:-154.65%}
@media(max-width:600px){.passage{font-size:clamp(20px,5.45vw,27px)}.passage-section{padding:90px 20px}.drawing{width:280px;margin-bottom:32px}.brand-art{height:120px}.brand-art img{width:84px;height:84px}.reading-hint{bottom:30px}.media-section{padding:40px 16px;gap:20px}.passage .contact{font-size:.72em}}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none}*{transition:none!important}}
@media print{@page{size:A4;margin:15mm 17mm}html,body{scroll-snap-type:none;background:#f0eee6;print-color-adjust:exact;-webkit-print-color-adjust:exact}.passage-section{min-height:0;padding:9mm 0;break-inside:avoid;scroll-snap-align:none;scroll-snap-stop:normal}.passage{max-width:100%;font-size:16pt}.drawing{width:65mm;margin-bottom:5mm}.passage p+p{margin-top:.6em}.opening{padding-top:0}.reading-hint{display:none}.brand-art{height:28mm}.brand-art img{width:22mm;height:22mm}.monitor{width:160mm;max-width:100%}.media-section{gap:5mm}}

/* Small, contextual interactions. Each settles after a single gesture. */
.opening .opening-principle{margin-top:.75em}
.security-accent{display:inline-block;white-space:nowrap;outline-offset:5px;cursor:default}
.security-icon{display:inline-block;width:.85em;height:.85em;color:#a23831;vertical-align:-.1em;margin-right:.13em;transform:rotate(-9deg);transform-origin:50% 60%}
.security-icon svg{display:block;width:100%;height:100%;overflow:visible}
.shield-bolt{transform-origin:50% 50%}
.security-accent:is(:hover,:focus-visible) .security-icon{animation:shield-activate 1.05s cubic-bezier(.2,.75,.3,1) both}
.security-accent:is(:hover,:focus-visible) .shield-scan{animation:shield-scan .7s .08s ease-in-out both}
.security-accent:is(:hover,:focus-visible) .shield-bolt{animation:bolt-flash .85s .12s ease-out both}
.security-accent:is(:hover,:focus-visible) .shield-sparks{animation:shield-sparks .65s .25s ease-out both;transform-origin:center}
@keyframes shield-activate{0%{transform:rotate(-9deg) scale(1)}20%{transform:rotate(3deg) scale(1.2)}42%{transform:rotate(-3deg) scale(1.16)}70%{transform:rotate(0) scale(1.1)}100%{transform:rotate(-9deg) scale(1)}}
@keyframes shield-scan{0%{transform:translateY(0);opacity:0}20%{opacity:.7}85%{opacity:.45}100%{transform:translateY(24px);opacity:0}}
@keyframes bolt-flash{0%,30%{opacity:.35;transform:scale(.85)}48%{opacity:1;transform:scale(1.16)}62%{opacity:.5;transform:scale(1)}78%,100%{opacity:1;transform:scale(1)}}
@keyframes shield-sparks{0%{opacity:0;transform:scale(.75)}25%{opacity:.75}100%{opacity:0;transform:scale(1.45)}}
.wardrobe-icon{display:inline-block;width:.8em;height:.8em;margin-right:.16em;vertical-align:-.05em;transform:rotate(-8deg);transform-origin:50% 8%}
.wardrobe-icon svg{display:block;width:100%;height:100%}
a[href*="1dyxf2a"]:is(:hover,:focus-visible) .wardrobe-icon{animation:outfit-sway .65s ease-in-out both}
a[href*="plasmo.com"]:is(:hover,:focus-visible) .word-icon{animation:plasmo-lift .65s cubic-bezier(.2,.7,.3,1) both}
a[href*="3QpuT6hNdXU"]:is(:hover,:focus-visible) .word-icon{animation:compass-turn .8s cubic-bezier(.2,.8,.3,1) both}
a[href*="youtube.com/@riwan"]:is(:hover,:focus-visible) .word-icon{animation:play-pop .55s ease-out both}
a[href*="QGwBHGp9Ivo"] strong{background-image:linear-gradient(#b9b3a35c,#b9b3a35c);background-size:0 35%;background-repeat:no-repeat;background-position:0 92%;transition:background-size .45s ease,text-decoration-color .2s}
a[href*="QGwBHGp9Ivo"]:is(:hover,:focus-visible) strong{background-size:100% 35%}
a[href*="quilr.ai"]:is(:hover,:focus-visible) .word-icon{animation:quilr-nod .6s ease-out both}
@keyframes outfit-sway{0%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}65%{transform:rotate(-10deg)}100%{transform:rotate(0)}}
@keyframes plasmo-lift{0%{transform:translateY(0) rotate(-9deg)}40%{transform:translateY(-.22em) rotate(8deg)}70%{transform:translateY(.04em) rotate(-3deg)}100%{transform:translateY(-.05em) rotate(0)}}
@keyframes compass-turn{0%{transform:rotate(-9deg)}50%{transform:rotate(190deg)}78%{transform:rotate(165deg)}100%{transform:rotate(180deg)}}
@keyframes play-pop{0%{transform:scale(1) rotate(-9deg)}45%{transform:scale(1.22) rotate(0)}75%{transform:scale(.96)}100%{transform:scale(1.08) rotate(0)}}
@keyframes quilr-nod{0%{transform:rotate(-9deg)}35%{transform:rotate(12deg)}70%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.security-accent{color:inherit}.security-icon,.wardrobe-icon{display:none}}


.intro-greeting{display:inline-block;white-space:nowrap;cursor:default;outline-offset:6px}
.hello-wave{display:inline-block;font-family:'Apple Color Emoji','Segoe UI Emoji',sans-serif;font-size:.9em;transform-origin:72% 80%;vertical-align:.01em}
.intro-greeting:is(:hover,:focus-visible) .hello-wave{animation:hello-wave 1.1s ease-in-out both}
@keyframes hello-wave{0%,100%{transform:rotate(0)}15%{transform:rotate(22deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(22deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(14deg)}}
@media(prefers-reduced-motion:reduce){.intro-greeting .hello-wave{animation:none!important}}