/* Final authoritative layout layer. Loaded after the legacy design experiments. */
main{display:block!important}
.hero{height:100svh!important;min-height:640px!important}
.hero-sticky-layer{position:relative!important;top:auto!important;height:100svh!important;min-height:640px!important}
.experience-section .section-heading h2{white-space:nowrap!important;font-size:clamp(62px,8.4vw,146px)!important}

/* Interactive right-side section leaves. */
.growth-vine.section-leaf-nav{left:auto!important;right:8px!important;display:block!important;pointer-events:auto!important;z-index:90!important}
.section-leaf-nav>svg,.section-leaf-nav>span{pointer-events:none}.leaf-nav-list{position:absolute;inset:10% 0 10% auto;width:76px;display:flex;flex-direction:column;justify-content:space-around;align-items:flex-end}
.leaf-nav-list a{position:relative;display:flex;align-items:center;justify-content:flex-end;width:76px;min-height:38px;color:#486953;text-decoration:none}.leaf-nav-list i{display:block;width:21px;height:13px;border-radius:100% 0 100% 0;background:#a5cfa2;border:1px solid rgba(51,91,61,.28);transform:rotate(-24deg);transform-origin:100% 50%;box-shadow:0 3px 10px rgba(81,124,83,.14);transition:.3s ease}.leaf-nav-list span{position:absolute;right:31px;padding:6px 9px;border:1px solid rgba(75,105,83,.18);border-radius:999px;background:rgba(255,253,249,.82);backdrop-filter:blur(12px);font-size:10px;letter-spacing:.08em;white-space:nowrap;opacity:0;transform:translateX(8px);transition:.22s ease}.leaf-nav-list a:hover span,.leaf-nav-list a:focus-visible span,.leaf-nav-list a.active span{opacity:1;transform:translateX(0)}.leaf-nav-list a.active i{width:31px;height:18px;background:#719c78;transform:rotate(-13deg) scale(1.06)}

/* Fixed bookshelf: no cursor-driven accordion or parallax. */
.layout-folder-shell{--folder-tilt:0deg!important;--folder-light:50%!important;overflow:visible!important;height:auto!important;padding:clamp(30px,4vw,58px) clamp(22px,3.8vw,58px) clamp(38px,5vw,72px)!important;border:1px solid rgba(82,66,45,.25)!important;border-radius:24px!important;background:linear-gradient(90deg,rgba(255,255,255,.16),transparent 25%,rgba(255,255,255,.12) 68%,transparent),repeating-linear-gradient(0deg,transparent 0 235px,rgba(80,50,27,.28) 235px 243px,rgba(230,198,150,.9) 243px 258px),linear-gradient(100deg,#d9b982,#f1d9aa 48%,#caa36d)!important;box-shadow:inset 0 0 40px rgba(94,59,30,.16),0 26px 70px rgba(65,53,39,.12)!important;transform:none!important}.layout-folder-shell:before,.layout-folder-shell:after{display:none!important}
.layout-folder-shell .portfolio-gallery{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;align-items:end!important;gap:clamp(10px,1.15vw,20px)!important;width:100%!important;height:auto!important;padding:0!important;overflow:visible!important;perspective:none!important;transform:none!important}
.layout-folder-shell .layout-card,.layout-folder-shell .layout-card:nth-child(5n+1),.layout-folder-shell .layout-card:nth-child(5n+4){width:100%!important;min-width:0!important;height:auto!important;aspect-ratio:3/4!important;flex:none!important;overflow:hidden!important;border:1px solid rgba(67,61,48,.25)!important;border-radius:5px 5px 2px 2px!important;background:#fbf8ef!important;box-shadow:4px 8px 14px rgba(57,43,27,.2)!important;transform:none!important;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease!important}.layout-folder-shell .layout-card:hover,.layout-folder-shell .layout-card:focus-visible{z-index:8!important;flex-basis:auto!important;transform:translateY(-14px) scale(1.055) rotate(-.4deg)!important;box-shadow:8px 18px 30px rgba(57,43,27,.28)!important}.layout-folder-shell .layout-card:after{display:none!important}
.layout-folder-shell .layout-card img,.deck-media img,.deck-media video,.experience-work img,.experience-work video,.experience-hover-preview img,.experience-hover-preview video{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;transform:none!important}.layout-folder-shell .layout-card img{background:#fbf8ef!important}.deck-media{background:#0b0d0c!important}

/* Desktop viewer is compact and media is never cropped. */
.project-dialog[open],.project-dialog.is-landscape-video[open]{inset:0!important;width:min(92vw,1280px)!important;height:min(86dvh,840px)!important;max-width:none!important;max-height:none!important;margin:auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(230px,290px)!important;grid-template-rows:minmax(0,1fr)!important;overflow:hidden!important;border:1px solid rgba(180,190,185,.32)!important;border-radius:30px!important}.project-dialog.is-portrait-video[open]{inset:0!important;width:min(78vw,1060px)!important;height:min(86dvh,840px)!important;margin:auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(220px,270px)!important;grid-template-rows:minmax(0,1fr)!important;border-radius:30px!important}
.project-dialog .dialog-media{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;display:grid!important;place-items:center!important;overflow:hidden!important;border:0!important;border-radius:0!important;background:#030504!important}.project-dialog .dialog-media>video,.project-dialog .dialog-media>img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;background:#030504!important}.project-dialog .dialog-copy{min-width:0!important;width:auto!important;height:100%!important;padding:clamp(66px,7vh,92px) clamp(22px,2.4vw,38px) 28px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:18px!important;overflow:hidden!important}.project-dialog .dialog-copy h3{font-size:clamp(36px,4vw,65px)!important;line-height:1!important}.project-dialog .dialog-copy p{font-size:clamp(14px,1.3vw,19px)!important;line-height:1.65!important}.project-dialog .dialog-count{margin-top:18px!important;padding-top:18px!important}

@media(max-width:1100px) and (min-width:721px){.layout-folder-shell .portfolio-gallery{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media(max-width:720px){
 .hero,.hero-sticky-layer{height:100svh!important;min-height:580px!important}.hero-copy{left:16px!important;right:16px!important;top:27%!important;width:auto!important;max-width:none!important;text-align:center!important}.hero .hero-title{width:100%!important;max-width:100%!important;font-size:clamp(46px,14.2vw,60px)!important;line-height:.92!important}.hero .hero-title .hero-name{font-size:clamp(44px,15.5vw,60px)!important;white-space:nowrap!important}.hero .hero-title i{font-size:24px!important}.hero .eyebrow{max-width:100%!important;font-size:8px!important;letter-spacing:.12em!important;white-space:normal!important}.hero .intro{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;display:block!important;box-sizing:border-box!important;width:calc(100vw - 72px)!important;max-width:296px!important;margin:14px auto 0!important;font-size:11px!important;line-height:1.7!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;transform:none!important}.hero-index{display:none!important}.works-section,.visual-section,.experience-section,.about-section{padding:58px 14px 38px!important}.section-heading{margin-bottom:22px!important}.section-heading h2{font-size:clamp(48px,14vw,74px)!important}.experience-section .section-heading h2{font-size:clamp(42px,11.5vw,58px)!important}
 .growth-vine.section-leaf-nav{right:2px!important;width:35px!important;opacity:.9}.leaf-nav-list{width:34px;inset-block:13%}.leaf-nav-list a{width:34px;min-height:34px}.leaf-nav-list i{width:16px;height:10px}.leaf-nav-list a.active i{width:24px;height:14px}.leaf-nav-list span{display:none}
 .project-deck{grid-template-columns:1fr!important;gap:14px!important}.deck-description{min-height:0!important;padding:0 0 8px!important;border:0!important}.deck-description-copy,.deck-description-footer{display:none!important}.deck-current{margin-top:0!important;padding:10px 12px!important}.deck-window{height:clamp(430px,112vw,620px)!important}.deck-grid{width:calc(100% - 8px)!important;gap:42px!important}.deck-framebar{min-height:42px!important;padding:8px 12px!important}.deck-copy{padding:12px 14px 16px!important}
 .layout-folder-shell{margin-inline:0!important;padding:24px 14px 34px!important;border-radius:18px!important;background:repeating-linear-gradient(0deg,transparent 0 190px,rgba(80,50,27,.28) 190px 197px,rgba(230,198,150,.9) 197px 207px),linear-gradient(100deg,#d9b982,#f1d9aa 48%,#caa36d)!important}.layout-folder-shell .portfolio-gallery{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;height:auto!important;padding:0!important}.layout-folder-shell .layout-card:hover,.layout-folder-shell .layout-card:focus-visible{flex-basis:auto!important;transform:translateY(-7px) scale(1.035)!important}
 .experience-list article{min-height:0!important;padding:16px 0!important;overflow:visible!important}.experience-row-content{min-height:0!important;padding:0!important;gap:10px!important}.experience-works{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;margin:0 0 12px!important;padding:4px 0 8px!important;display:flex!important;gap:9px!important;overflow-x:auto!important;opacity:1!important;transform:none!important;pointer-events:auto!important;scrollbar-width:thin}.experience-work{flex:0 0 106px!important;width:106px!important;height:106px!important}
 .project-dialog[open],.project-dialog.is-portrait-video[open],.project-dialog.is-landscape-video[open]{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;margin:0!important;display:block!important;overflow:hidden!important;border:0!important;border-radius:0!important}.project-dialog .dialog-media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}.project-dialog .dialog-copy{position:absolute!important;z-index:4!important;left:12px!important;right:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;width:auto!important;height:auto!important;min-height:0!important;padding:12px 52px 12px 14px!important;gap:5px!important;justify-content:flex-start!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:16px!important;background:rgba(9,12,11,.69)!important;backdrop-filter:blur(18px) saturate(1.2)!important;pointer-events:none!important}.project-dialog .dialog-copy h3{margin:0!important;font-size:clamp(24px,8vw,36px)!important}.project-dialog .dialog-copy>p:not(.eyebrow){display:none!important}.project-dialog .dialog-copy .eyebrow{font-size:9px!important}.project-dialog .dialog-count{margin-top:3px!important;padding-top:5px!important;font-size:9px!important}.dialog-close{position:fixed!important;top:max(12px,env(safe-area-inset-top))!important;right:12px!important;z-index:8!important}
}

/* Layout archive final interaction: dense 45-degree prints, attracted only
   upward by the cursor. There is no Z travel and no turn toward the viewer. */
.layout-folder-shell .portfolio-gallery{
 perspective:none!important;
 perspective-origin:initial!important;
 transform-style:flat!important;
 height:clamp(560px,46vw,700px)!important
}
.layout-folder-shell .layout-card,
.layout-folder-shell .layout-card:nth-child(5n+1),
.layout-folder-shell .layout-card:nth-child(5n+4){
 width:clamp(128px,9vw,158px)!important;
 transform-origin:50% 100%!important;
 transform-style:flat!important;
 transform:translate(-50%,-50%) translateY(var(--wave-y))
  rotateZ(var(--base-rotate)) scale(1)!important;
 transition:transform .4s cubic-bezier(.18,.78,.2,1),box-shadow .4s ease,filter .35s ease!important;
 filter:saturate(.92) brightness(.99)!important;
 box-shadow:12px 18px 25px rgba(62,74,65,.2),0 0 0 1px rgba(255,255,255,.86)!important
}
.layout-folder-shell .layout-card:hover,
.layout-folder-shell .layout-card:focus-visible{
 z-index:1600!important;
 transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 58px))
  rotateZ(var(--base-rotate)) scale(1.025)!important;
 filter:saturate(1.02) brightness(1.03)!important;
 box-shadow:18px 48px 55px rgba(57,70,59,.34),0 0 0 1px rgba(255,255,255,.96)!important
}
.layout-folder-shell .layout-card.is-lifted{
 z-index:1800!important;
 transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 94px))
  rotateZ(var(--base-rotate)) scale(1.055)!important;
 filter:saturate(1.03) brightness(1.035)!important;
 box-shadow:22px 68px 72px rgba(52,66,55,.38),0 0 0 1px rgba(255,255,255,.98)!important
}
@media(max-width:900px){
 .layout-folder-shell .portfolio-gallery{height:520px!important}
 .layout-folder-shell .layout-card,
 .layout-folder-shell .layout-card:nth-child(5n+1),
 .layout-folder-shell .layout-card:nth-child(5n+4){
  width:clamp(82px,20vw,104px)!important;
  transform:translate(-50%,-50%) translateY(var(--wave-y)) rotateZ(var(--base-rotate))!important
 }
 .layout-folder-shell .layout-card:hover,
 .layout-folder-shell .layout-card:focus-visible{
  transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 34px)) rotateZ(var(--base-rotate)) scale(1.02)!important
 }
 .layout-folder-shell .layout-card.is-lifted{
  transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 54px)) rotateZ(var(--base-rotate)) scale(1.04)!important
 }
}

/* Resume release: authoritative soft motion for Project & Experience. */
#experienceProjects .experience-works{
 transition:border-color .7s ease,box-shadow .7s cubic-bezier(.16,1,.3,1)!important
}
#experienceProjects .experience-work{
 transition:transform .68s cubic-bezier(.16,1,.3,1),box-shadow .68s cubic-bezier(.16,1,.3,1),border-color .55s ease,filter .55s ease!important;
 will-change:transform
}
#experienceProjects .experience-work:hover,
#experienceProjects .experience-work:focus-visible{
 transform:translateY(-6px) scale(1.035)!important;
 box-shadow:inset 0 1px 0 #fff,0 18px 38px rgba(57,89,67,.18),0 0 24px rgba(160,208,170,.14)!important
}
#experienceProjects .experience-work img,
#experienceProjects .experience-work video{
 transition:filter .6s ease,opacity .6s ease!important
}
@media(prefers-reduced-motion:reduce){
 #experienceProjects .experience-work,
 #experienceProjects .experience-works{transition:none!important}
}

