/* Editorial website gallery: original captures in a navigable browser stack. */
.design>.design-subheading:has(+ #web-projects){display:block;margin-bottom:56px}
.design>.design-subheading:has(+ #web-projects) h3{font-size:clamp(55px,7vw,110px);line-height:1.12;margin-bottom:16px}
.design>.design-subheading:has(+ #web-projects) .small-label{font-size:15px;max-width:none}
.web-gallery{display:grid;grid-template-columns:minmax(200px,25%) minmax(0,1fr);gap:5%;align-items:start}
.web-index{padding-top:16px;min-width:0}
.web-index button{display:flex;align-items:center;text-align:start;width:100%;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);font-size:clamp(17px,1.8vw,26px);color:#b7bcb1;transition:color .25s,padding .25s}
.web-index button[aria-selected=true]{color:var(--accent);border-color:var(--accent);padding-inline-start:8px}
.web-index small{font-size:12px;font-weight:400;direction:ltr}.web-index button>span:not(.web-index-arrow){flex:1}.web-index-arrow{opacity:0;transition:opacity .25s}.web-index button[aria-selected=true] .web-index-arrow{opacity:1}
.web-gallery svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3}
.web-display{min-width:0;padding-top:22px}.web-frame{position:relative;isolation:isolate;border:1px solid #929b8166;border-radius:5px;background:#1b231c;box-shadow:0 20px 50px #0003}
.web-frame:before,.web-frame:after{content:'';position:absolute;inset:0;z-index:-1;border:1px solid #929b8166;border-radius:5px;background:#172019;transform:translate(-8px,-13px) rotate(-1.5deg);transform-origin:bottom left;pointer-events:none}
.web-frame:after{transform:translate(-16px,-25px) rotate(-3deg);z-index:-2;background:transparent}
[dir=rtl] .web-frame:before{transform:translate(8px,-13px) rotate(1.5deg);transform-origin:bottom right}[dir=rtl] .web-frame:after{transform:translate(16px,-25px) rotate(3deg);transform-origin:bottom right}
.web-chrome{display:flex;justify-content:space-between;align-items:center;gap:10px;height:32px;padding:0 13px;font-size:10px;color:#c6cbbf;direction:ltr;border-bottom:1px solid #929b8133}
.web-dots{display:flex;gap:5px}.web-dots i{width:5px;height:5px;border-radius:50%;background:#8e997f}.web-dots i:first-child{background:#d9d58e}.web-chrome>span:nth-child(2){max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-preview{display:block;aspect-ratio:1280/700;overflow:hidden;border-radius:0 0 4px 4px;background:#eee;touch-action:pan-y}
.web-preview img{display:block;width:100%;height:100%;object-fit:cover;animation:web-unfold .65s cubic-bezier(.16,1,.3,1) both}
@keyframes web-unfold{from{opacity:.3;clip-path:inset(0 0 100% 0);transform:scale(1.035)}to{opacity:1;clip-path:inset(0);transform:scale(1)}}
.web-caption{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:30px;animation:web-caption-in .45s both}
@keyframes web-caption-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.web-caption h4{font-size:clamp(34px,4.5vw,66px);line-height:1.15;font-weight:700;margin:0 0 9px}.web-caption p{font-size:14px;color:var(--muted);margin:0}.web-caption .outline{flex:none;font-size:12px;gap:20px;padding:14px 22px}
.web-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}.web-hint{font-size:11px;color:var(--muted)}.web-controls{display:flex;align-items:center;gap:12px}.web-controls>span{font-size:12px;margin-inline-end:10px;white-space:nowrap}.web-controls button{width:40px;height:40px;border:1px solid #929b8177;border-radius:50%;display:grid;place-items:center;transition:background .2s,color .2s}.web-controls button:hover{background:var(--accent);color:var(--paper)}
.web-index button:focus-visible,.web-controls button:focus-visible,.web-preview:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
@media(max-width:800px){.web-gallery{grid-template-columns:1fr;gap:30px}.web-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;padding-top:0}.web-index button{font-size:16px;padding:15px 0;gap:9px}.web-index small{font-size:10px}.web-index-arrow svg{width:16px}.web-display{padding-top:20px}.web-caption h4{font-size:34px}.web-caption{gap:18px;align-items:start}.web-caption .outline{font-size:10px;padding:10px 12px;gap:10px}.web-caption p{font-size:12px}.web-frame:after{transform:translate(-8px,-15px) rotate(-3deg)}[dir=rtl] .web-frame:after{transform:translate(8px,-15px) rotate(3deg)}.web-bottom{margin-top:20px}.web-hint{font-size:10px;max-width:40%}.web-controls{gap:9px}.web-controls button{width:35px;height:35px}.design>.design-subheading:has(+ #web-projects){margin-bottom:25px}.design>.design-subheading:has(+ #web-projects) h3{font-size:54px}.design>.design-subheading:has(+ #web-projects) .small-label{font-size:12px}.web-chrome{height:25px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.web-preview img,.web-caption{animation:none}.web-index button{transition:none}}
html[data-motion=off] .web-preview img,html[data-motion=off] .web-caption{animation:none}
@media(max-width:800px){.web-index{display:flex;overflow-x:auto;gap:22px;padding-block:0 10px;scrollbar-width:thin;scrollbar-color:#929b8155 transparent}.web-index button{flex:0 0 auto;width:auto;max-width:230px;min-width:125px;white-space:nowrap;font-size:16px;padding:16px 0}.web-index button>span:not(.web-index-arrow){flex:none}.web-gallery{gap:28px}.web-caption{flex-wrap:wrap}.web-caption h4{font-size:32px}}

/* One clean image frame keeps the original websites in focus. */
.web-frame{border-radius:2px;box-shadow:none;background:transparent}
.web-frame:before,.web-frame:after{content:none}
.web-preview{border-radius:1px}
.web-display{padding-top:0}
.web-bottom{justify-content:flex-end}