/* ABNEGM — motion and complete project case studies */
[hidden]{display:none!important}
.reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:1001;pointer-events:none}
.reading-progress span{display:block;width:100%;height:100%;background:var(--brass);transform:scaleX(0);transform-origin:left}
html[dir="rtl"] .reading-progress span{transform-origin:right}
.reveal-pending{opacity:0}
.magnetic{transform:translate(var(--mag-x,0px),var(--mag-y,0px));transition:transform .3s var(--ease),background .25s,color .25s}
.page-wipe{position:fixed;inset:0;background:var(--ink);z-index:1000;transform:translateY(100%);transition:transform .22s cubic-bezier(.65,0,.35,1);pointer-events:none}
.is-leaving .page-wipe{transform:translateY(0);pointer-events:auto}
.project-cursor{position:fixed;z-index:85;pointer-events:none;background:var(--ink);color:var(--paper);font-family:'Manrope','IBM Plex Sans Arabic',sans-serif;font-size:11px;padding:12px 18px;white-space:nowrap;border-radius:40px;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .2s,transform .2s}
.project-cursor.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.motion-strip{background:var(--ink);color:var(--paper);padding:34px 0 38px;overflow:hidden}
.reel-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--pad);margin-bottom:25px}
.reel-heading .caps{font-size:11px;letter-spacing:.12em;color:#d3d5cc;min-width:0}
.reel-heading a{font-size:14px;border-bottom:1px solid #666960;padding-bottom:3px;white-space:nowrap}
.reel-actions{display:flex;gap:25px;align-items:center;flex-shrink:0}
.reel-toggle{border:0;background:transparent;color:#d3d5cc;font-size:12px;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
.reel-window{overflow:hidden;direction:ltr}
.reel-track{display:flex;width:max-content;animation:portfolio-reel 48s linear infinite;will-change:transform}
.reel-group{display:flex;gap:24px;padding-right:24px}
.reel-frame{width:252px;flex-shrink:0;margin:0}
.reel-frame img{width:252px;height:198px;object-fit:contain;background:#20221f}
.reel-frame figcaption{font-family:'Manrope',sans-serif;font-size:11px;margin-top:12px;max-width:250px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#d3d5cc}
.reel-paused .reel-track,.reel-window:hover .reel-track{animation-play-state:paused}
@keyframes portfolio-reel{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.portfolio-hero .inner{display:grid;grid-template-columns:1.5fr .6fr;gap:40px;align-items:end}
.portfolio-hero h1{font-size:clamp(43px,6.5vw,88px);line-height:1.3;max-width:20ch}
.portfolio-hero h1 em{display:block}
.archive-intro{font-size:17px;color:var(--muted);max-width:44ch}
.portfolio-hero .archive-total{font-size:clamp(80px,11vw,152px);font-family:'Manrope',sans-serif;line-height:.9;letter-spacing:-.08em;display:block}
.portfolio-hero .archive-count{display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.archive-count p{font-size:13px;color:var(--muted)}
.archive-panel{padding-top:0!important}
.portfolio-tools{position:sticky;top:85px;z-index:30;background:var(--paper);padding:25px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--hair);margin-bottom:28px}
.project-filters{display:flex;gap:10px 22px;flex-wrap:wrap}
.project-filters button{border:0;border-bottom:1px solid transparent;background:none;padding:6px 0;font-size:14px;color:var(--muted);white-space:nowrap}
.project-filters button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.project-filters .filter-count{font-family:'Manrope',sans-serif;font-size:10px;margin-inline-start:5px;vertical-align:super;color:var(--brass)}
.project-search{width:240px;flex-shrink:0}
.project-search input{width:100%;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--hair);padding:8px 1px;min-height:42px;border-radius:0}
.archive-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted);margin-bottom:38px}
.archive-meta a{border-bottom:1px solid var(--hair);padding-bottom:3px}
.project-item{min-width:0;position:relative}
.project-item .project-card{display:block}
.project-card .project-media{position:relative}
.project-card .project-media::after{content:'↗';position:absolute;inset-inline-end:15px;bottom:15px;width:36px;height:36px;display:grid;place-items:center;background:var(--paper);color:var(--ink);border-radius:50%;font-family:Arial,sans-serif;font-size:18px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.project-card:hover .project-media::after,.project-card:focus-visible .project-media::after{opacity:1;transform:translateY(0)}
.project-item .project-caption h3{font-size:21px;line-height:1.5}
.project-item .project-caption .category{font-size:12px;color:var(--muted);grid-column:1/-1}
.archive-empty{padding:80px 0;text-align:center;font-size:20px}
.archive-empty button{margin-top:15px;background:none;border:0;border-bottom:1px solid var(--ink);font-size:15px}
.case-hero{padding:57px var(--pad) 52px}
.case-hero .inner{max-width:var(--max);margin:auto}
.case-breadcrumb{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:38px}
.case-breadcrumb a{border-bottom:1px solid var(--hair);padding-bottom:2px}
.case-title-row{display:grid;grid-template-columns:1.5fr .55fr;gap:80px;align-items:end}
.case-title{font-family:'Manrope','IBM Plex Sans Arabic',sans-serif;font-size:clamp(34px,4.4vw,68px);font-weight:500;letter-spacing:-.045em;line-height:1.16;max-width:23ch;overflow-wrap:anywhere}
.case-title-row .case-meta{border-top:1px solid var(--hair);padding-top:18px;font-size:13px;color:var(--muted);display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.case-meta dt{font-size:11px;color:var(--muted);margin-bottom:4px}
.case-meta dd{font-size:14px;color:var(--ink)}
.case-cover{padding:0 var(--pad) 60px}
.case-cover .inner{max-width:var(--max);margin:auto;overflow:hidden;background:#f1f1ec}
.case-cover img{max-height:720px;width:100%;height:auto;aspect-ratio:1.62;object-fit:contain}
.case-introduction{padding:10px var(--pad) 72px}
.case-introduction>.inner{max-width:var(--max);margin:0 auto}
.case-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:30px;margin-bottom:28px;border-top:1px solid var(--hair);padding-top:25px}
.case-section-heading h2{font-size:clamp(27px,3vw,40px);font-weight:500;line-height:1.4}
.case-section-heading .case-number{font-family:'Manrope',sans-serif;font-size:12px;color:var(--brass);direction:ltr}
.case-summaries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 50px}
.case-summary h3{font-size:12px;font-weight:500;color:var(--brass);margin-bottom:13px}
.case-summary p{font-size:17px;line-height:1.85;color:var(--ink);max-width:48ch}
.case-analysis-note{font-size:12px;color:var(--muted);max-width:85ch;border-top:1px solid var(--hair2);padding-top:17px;margin-top:32px}
.case-materials{padding:0 var(--pad) 60px}
.case-materials>.inner{max-width:var(--max);margin:0 auto}
.case-description{max-width:900px;margin:0 auto 44px;font-size:17px;line-height:1.9;unicode-bidi:plaintext;overflow-wrap:anywhere}
.case-description p{margin-bottom:16px}
.case-gallery{direction:ltr}
.case-artwork{margin:0 0 14px;width:100%}
.case-artwork a{display:block}
.case-artwork img{width:100%;height:auto;object-fit:contain}
.case-artwork figcaption{font-family:'Manrope','IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--muted);line-height:1.7;padding:10px 0 20px;unicode-bidi:plaintext}
.media-collection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;margin-bottom:18px}
.media-collection .case-artwork{margin-bottom:0}
.case-text{max-width:900px;margin:48px auto;font-size:17px;line-height:1.9;unicode-bidi:plaintext;overflow-wrap:anywhere}
.case-text p,.case-text div{margin-bottom:16px}
.case-text h1,.case-text h2,.case-text h3{font-size:26px;line-height:1.5;margin:26px 0 12px;letter-spacing:0}
.case-text ul,.case-text ol{padding-inline-start:23px;margin:18px 0}
.case-text a{border-bottom:1px solid var(--hair);padding-bottom:2px}
.case-text img{max-width:100%}
.embedded-media{position:relative;aspect-ratio:var(--media-ratio,16/9);margin:18px auto 38px;max-width:1100px;background:var(--ink);overflow:hidden}
.embedded-media.is-portrait{max-width:540px}
.embedded-media iframe{width:100%;height:100%;display:block;border:0}
.embedded-media a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;position:absolute;inset:0;color:var(--paper);font-size:16px;background:linear-gradient(145deg,#252820,#11120f)}
.embedded-media .play-mark{height:66px;width:66px;display:grid;place-items:center;border:1px solid #757971;border-radius:50%;font-family:Arial,sans-serif;font-size:23px;transition:background .3s,transform .3s}
.embedded-media a:hover .play-mark{background:var(--brass);transform:scale(1.06)}
.case-credits{padding:32px 0;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;justify-content:space-between;gap:25px;font-size:13px}
.case-credits p{color:var(--muted);margin-bottom:9px}
.case-credits .contributors{display:flex;gap:20px;flex-wrap:wrap}
.case-credits a{border-bottom:1px solid var(--hair);padding-bottom:2px}
.case-next{padding:55px var(--pad) 60px;background:var(--ink);color:var(--paper)}
.case-next .inner{max-width:var(--max);margin:0 auto}
.case-next>a,.case-next .inner>a{display:grid;grid-template-columns:1.5fr .5fr;gap:50px;align-items:center}
.case-next p{font-size:12px;color:#aeb2a5;margin-bottom:16px}
.case-next h2{font-family:'Manrope','IBM Plex Sans Arabic',sans-serif;font-size:clamp(26px,3.8vw,56px);font-weight:500;line-height:1.3;letter-spacing:-.04em}
.case-next img{width:100%;height:auto;object-fit:contain}
.project-lightbox{border:0;background:var(--paper);color:var(--ink);padding:20px;width:min(1320px,94vw);height:92dvh;max-height:92dvh;max-width:94vw;margin:auto;overflow:hidden}
.project-lightbox::backdrop{background:rgba(10,12,9,.88)}
.project-lightbox[open]{display:flex;flex-direction:column;gap:15px}
.lightbox-top,.lightbox-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;font-size:12px}
.lightbox-top{min-height:38px}.lightbox-top>span{max-width:70%;line-height:1.5}
.lightbox-top>div{display:flex;gap:16px;align-items:center}
.project-lightbox button{border:0;background:none;color:var(--ink);font-size:12px;padding:8px;min-height:36px;min-width:36px}
.project-lightbox [data-close]{font-size:28px;line-height:1}
.project-lightbox [data-prev],.project-lightbox [data-next]{font-size:24px}
.lightbox-stage{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;background:#eee;direction:ltr}
.lightbox-stage img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.lightbox-stage.zoomed{display:block}.lightbox-stage.zoomed img{max-width:none;max-height:none;margin:auto}
.viewer-open{overflow:hidden}
@media(min-width:1440px){.case-title{font-size:68px}}
@media(max-width:1080px){.portfolio-tools{align-items:flex-start;top:76px;gap:20px}.project-filters{gap:8px 16px}.project-search{width:210px}.case-title-row{gap:40px}.case-summaries{gap:30px}.case-cover img{max-height:640px}}
@media(max-width:800px){.portfolio-hero .inner{grid-template-columns:1fr}.portfolio-hero .archive-count{display:none}.portfolio-tools{flex-direction:column;padding:19px 0;gap:12px;top:70px}.project-search{width:100%}.project-filters{width:100%;flex-wrap:nowrap;overflow-x:auto;padding:3px 2px 6px;scrollbar-width:none}.project-filters::-webkit-scrollbar{display:none}.project-filters button{font-size:13px}.case-title-row{grid-template-columns:1fr;gap:25px}.case-title{max-width:26ch;font-size:clamp(33px,6.4vw,52px)}.case-meta{max-width:500px}.case-summaries{grid-template-columns:repeat(2,minmax(0,1fr))}.case-cover img{aspect-ratio:1.28}.case-hero{padding-top:35px}.case-cover{padding-bottom:40px}.case-introduction{padding-bottom:50px}.case-next .inner>a{gap:25px;grid-template-columns:1fr .45fr}}
@media(max-width:640px){.reel-heading{gap:15px;margin-bottom:20px}.reel-actions{gap:16px}.reel-heading .caps{font-size:10px;letter-spacing:0}.reel-heading a{font-size:12px}.reel-toggle{font-size:11px}.motion-strip{padding:25px 0 29px}.reel-frame{width:180px}.reel-frame img{width:180px;height:141px}.reel-frame figcaption{max-width:180px;font-size:10px}.reel-group{gap:16px;padding-right:16px}.portfolio-hero h1{font-size:42px;max-width:18ch}.archive-intro{font-size:16px}.archive-meta{font-size:11px;margin-bottom:27px}.project-card .project-media::after{opacity:1;transform:none;width:30px;height:30px;inset-inline-end:10px;bottom:10px;font-size:16px}.case-breadcrumb{font-size:12px;margin-bottom:29px}.case-hero{padding-bottom:35px}.case-title{font-size:34px;line-height:1.25;letter-spacing:-.035em}.case-title-row .case-meta{font-size:12px;gap:15px}.case-cover{padding-inline:var(--pad);padding-bottom:28px}.case-summaries{grid-template-columns:1fr;gap:27px}.case-summary p{font-size:16px}.case-summary h3{font-size:12px;margin-bottom:8px}.case-analysis-note{font-size:11px;line-height:1.8}.case-section-heading{gap:20px;margin-bottom:25px}.case-section-heading h2{font-size:27px}.case-introduction{padding-bottom:45px}.case-description,.case-text{font-size:16px;line-height:1.9}.case-text{margin:30px auto}.media-collection{grid-template-columns:1fr;gap:10px}.case-materials{padding-bottom:38px}.case-credits{font-size:12px}.case-next{padding-top:35px;padding-bottom:38px}.case-next .inner>a{grid-template-columns:1fr;gap:24px}.case-next img{max-width:320px}.case-next h2{font-size:30px}.project-lightbox{padding:12px;width:96vw;max-width:96vw;height:90dvh;max-height:90dvh}.lightbox-top>span{max-width:62%;font-size:10px}.lightbox-top>div{gap:5px}.project-lightbox [data-zoom]{font-size:11px}.project-cursor{display:none}}
@media(prefers-reduced-motion:reduce){.reveal-pending{opacity:1}.reel-track{animation:none;transform:none;will-change:auto}.reel-group[aria-hidden="true"]{display:none}.page-wipe,.project-cursor{display:none}.magnetic{transform:none}.project-card:hover .project-media img{transform:none}.project-card .project-media::after{transition:none}.embedded-media a:hover .play-mark{transform:none}}
@media print{.motion-strip,.portfolio-tools,.project-cursor,.reading-progress,.page-wipe,.embedded-media,.case-next{display:none}.reveal-pending{opacity:1}.case-summaries{grid-template-columns:repeat(2,1fr)}.case-artwork{break-inside:avoid}}