/* Resume release: softer project interaction and calmer liquid-glass motion. */
#experienceProjects .experience-works{
 transition:border-color .7s ease,box-shadow .7s cubic-bezier(.16,1,.3,1)!important
}
#experienceProjects .experience-work{
 transition:transform .68s cubic-bezier(.16,1,.3,1),box-shadow .68s cubic-bezier(.16,1,.3,1),border-color .55s ease,filter .55s ease!important;
 will-change:transform
}
#experienceProjects .experience-work:hover,
#experienceProjects .experience-work:focus-visible{
 transform:translateY(-6px) scale(1.035)!important;
 box-shadow:inset 0 1px 0 #fff,0 18px 38px rgba(57,89,67,.18),0 0 24px rgba(160,208,170,.14)!important
}
#experienceProjects .experience-work img,
#experienceProjects .experience-work video{
 transition:filter .6s ease,opacity .6s ease!important
}
@media(prefers-reduced-motion:reduce){
 #experienceProjects .experience-work,
 #experienceProjects .experience-works{transition:none!important}
}

/* FINAL upright archive — authoritative last override. */
.layout-gallery-viewport{
 scroll-padding-inline:clamp(90px,7vw,150px)!important
}
.layout-folder-shell .portfolio-gallery{
 box-sizing:border-box!important;
 width:max(2500px,235vw)!important
}
.layout-folder-shell .layout-card,
.layout-folder-shell .layout-card:nth-child(5n+1),
.layout-folder-shell .layout-card:nth-child(5n+4){
 transform:translate(-50%,-50%) translateY(var(--wave-y)) rotateZ(0deg)!important
}
.layout-folder-shell .layout-card:hover,
.layout-folder-shell .layout-card:focus-visible{
 z-index:1900!important;
 transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 62px)) rotateZ(0deg) scale(1.34)!important
}
.layout-folder-shell .layout-card.is-lifted{
 z-index:2100!important;
 transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 104px)) rotateZ(0deg) scale(1.72)!important
}
@media(max-width:900px){
 .layout-gallery-viewport{scroll-padding-inline:58px!important}
 .layout-folder-shell .layout-card,
 .layout-folder-shell .layout-card:nth-child(5n+1),
 .layout-folder-shell .layout-card:nth-child(5n+4){
  transform:translate(-50%,-50%) translateY(var(--wave-y)) rotateZ(0deg)!important
 }
 .layout-folder-shell .layout-card:hover,
 .layout-folder-shell .layout-card:focus-visible{
  transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 38px)) rotateZ(0deg) scale(1.22)!important
 }
 .layout-folder-shell .layout-card.is-lifted{
  transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 62px)) rotateZ(0deg) scale(1.48)!important
 }
}

/* FINAL upright archive: vertical cards, visible end margins and a stronger
   hover enlargement. Vertical magnetic lift and neighbour wave are retained. */
.layout-gallery-viewport{
 scroll-padding-inline:clamp(90px,7vw,150px)!important
}
.layout-folder-shell .portfolio-gallery{
 box-sizing:border-box!important;
 width:max(2500px,235vw)!important
}
.layout-folder-shell .layout-card,
.layout-folder-shell .layout-card:nth-child(5n+1),
.layout-folder-shell .layout-card:nth-child(5n+4){
 transform:translate(-50%,-50%) translateY(var(--wave-y)) rotateZ(0deg)!important
}
.layout-folder-shell .layout-card:hover,
.layout-folder-shell .layout-card:focus-visible{
 transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 62px)) rotateZ(0deg) scale(1.34)!important
}
.layout-folder-shell .layout-card.is-lifted{
 transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 104px)) rotateZ(0deg) scale(1.72)!important
}
@media(max-width:900px){
 .layout-gallery-viewport{scroll-padding-inline:58px!important}
 .layout-folder-shell .layout-card,
 .layout-folder-shell .layout-card:nth-child(5n+1),
 .layout-folder-shell .layout-card:nth-child(5n+4){
  transform:translate(-50%,-50%) translateY(var(--wave-y)) rotateZ(0deg)!important
 }
 .layout-folder-shell .layout-card:hover,
 .layout-folder-shell .layout-card:focus-visible{
  transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 38px)) rotateZ(0deg) scale(1.22)!important
 }
 .layout-folder-shell .layout-card.is-lifted{
  transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 60px)) rotateZ(0deg) scale(1.48)!important
 }
}

/* Layout archive: a tightly gathered paper wave. Nearby pages rise in sequence;
   a deliberate hover lets one page float clear for close inspection. */
.layout-folder-shell{padding-inline:clamp(18px,3vw,44px)!important}
.layout-folder-shell .portfolio-gallery{
 display:flex!important;grid-template-columns:none!important;align-items:center!important;
 gap:0!important;width:100%!important;min-height:clamp(430px,43vw,640px)!important;
 padding:clamp(108px,11vw,160px) clamp(24px,4vw,68px) clamp(56px,7vw,94px)!important;
 overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-inline:contain;
 scroll-snap-type:x proximity;scroll-padding-inline:12%;isolation:isolate;
 perspective:1500px!important;transform:none!important;scrollbar-width:thin;
 scrollbar-color:rgba(76,91,72,.35) transparent
}
.layout-folder-shell .layout-card,
.layout-folder-shell .layout-card:nth-child(5n+1),
.layout-folder-shell .layout-card:nth-child(5n+4){
 --wave-y:0px;--wave-rotate:0deg;--wave-scale:1;
 position:relative!important;z-index:var(--stack-z)!important;
 flex:0 0 clamp(190px,15vw,250px)!important;width:clamp(190px,15vw,250px)!important;
 min-width:clamp(190px,15vw,250px)!important;height:auto!important;aspect-ratio:3/4!important;
 margin-left:clamp(-166px,-10vw,-118px)!important;scroll-snap-align:center;
 transform-origin:50% 92%!important;
 transform:translate3d(0,calc(var(--base-y) + var(--wave-y)),0)
           rotate(calc(var(--base-rotate) + var(--wave-rotate))) scale(var(--wave-scale))!important;
 transition:transform .34s cubic-bezier(.2,.78,.18,1),box-shadow .34s ease,filter .34s ease!important;
 will-change:transform;filter:saturate(.92) brightness(.98)
}
.layout-folder-shell .layout-card:first-child{margin-left:0!important}
.layout-folder-shell .layout-card:hover,.layout-folder-shell .layout-card:focus-visible{
 z-index:120!important;box-shadow:10px 24px 42px rgba(48,37,24,.3)!important;
 filter:saturate(1) brightness(1.025)
}
.layout-folder-shell .layout-card.is-lifted{
 z-index:240!important;
 transform:translate3d(0,calc(var(--base-y) + var(--wave-y) - 92px),80px)
           rotate(0deg) scale(1.68)!important;
 box-shadow:18px 36px 72px rgba(43,33,22,.36)!important;filter:none!important
}
.layout-folder-shell .layout-card span{opacity:.72;transition:opacity .25s ease}
.layout-folder-shell .layout-card.is-lifted span{opacity:1}

@media(max-width:720px){
 .layout-folder-shell{padding:20px 8px 28px!important}
 .layout-folder-shell .portfolio-gallery{
  display:flex!important;grid-template-columns:none!important;min-height:390px!important;
  padding:88px 24px 54px!important;overflow-x:auto!important;overflow-y:visible!important;
  scroll-snap-type:x mandatory!important;touch-action:pan-x
 }
 .layout-folder-shell .layout-card,
 .layout-folder-shell .layout-card:nth-child(5n+1),
 .layout-folder-shell .layout-card:nth-child(5n+4){
  flex-basis:178px!important;width:178px!important;min-width:178px!important;
  margin-left:-112px!important;transform:translate3d(0,var(--mobile-base-y),0)
  rotate(var(--mobile-base-rotate))!important
 }
 .layout-folder-shell .layout-card:first-child{margin-left:0!important}
 .layout-folder-shell .layout-card:hover,.layout-folder-shell .layout-card:focus-visible{
  transform:translate3d(0,calc(var(--mobile-base-y) - 28px),30px) rotate(0deg) scale(1.18)!important
 }
}

@media(prefers-reduced-motion:reduce){
 .layout-folder-shell .layout-card{transition:none!important;--wave-y:0px!important;--wave-rotate:0deg!important;--wave-scale:1!important}
}

/* Visual matrix: all works appear at once as a three-row tarot array.
   The dark glass field replaces the former folder/bookshelf metaphor. */
.visual-section{overflow:visible!important}
.layout-folder-tab,.layout-folder-hint{display:none!important}
.layout-folder-shell{
 position:relative!important;isolation:isolate!important;overflow:visible!important;
 width:100%!important;height:auto!important;padding:clamp(22px,2.4vw,38px)!important;
 border:1px solid rgba(138,198,255,.28)!important;border-radius:clamp(24px,3vw,46px)!important;
 background:
  radial-gradient(circle at 16% 12%,rgba(85,141,255,.3),transparent 29%),
  radial-gradient(circle at 85% 82%,rgba(142,83,255,.24),transparent 32%),
  linear-gradient(145deg,#07101f 0%,#0c1730 48%,#080e1b 100%)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 80px rgba(57,122,255,.08),0 32px 90px rgba(16,29,54,.22)!important;
 transform:none!important
}
.layout-folder-shell:before{
 content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:-1!important;
 border-radius:inherit!important;pointer-events:none!important;opacity:.32!important;
 background-image:linear-gradient(rgba(120,181,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(120,181,255,.09) 1px,transparent 1px)!important;
 background-size:42px 42px!important;mask-image:linear-gradient(to bottom,black,transparent 92%)
}
.layout-folder-shell:after{
 content:""!important;display:block!important;position:absolute!important;left:8%!important;right:8%!important;bottom:8%!important;height:1px!important;
 background:linear-gradient(90deg,transparent,#73baff 30%,#a58bff 70%,transparent)!important;
 box-shadow:0 0 20px #73baff!important;opacity:.78!important;pointer-events:none!important
}
.layout-stage-meta{
 display:flex;align-items:center;justify-content:space-between;gap:20px;
 padding:2px 4px 18px;color:#b7d9ff;font:500 clamp(9px,.75vw,12px)/1.2 var(--mono);
 letter-spacing:.18em;text-transform:uppercase
}
.layout-stage-meta b{font-weight:500;color:#a99cff}
.layout-folder-shell .portfolio-gallery{
 display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;
 grid-template-rows:repeat(3,auto)!important;align-items:center!important;
 gap:clamp(6px,.72vw,13px)!important;width:100%!important;height:auto!important;
 min-height:0!important;padding:clamp(32px,3.5vw,58px) clamp(6px,1vw,18px) clamp(58px,5.5vw,92px)!important;
 overflow:visible!important;scroll-snap-type:none!important;perspective:1200px!important;
 scrollbar-width:none!important;isolation:isolate!important
}
.layout-folder-shell .portfolio-gallery::-webkit-scrollbar{display:none!important}
.layout-folder-shell .layout-card,
.layout-folder-shell .layout-card:nth-child(5n+1),
.layout-folder-shell .layout-card:nth-child(5n+4){
 --wave-x:0px;--wave-y:0px;--wave-rotate:0deg;--wave-scale:1;
 position:relative!important;grid-column:var(--matrix-column)!important;grid-row:var(--matrix-row)!important;
 z-index:var(--stack-z)!important;flex:none!important;width:100%!important;min-width:0!important;height:auto!important;
 aspect-ratio:3/4!important;margin:0!important;overflow:hidden!important;
 border:1px solid rgba(154,207,255,.48)!important;border-radius:clamp(5px,.65vw,10px)!important;
 background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(227,237,255,.9))!important;
 box-shadow:0 10px 22px rgba(0,5,19,.44),0 0 0 1px rgba(101,164,255,.08)!important;
 transform-origin:50% 100%!important;
 transform:translate3d(var(--wave-x),calc(var(--base-y) + var(--wave-y)),0)
  rotate(calc(var(--base-rotate) + var(--wave-rotate))) rotateY(var(--base-tilt)) scale(var(--wave-scale))!important;
 transition:transform .38s cubic-bezier(.18,.74,.2,1),box-shadow .38s ease,filter .38s ease!important;
 will-change:transform;filter:saturate(.86) brightness(.9)!important
}
.layout-folder-shell .layout-card img{background:#eef3ff!important}
.layout-folder-shell .layout-card span{
 position:absolute!important;left:6px!important;bottom:6px!important;z-index:2!important;
 padding:4px 6px!important;border:1px solid rgba(162,211,255,.28)!important;border-radius:999px!important;
 background:rgba(5,14,30,.7)!important;color:#d8edff!important;backdrop-filter:blur(8px)!important;
 font-size:clamp(6px,.48vw,8px)!important;letter-spacing:.12em!important;opacity:.72!important
}
.layout-folder-shell .layout-card:hover,.layout-folder-shell .layout-card:focus-visible{
 z-index:180!important;filter:saturate(1.04) brightness(1.06)!important;
 box-shadow:0 18px 42px rgba(0,5,19,.6),0 0 25px rgba(100,176,255,.42)!important
}
.layout-folder-shell .layout-card.is-lifted{
 z-index:400!important;
 transform:translate3d(var(--wave-x),calc(var(--base-y) + var(--wave-y) - 54px),190px)
  rotate(0deg) rotateY(0deg) scale(2.15)!important;
 box-shadow:0 38px 80px rgba(0,3,15,.75),0 0 44px rgba(111,183,255,.55)!important;
 filter:saturate(1.05) brightness(1.07)!important
}

@media(max-width:900px){
 .layout-folder-shell{padding:18px 12px 24px!important;border-radius:24px!important}
 .layout-stage-meta{padding-inline:4px;font-size:8px}.layout-stage-meta b{display:none}
 .layout-folder-shell .portfolio-gallery{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-template-rows:none!important;
  gap:8px 5px!important;padding:24px 4px 45px!important
 }
 .layout-folder-shell .layout-card,
 .layout-folder-shell .layout-card:nth-child(5n+1),
 .layout-folder-shell .layout-card:nth-child(5n+4){
  grid-column:auto!important;grid-row:auto!important;transform:translate3d(0,0,0) rotate(0deg)!important
 }
 .layout-folder-shell .layout-card:hover,.layout-folder-shell .layout-card:focus-visible{
  transform:translate3d(0,-14px,35px) rotate(0deg) scale(1.34)!important
 }
 .layout-folder-shell .layout-card.is-lifted{transform:translate3d(0,-24px,80px) rotate(0deg) scale(1.55)!important}
}

/* Contact finale: keep the complete contact group on the visual centerline. */
#about.about-section{
 grid-template-columns:minmax(0,1fr)!important;
 grid-template-rows:1fr auto!important;
 gap:28px!important;
 place-items:center!important
}
#about .about-left{display:none!important}
#about .about-right{
 grid-column:1!important;
 align-self:center!important;
 justify-self:center!important;
 box-sizing:border-box!important;
 width:min(820px,calc(100vw - 180px))!important;
 max-width:none!important;
 margin:0 auto!important;
 text-align:center!important
}
#about .about-contact{width:100%!important;margin-inline:auto!important}
#about .contact-copy{text-align:left!important}
#about .about-footer{grid-column:1!important;width:100%!important}
@media(max-width:720px){
 #about .about-right{width:calc(100vw - 54px)!important}
}

/* Full-screen, media-first viewer. Images and videos are mutually exclusive,
   centered and always shown without cropping, regardless of source ratio. */
.project-dialog [hidden]{display:none!important}
.project-dialog[open]{
 position:fixed!important;inset:0!important;
 width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;
 margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
 overflow:hidden!important;background:rgba(9,12,14,.985)!important;color:#eef2ef!important
}
.project-dialog::backdrop{background:rgba(5,7,8,.82)!important;backdrop-filter:blur(12px)!important}
.project-dialog .dialog-media{
 position:absolute!important;inset:0!important;z-index:1!important;
 width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
 display:grid!important;place-items:center!important;padding:clamp(10px,1.8vw,28px)!important;
 overflow:hidden!important;background:#050607!important
}
.project-dialog .dialog-media>video,
.project-dialog .dialog-media>img{
 grid-area:1/1!important;display:block!important;
 width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
 margin:auto!important;padding:0!important;border:0!important;border-radius:0!important;
 object-fit:contain!important;object-position:50% 50%!important;
 background:#050607!important;transform:none!important
}
.project-dialog.is-image-media .dialog-media>img{background:transparent!important}
.project-dialog .dialog-copy{
 position:absolute!important;z-index:6!important;left:clamp(16px,2.2vw,36px)!important;bottom:clamp(16px,2.2vw,34px)!important;
 width:min(390px,calc(100vw - 100px))!important;height:auto!important;min-height:0!important;
 padding:15px 18px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:18px!important;
 background:rgba(12,17,20,.58)!important;box-shadow:0 12px 36px rgba(0,0,0,.22)!important;
 backdrop-filter:blur(20px) saturate(1.12)!important;pointer-events:none!important
}
.project-dialog .dialog-copy .eyebrow{margin:0 0 5px!important;font-size:10px!important;line-height:1.3!important}
.project-dialog .dialog-copy h3{margin:0!important;font-size:clamp(22px,2.25vw,36px)!important;line-height:1.08!important}
.project-dialog .dialog-copy>p:not(.eyebrow){display:none!important}
.project-dialog .dialog-count{margin:8px 0 0!important;padding:8px 0 0!important;font-size:9px!important;line-height:1.2!important}
.project-dialog .dialog-close{
 position:fixed!important;z-index:20!important;top:clamp(14px,2vw,28px)!important;right:clamp(14px,2vw,28px)!important;
 width:54px!important;height:54px!important;border-radius:50%!important;
 background:rgba(10,14,17,.66)!important;border:1px solid rgba(255,255,255,.28)!important;
 color:#fff!important;backdrop-filter:blur(18px)!important
}
@media(max-width:720px){
 .project-dialog .dialog-media{padding:8px!important}
 .project-dialog .dialog-copy{left:12px!important;bottom:12px!important;width:min(300px,calc(100vw - 82px))!important;padding:10px 12px!important;border-radius:14px!important}
 .project-dialog .dialog-copy h3{font-size:20px!important}
 .project-dialog .dialog-close{top:12px!important;right:12px!important;width:46px!important;height:46px!important}
}

/* Domino ribbon — a continuous S-curve of upright works, not a grid. */
.layout-folder-shell{
 background:
  radial-gradient(circle at 22% 18%,rgba(255,255,255,.96),transparent 31%),
  radial-gradient(circle at 76% 72%,rgba(178,204,255,.5),transparent 38%),
  linear-gradient(135deg,rgba(220,235,255,.84),rgba(242,238,255,.72) 52%,rgba(205,229,255,.78))!important;
 border-color:rgba(255,255,255,.76)!important;
 box-shadow:inset 0 1px 0 #fff,inset 0 0 80px rgba(96,147,226,.12),0 32px 90px rgba(72,100,147,.2)!important;
 backdrop-filter:blur(30px) saturate(1.22)!important
}
.layout-folder-shell:before{
 opacity:.22!important;background-size:48px 48px!important;
 background-image:linear-gradient(rgba(73,119,190,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(73,119,190,.11) 1px,transparent 1px)!important
}
.layout-stage-meta{color:#4f6f9d!important}.layout-stage-meta b{color:#7168a8!important}
.layout-folder-shell .portfolio-gallery{
 position:relative!important;display:block!important;width:100%!important;
 height:clamp(520px,45vw,700px)!important;min-height:0!important;
 padding:0!important;overflow:visible!important;perspective:1350px!important;
 transform-style:preserve-3d!important
}
.layout-folder-shell .layout-card,
.layout-folder-shell .layout-card:nth-child(5n+1),
.layout-folder-shell .layout-card:nth-child(5n+4){
 --wave-x:0px;--wave-y:0px;--wave-rotate:0deg;--wave-tilt:0deg;--wave-scale:1;
 position:absolute!important;left:var(--matrix-x)!important;top:var(--matrix-y)!important;
 z-index:var(--stack-z)!important;display:block!important;
 width:clamp(106px,9.2vw,154px)!important;min-width:0!important;height:auto!important;
 aspect-ratio:3/4!important;margin:0!important;overflow:visible!important;
 border:1px solid rgba(255,255,255,.92)!important;border-radius:clamp(6px,.7vw,11px)!important;
 background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(210,226,255,.96))!important;
 box-shadow:0 14px 28px rgba(45,71,116,.26),0 0 0 1px rgba(73,131,224,.18)!important;
 transform-origin:50% 100%!important;transform-style:preserve-3d!important;
 transform:translate(-50%,-50%) translate3d(var(--wave-x),var(--wave-y),calc(var(--base-depth) + 0px))
  rotateZ(calc(var(--base-rotate) + var(--wave-rotate)))
  rotateY(calc(var(--base-tilt) + var(--wave-tilt))) scale(var(--wave-scale))!important;
 transition:transform .42s cubic-bezier(.18,.76,.2,1),box-shadow .38s ease,filter .38s ease!important;
 filter:saturate(.9) brightness(.98)!important;will-change:transform
}
.layout-folder-shell .layout-card img{
 display:block!important;width:100%!important;height:100%!important;border-radius:inherit!important;
 background:rgba(247,250,255,.94)!important;box-shadow:inset 0 0 0 1px rgba(72,114,190,.08)!important
}
.layout-folder-shell .layout-card:after{
 content:""!important;display:block!important;position:absolute!important;z-index:-1!important;
 top:4px!important;right:-10px!important;width:11px!important;height:calc(100% - 8px)!important;
 border-radius:0 4px 4px 0!important;background:linear-gradient(180deg,#a9c6fa,#709be6 52%,#514f9c)!important;
 transform:rotateY(84deg)!important;transform-origin:left center!important;
 box-shadow:5px 0 14px rgba(53,87,145,.3)!important;pointer-events:none!important
}
.layout-folder-shell .layout-card span{opacity:0!important;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease!important}
.layout-folder-shell .layout-card:hover span,.layout-folder-shell .layout-card:focus-visible span,.layout-folder-shell .layout-card.is-lifted span{opacity:1!important;transform:translateY(0)}
.layout-folder-shell .layout-card:hover,.layout-folder-shell .layout-card:focus-visible{
 z-index:800!important;
 transform:translate(-50%,-50%) translate3d(var(--wave-x),var(--wave-y),calc(var(--base-depth) + 24px))
  rotateZ(calc(var(--base-rotate) + var(--wave-rotate)))
  rotateY(calc(var(--base-tilt) + var(--wave-tilt))) scale(var(--wave-scale))!important;
 box-shadow:0 24px 50px rgba(44,72,125,.4),0 0 34px rgba(96,157,255,.4)!important
}
.layout-folder-shell .layout-card.is-lifted{
 z-index:1200!important;
 transform:translate(-50%,-50%) translate3d(0,-44px,260px) rotateZ(0deg) rotateY(0deg) scale(2.08)!important;
 box-shadow:0 44px 90px rgba(31,52,94,.48),0 0 50px rgba(105,164,255,.58)!important;
 filter:saturate(1.05) brightness(1.04)!important
}

@media(max-width:900px){
 .layout-folder-shell .portfolio-gallery{display:block!important;height:520px!important;padding:0!important}
 .layout-folder-shell .layout-card,
 .layout-folder-shell .layout-card:nth-child(5n+1),
 .layout-folder-shell .layout-card:nth-child(5n+4){
  position:absolute!important;left:var(--matrix-x)!important;top:var(--matrix-y)!important;
  grid-column:auto!important;grid-row:auto!important;width:clamp(68px,18vw,86px)!important;
  transform:translate(-50%,-50%) translate3d(var(--wave-x),var(--wave-y),var(--base-depth))
   rotateZ(calc(var(--base-rotate) + var(--wave-rotate)))
   rotateY(calc(var(--base-tilt) + var(--wave-tilt))) scale(var(--wave-scale))!important
 }
 .layout-folder-shell .layout-card:hover,.layout-folder-shell .layout-card:focus-visible{
  transform:translate(-50%,-50%) translate3d(var(--wave-x),var(--wave-y),70px)
   rotateZ(0deg) rotateY(0deg) scale(1.45)!important
 }
 .layout-folder-shell .layout-card.is-lifted{
  transform:translate(-50%,-50%) translate3d(0,-28px,120px) rotateZ(0deg) rotateY(0deg) scale(1.7)!important
 }
}

/* Never let historical display rules reveal a previous media element. */
#projectDialog #dialogVideo[hidden],
#projectDialog #dialogImage[hidden],
#projectDialog #videoPlaceholder[hidden]{display:none!important}

/* Long ground ribbon: a neutral liquid-glass viewport reveals only the centre
   of a much wider domino sequence. Cursor edges navigate the hidden ends. */
.layout-folder-shell{
 overflow:visible!important;
 background:
  radial-gradient(circle at 28% 18%,rgba(255,255,255,.92),transparent 31%),
  radial-gradient(circle at 76% 72%,rgba(228,235,218,.55),transparent 34%),
  linear-gradient(135deg,rgba(255,250,248,.78),rgba(244,246,238,.68))!important;
 border:1px solid rgba(255,255,255,.92)!important;
 box-shadow:inset 0 1px 0 #fff,inset 0 -30px 70px rgba(123,145,118,.05),0 24px 70px rgba(71,86,69,.12)!important;
 backdrop-filter:blur(28px) saturate(1.16)!important
}
.layout-folder-shell:before{
 display:block!important;content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;
 border-radius:inherit!important;background:linear-gradient(112deg,rgba(255,255,255,.58),transparent 28%,rgba(255,255,255,.2) 58%,transparent)!important
}
.layout-folder-shell:after{display:none!important}
.layout-stage-meta{position:relative!important;z-index:4!important;color:#627468!important}
.layout-stage-meta b{color:#8d7781!important}
.layout-gallery-viewport{
 position:relative!important;z-index:2!important;width:100%!important;height:clamp(500px,43vw,650px)!important;
 overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;overscroll-behavior-inline:contain!important;
 mask-image:linear-gradient(90deg,transparent 0,black 7%,black 93%,transparent 100%);
 cursor:default;transition:filter .3s ease!important
}
.layout-gallery-viewport::-webkit-scrollbar{display:none!important}
.layout-gallery-viewport.is-edge-travelling{filter:saturate(1.04)}
.layout-folder-shell .portfolio-gallery{
 position:relative!important;display:block!important;
 width:max(2500px,235vw)!important;height:100%!important;min-height:0!important;padding:0!important;
 perspective:1500px!important;perspective-origin:50% 33%!important;transform-style:preserve-3d!important;
 background:
  radial-gradient(ellipse at 50% 76%,rgba(75,87,70,.18),transparent 48%),
  linear-gradient(180deg,transparent 0 61%,rgba(255,255,255,.28) 62%,transparent 78%)!important
}
.layout-folder-shell .layout-card,
.layout-folder-shell .layout-card:nth-child(5n+1),
.layout-folder-shell .layout-card:nth-child(5n+4){
 width:clamp(118px,8.2vw,150px)!important;
 transform-origin:50% 100%!important;
 transform:translate(-50%,-50%) translate3d(var(--wave-x),var(--wave-y),var(--base-depth))
  rotateZ(calc(var(--base-rotate) + var(--wave-rotate)))
  rotateX(76deg) rotateY(calc(var(--base-tilt) + var(--wave-tilt))) scale(var(--wave-scale))!important;
 border:1px solid rgba(255,255,255,.9)!important;
 background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(231,235,225,.9))!important;
 box-shadow:9px 14px 18px rgba(73,82,68,.2),1px 2px 0 rgba(118,134,111,.23),inset 0 1px 0 #fff!important;
 filter:saturate(.9) brightness(.99)!important;
 transition:transform .5s cubic-bezier(.16,.82,.18,1),box-shadow .42s ease,filter .42s ease!important
}
.layout-folder-shell .layout-card:after{
 right:-8px!important;width:9px!important;background:linear-gradient(180deg,#f8f7f0,#cfd8ca 52%,#9aaa98)!important;
 box-shadow:5px 0 12px rgba(67,82,67,.2)!important
}
.layout-folder-shell .layout-card:hover,
.layout-folder-shell .layout-card:focus-visible{
 z-index:1600!important;
 transform:translate(-50%,-50%) translate3d(0,-72px,240px) rotateZ(0deg) rotateX(0deg) rotateY(0deg) scale(1.55)!important;
 filter:saturate(1.03) brightness(1.04)!important;
 box-shadow:0 48px 86px rgba(67,77,65,.35),0 0 0 1px rgba(255,255,255,.94),0 0 38px rgba(205,220,199,.72)!important
}
.layout-folder-shell .layout-card.is-lifted{
 z-index:1800!important;
 transform:translate(-50%,-50%) translate3d(0,-92px,320px) rotateZ(0deg) rotateX(0deg) rotateY(0deg) scale(1.92)!important;
 box-shadow:0 58px 110px rgba(61,71,59,.42),0 0 50px rgba(211,224,206,.78)!important
}

/* Image-only visual viewer: fully clear any video left by the previous card. */
.project-dialog.is-visual-image #dialogVideo,
.project-dialog.is-visual-image #videoPlaceholder{display:none!important}
.project-dialog.is-visual-image #dialogImage{
 display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important
}

@media(max-width:900px){
 .layout-gallery-viewport{height:520px!important;mask-image:linear-gradient(90deg,transparent,black 5%,black 95%,transparent)!important}
 .layout-folder-shell .portfolio-gallery{width:2600px!important;height:100%!important}
 .layout-folder-shell .layout-card,
 .layout-folder-shell .layout-card:nth-child(5n+1),
 .layout-folder-shell .layout-card:nth-child(5n+4){width:84px!important}
 .layout-folder-shell .layout-card:hover,
 .layout-folder-shell .layout-card:focus-visible{
  transform:translate(-50%,-50%) translate3d(0,-42px,120px) rotateZ(0deg) rotateX(0deg) rotateY(0deg) scale(1.4)!important
 }
 .layout-folder-shell .layout-card.is-lifted{
  transform:translate(-50%,-50%) translate3d(0,-54px,160px) rotateZ(0deg) rotateX(0deg) rotateY(0deg) scale(1.62)!important
 }
}

/* Experience work strips: site-matched liquid glass plus edge-hover travel. */
#experienceProjects .experience-works{
 gap:clamp(10px,1vw,15px)!important;padding:18px 16px 22px!important;
 overflow-x:auto!important;overflow-y:visible!important;scroll-behavior:auto!important;
 scrollbar-width:none!important;overscroll-behavior-inline:contain!important;
 background:linear-gradient(90deg,rgba(241,248,240,.82),rgba(250,243,247,.72),rgba(236,246,240,.82))!important;
 border:1px solid rgba(255,255,255,.78)!important;border-radius:28px!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.96),inset 0 -12px 28px rgba(130,170,142,.06),0 18px 48px rgba(72,103,81,.1)!important;
 backdrop-filter:blur(24px) saturate(1.22)!important;
 mask-image:linear-gradient(90deg,transparent 0,black 22px,black calc(100% - 22px),transparent 100%);
 transition:box-shadow .28s ease,border-color .28s ease!important
}
#experienceProjects .experience-works::-webkit-scrollbar{display:none!important}
#experienceProjects .experience-works.is-edge-scrolling{
 border-color:rgba(134,187,146,.62)!important;
 box-shadow:inset 0 1px 0 #fff,0 20px 56px rgba(78,116,88,.16),0 0 28px rgba(151,204,164,.15)!important
}
#experienceProjects .experience-work{
 flex:0 0 clamp(112px,9.5vw,146px)!important;width:clamp(112px,9.5vw,146px)!important;
 height:clamp(116px,9.5vw,146px)!important;overflow:hidden!important;
 border:1px solid rgba(255,255,255,.88)!important;border-radius:24px!important;
 background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(224,239,228,.54))!important;
 box-shadow:inset 0 1px 0 #fff,inset 0 -12px 28px rgba(96,138,106,.09),0 12px 26px rgba(69,94,74,.15)!important;
 backdrop-filter:blur(18px) saturate(1.18)!important;
 transition:transform .34s cubic-bezier(.2,.78,.2,1),box-shadow .34s ease,border-color .34s ease!important
}
#experienceProjects .experience-work img,#experienceProjects .experience-work video{
 object-fit:contain!important;background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(227,239,230,.38))!important;
 filter:saturate(.93) contrast(.98)!important
}
#experienceProjects .experience-work span{
 left:9px!important;right:9px!important;bottom:9px!important;width:auto!important;
 padding:7px 9px!important;border:1px solid rgba(255,255,255,.54)!important;border-radius:999px!important;
 background:rgba(45,67,51,.66)!important;color:#f8fff9!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22)!important;backdrop-filter:blur(12px)!important;
 text-align:center!important;font-size:9px!important
}
#experienceProjects .experience-work:hover,#experienceProjects .experience-work:focus-visible{
 z-index:30!important;transform:translateY(-10px) scale(1.06)!important;
 border-color:rgba(255,255,255,1)!important;
 box-shadow:inset 0 1px 0 #fff,0 24px 48px rgba(57,89,67,.22),0 0 28px rgba(160,208,170,.18)!important
}

@media(max-width:720px){
 #experienceProjects .experience-works{padding:12px 10px 16px!important;border-radius:20px!important;mask-image:none!important}
 #experienceProjects .experience-work{flex-basis:112px!important;width:112px!important;height:112px!important;border-radius:19px!important}
}

/* Single diagonal S domino line. Every page starts almost edge-on;
   hovering is the gesture that reveals the complete work. */
.layout-folder-shell .portfolio-gallery{
 height:clamp(650px,58vw,860px)!important;
 perspective:1500px!important;
 perspective-origin:50% 42%!important
}
.layout-folder-shell .layout-card,
.layout-folder-shell .layout-card:nth-child(5n+1),
.layout-folder-shell .layout-card:nth-child(5n+4){
 width:clamp(112px,9vw,150px)!important;
 transform-origin:50% 100%!important;
 transform:translate(-50%,-50%) translate3d(var(--wave-x),var(--wave-y),var(--base-depth))
  rotateZ(calc(var(--base-rotate) + var(--wave-rotate)))
  rotateY(calc(var(--base-tilt) + var(--wave-tilt))) scale(var(--wave-scale))!important;
 filter:saturate(.82) brightness(.96)!important;
 box-shadow:8px 18px 28px rgba(56,76,121,.2),0 0 0 1px rgba(255,255,255,.78)!important
}
.layout-folder-shell .layout-card:hover,
.layout-folder-shell .layout-card:focus-visible{
 z-index:1600!important;
 transform:translate(-50%,-50%) translate3d(0,-34px,210px)
  rotateZ(0deg) rotateY(0deg) scale(1.62)!important;
 filter:saturate(1.04) brightness(1.04)!important;
 box-shadow:0 42px 84px rgba(37,57,104,.42),0 0 44px rgba(109,166,255,.48)!important
}
.layout-folder-shell .layout-card.is-lifted{
 z-index:1800!important;
 transform:translate(-50%,-50%) translate3d(0,-48px,280px)
  rotateZ(0deg) rotateY(0deg) scale(2.02)!important;
 box-shadow:0 52px 100px rgba(31,49,94,.48),0 0 56px rgba(116,175,255,.56)!important
}
@media(max-width:900px){
 .layout-folder-shell .portfolio-gallery{height:600px!important}
 .layout-folder-shell .layout-card,
 .layout-folder-shell .layout-card:nth-child(5n+1),
 .layout-folder-shell .layout-card:nth-child(5n+4){width:clamp(72px,18vw,90px)!important}
 .layout-folder-shell .layout-card:hover,
 .layout-folder-shell .layout-card:focus-visible{
  transform:translate(-50%,-50%) translate3d(0,-20px,100px) rotateZ(0deg) rotateY(0deg) scale(1.45)!important
 }
 .layout-folder-shell .layout-card.is-lifted{
  transform:translate(-50%,-50%) translate3d(0,-28px,140px) rotateZ(0deg) rotateY(0deg) scale(1.7)!important
 }
}

/* Definitive media viewer: preserve every source pixel and its natural ratio. */
#projectDialog[open],
#projectDialog.is-portrait-video[open],
#projectDialog.is-landscape-video[open]{
 position:fixed!important;
 inset:0!important;
 box-sizing:border-box!important;
 width:100vw!important;
 height:100dvh!important;
 max-width:none!important;
 max-height:none!important;
 margin:0!important;
 padding:0!important;
 display:grid!important;
 grid-template-columns:minmax(0,1fr)!important;
 grid-template-rows:minmax(0,1fr) auto!important;
 overflow:hidden!important;
 border:0!important;
 border-radius:0!important;
 background:#050607!important
}
#projectDialog .dialog-media{
 position:relative!important;
 inset:auto!important;
 grid-column:1!important;
 grid-row:1!important;
 box-sizing:border-box!important;
 width:100%!important;
 height:100%!important;
 min-width:0!important;
 min-height:0!important;
 padding:24px 72px 12px!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 overflow:hidden!important;
 background:#050607!important
}
#projectDialog #dialogVideo:not([hidden]),
#projectDialog #dialogImage:not([hidden]){
 position:static!important;
 display:block!important;
 flex:1 1 100%!important;
 width:100%!important;
 height:100%!important;
 min-width:0!important;
 min-height:0!important;
 max-width:100%!important;
 max-height:100%!important;
 aspect-ratio:auto!important;
 object-fit:contain!important;
 object-position:50% 50%!important;
 margin:auto!important;
 padding:0!important;
 border:0!important;
 border-radius:0!important;
 transform:none!important;
 background:#050607!important
}
#projectDialog .dialog-copy{
 position:relative!important;
 inset:auto!important;
 grid-column:1!important;
 grid-row:2!important;
 box-sizing:border-box!important;
 width:100%!important;
 height:auto!important;
 min-height:70px!important;
 padding:12px 96px 14px 28px!important;
 display:grid!important;
 grid-template-columns:auto minmax(0,1fr) auto!important;
 align-items:center!important;
 gap:18px!important;
 overflow:hidden!important;
 border:0!important;
 border-top:1px solid rgba(255,255,255,.13)!important;
 border-radius:0!important;
 background:rgba(10,13,14,.96)!important;
 backdrop-filter:blur(18px)!important;
 pointer-events:none!important
}
#projectDialog .dialog-copy .eyebrow{margin:0!important;white-space:nowrap!important}
#projectDialog .dialog-copy h3{margin:0!important;font-size:clamp(22px,2.3vw,38px)!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#projectDialog .dialog-copy>p:not(.eyebrow){display:none!important}
#projectDialog .dialog-count{margin:0!important;padding:0!important;border:0!important;white-space:nowrap!important}
#projectDialog .dialog-close{position:fixed!important;top:18px!important;right:20px!important;z-index:20!important}
@media(max-width:720px){
 #projectDialog .dialog-media{padding:58px 10px 8px!important}
 #projectDialog .dialog-copy{min-height:58px!important;padding:9px 14px!important;grid-template-columns:1fr auto!important;gap:8px!important}
 #projectDialog .dialog-copy .eyebrow{display:none!important}
 #projectDialog .dialog-copy h3{font-size:22px!important}
 #projectDialog .dialog-close{top:10px!important;right:10px!important}
}

/* FINAL layout motion — dense diagonal pages and a purely vertical magnet.
   Kept last so none of the archived visual experiments can override it. */
.layout-folder-shell .portfolio-gallery{
 display:block!important;
 position:relative!important;
 width:max(2500px,235vw)!important;
 height:clamp(560px,46vw,700px)!important;
 min-height:0!important;
 padding:0!important;
 overflow:visible!important;
 perspective:none!important;
 transform-style:flat!important
}
.layout-folder-shell .layout-card,
.layout-folder-shell .layout-card:nth-child(5n+1),
.layout-folder-shell .layout-card:nth-child(5n+4){
 position:absolute!important;
 left:var(--matrix-x)!important;
 top:var(--matrix-y)!important;
 z-index:var(--stack-z)!important;
 display:block!important;
 flex:none!important;
 width:clamp(128px,9vw,158px)!important;
 min-width:0!important;
 height:auto!important;
 aspect-ratio:3/4!important;
 margin:0!important;
 transform-origin:50% 100%!important;
 transform-style:flat!important;
 transform:translate(-50%,-50%) translateY(var(--wave-y)) rotateZ(var(--base-rotate))!important;
 transition:transform .4s cubic-bezier(.18,.78,.2,1),box-shadow .4s ease,filter .35s ease!important;
 filter:saturate(.92) brightness(.99)!important;
 box-shadow:12px 18px 25px rgba(62,74,65,.2),0 0 0 1px rgba(255,255,255,.86)!important
}
.layout-folder-shell .layout-card:hover,
.layout-folder-shell .layout-card:focus-visible{
 z-index:1600!important;
 transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 58px)) rotateZ(var(--base-rotate)) scale(1.025)!important;
 filter:saturate(1.02) brightness(1.03)!important;
 box-shadow:18px 48px 55px rgba(57,70,59,.34),0 0 0 1px rgba(255,255,255,.96)!important
}
.layout-folder-shell .layout-card.is-lifted{
 z-index:1800!important;
 transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 94px)) rotateZ(var(--base-rotate)) scale(1.055)!important;
 filter:saturate(1.03) brightness(1.035)!important;
 box-shadow:22px 68px 72px rgba(52,66,55,.38),0 0 0 1px rgba(255,255,255,.98)!important
}
@media(max-width:900px){
 .layout-folder-shell .portfolio-gallery{height:520px!important}
 .layout-folder-shell .layout-card,
 .layout-folder-shell .layout-card:nth-child(5n+1),
 .layout-folder-shell .layout-card:nth-child(5n+4){
  width:clamp(82px,20vw,104px)!important;
  transform:translate(-50%,-50%) translateY(var(--wave-y)) rotateZ(var(--base-rotate))!important
 }
 .layout-folder-shell .layout-card:hover,
 .layout-folder-shell .layout-card:focus-visible{
  transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 34px)) rotateZ(var(--base-rotate)) scale(1.02)!important
 }
 .layout-folder-shell .layout-card.is-lifted{
  transform:translate(-50%,-50%) translateY(calc(var(--wave-y) - 54px)) rotateZ(var(--base-rotate)) scale(1.04)!important
 }
}