/* Original interface artwork is uniformly scaled once, inside stationary device frames. */
.project-preview{display:flex;position:relative;width:100%;height:100%;min-width:0;align-items:center;justify-content:center;gap:20px;padding:14px 12px;box-sizing:border-box;direction:ltr;overflow:visible;isolation:isolate}
.preview-fit{position:relative;display:block;flex:none;min-width:0;--preview-scale:.3}
.preview-native{display:block;position:absolute;left:0;top:0;transform:scale(var(--preview-scale));transform-origin:top left;box-sizing:border-box;text-align:left;font-family:Arial,sans-serif;line-height:normal}
.preview-handset{background:#181b20;box-shadow:inset 0 0 0 2px #999ca1,0 22px 45px -25px #17263270}
.preview-aperture{display:block;position:relative;overflow:hidden;background:white;isolation:isolate}
.preview-scroll-window{position:absolute;left:0;right:0;overflow:hidden;background:white}
.preview-scroll-window .preview-scroll-image{position:absolute;left:0;max-width:none!important;max-height:none!important;min-height:0!important;object-fit:contain!important;margin:0!important;border-radius:0!important;display:block;transform:none}
.preview-scroll-image.has-travel{animation:preview-content-scroll 16s cubic-bezier(.45,0,.25,1) infinite;animation-play-state:paused}
.preview-fixed{position:absolute;left:0;right:0;background-repeat:no-repeat;z-index:4;pointer-events:none}
.preview-fixed-top{top:0;background-position:center top}.preview-fixed-bottom{bottom:0;background-position:center bottom;background-color:#fff}
.preview-home-indicator{position:absolute;bottom:5px;left:37%;width:26%;height:4px;border-radius:9px;background:#191b22;z-index:5}
.preview-browser{padding:0 12px 12px;background:#25262b;border-radius:25px;box-shadow:inset 0 0 0 2px #aaa9ac,0 28px 50px -28px #23262e75;overflow:hidden}
.preview-browser-toolbar{display:flex;height:56px;align-items:center;gap:10px;padding:0 18px;color:#e5e6e9;background:#25262b;border-radius:25px 25px 0 0}
.preview-browser-toolbar>i{width:10px;height:10px;border-radius:50%;background:#a7a9ad}.preview-browser-toolbar>span{font-size:17px;letter-spacing:.025em;margin:auto}
.preview-browser-display{display:block;position:relative;overflow:hidden;border-radius:7px;background:#fff;isolation:isolate}
.preview-browser-display>.preview-original{display:block;width:100%!important;height:100%!important;object-fit:contain!important;max-width:none!important;max-height:none!important;border-radius:0!important;transform:none!important;margin:0!important}
.preview-film{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.preview-region{display:block;position:absolute;overflow:hidden;pointer-events:none;background:#fff}
.preview-region-art{display:block;position:absolute;inset:0;background-position:var(--crop-x) var(--crop-y);background-repeat:no-repeat;transform-origin:center;animation:preview-map-pan 12s ease-in-out infinite;animation-play-state:paused}
.preview-map{z-index:2;background:#111}
.preview-catalog-row{display:flex;z-index:2;background:white}
.preview-row-copy{display:block;flex:none;width:var(--row-width);height:100%;background-repeat:no-repeat;background-position:var(--crop-x) var(--crop-y);animation:preview-catalog-scroll 18s linear infinite;animation-play-state:paused}
.preview-focus{position:absolute;box-sizing:border-box;border:3px solid #ef966c;border-radius:12px;box-shadow:0 0 0 7px #ef966c18;animation:preview-focus-pulse 5s ease-in-out infinite;animation-play-state:paused;pointer-events:none}
.preview-is-running .preview-scroll-image.has-travel,.preview-is-running .preview-region-art,.preview-is-running .preview-row-copy,.preview-is-running .preview-focus{animation-play-state:running}
@keyframes preview-content-scroll{0%,17%,100%{transform:translateY(0)}48%,70%{transform:translateY(var(--scroll-travel))}}
@keyframes preview-catalog-scroll{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(calc(-1 * var(--row-width)))}}
@keyframes preview-map-pan{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
@keyframes preview-focus-pulse{0%,100%{opacity:.3}50%{opacity:1}}
/* One device geometry serves the work gallery and detailed studies. */
.preview-study{height:600px;max-height:72vh;padding:20px 14px;min-height:320px}
.screen-card .project-preview{height:560px;max-height:64vh;min-height:300px}
.screen-card .media-open:has(.project-preview){width:100%;max-width:none;background:transparent;display:block;padding:0;overflow:visible}
.screen-card .project-preview img{box-shadow:none!important}
.screen-gallery:has(.preview-phones){display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start}
.study-motion-layout{display:grid;grid-template-columns:minmax(230px,.7fr) minmax(0,1.7fr);gap:36px;align-items:center;padding:35px 0}
.study-motion-layout .study-motion-copy h3{font-size:clamp(25px,3vw,42px);line-height:1.12;margin:14px 0 20px;letter-spacing:-.035em}
.study-motion-copy>p{font-size:16px;line-height:1.7;max-width:34ch}
.study-motion-visual{min-width:0;background:color-mix(in srgb,var(--accent) 6%,#f6f3ee);border:1px solid #e4e1df;border-radius:20px;overflow:hidden;position:relative}
.study-motion-visual .preview-study{height:610px}
.study-motion-visual>.media-open{position:relative;inset:auto;display:inline-flex;width:auto;max-width:calc(100% - 32px);min-height:40px;margin:0 16px 16px;align-items:center;justify-content:center;z-index:8;padding:10px 14px;border:1px solid #d4d1cd;border-radius:24px;background:#fff;color:#282629;font-size:12px;line-height:1}
.study-motion-controls{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:18px 0;border-top:1px solid #dfdbd6}
.study-motion-controls>span{font-size:13px;color:#776e6b}
.study-motion-controls button{padding:12px 18px;border:1px solid currentColor;border-radius:25px;background:transparent;font:inherit;color:var(--accent)}
.study-sequence-tabs{display:flex;gap:8px;overflow:auto;padding:2px 0 12px;scrollbar-width:thin}
.study-sequence-tabs button{flex:1 0 140px;border:1px solid #d5d0cb;padding:15px 16px;text-align:start;font:inherit;line-height:1.4;background:transparent;color:#494341;border-radius:10px}
.study-sequence-tabs button>small{display:block;font-size:11px;letter-spacing:.12em;margin-bottom:8px;color:inherit}
.study-sequence-tabs button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:white}
.study-motion-visual .preview-focus{border-color:var(--accent,#aa634d)}
@media(max-width:800px){.project-preview{padding:12px 6px;gap:12px}.study-motion-layout{grid-template-columns:1fr;gap:22px}.study-motion-copy>p{max-width:none}.study-motion-visual .preview-study{height:510px;max-height:64vh}.study-motion-visual .preview-web{height:320px;min-height:180px;max-height:50vh}.screen-gallery:has(.preview-phones){display:grid;grid-template-columns:1fr}.screen-card .project-preview{height:480px;max-height:65vh}}
@media(prefers-reduced-motion:reduce){.project-preview *, .project-layers-preview *{animation:none!important;transition:none!important}}

.preview-tablet{position:relative;background:#16171a;box-shadow:inset 0 0 0 2px #3a3c41,0 0 0 1px #8d8f94,0 34px 60px -30px rgba(20,22,28,.6)}
.preview-tablet-cam{position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#2c2f35;box-shadow:inset 0 0 0 1.5px #44474e}

/* Prompt Engineering: three slides that explain how I work (swiss.js, peSlide), on the white of the page.
   1. a bento of projects, 2. the skills library, 3. the tools connected through one AI workflow.
   Sizes follow the frame (container units), so each slide fits the same frame as every other project. */
#work .slide-pe{
 --pe-ink:#17191c;--pe-soft:#6b6b67;--pe-line:#e2e2dd;--pe-card:#f0f0ed;--pe-red:#ef3b23;
 container:peo/size;display:block;position:relative;width:100%;height:100%;overflow:hidden;
 background:transparent !important;color:var(--pe-ink);text-align:start;white-space:normal;letter-spacing:0;font-weight:400;
}
#work .slide-pe .red{color:var(--pe-red)}
/* the content sits in a frame inset from the slide's edges, so it reads at the same scale as the devices in the
   other sections; on an upright tablet the inset is smaller, and on a phone the content uses the whole slide */
#work .slide-pe .pe-frame{position:absolute;inset:3% 8%;display:block;container:pe/size}
@container peo (aspect-ratio < 1.4){#work .slide-pe .pe-frame{inset:1.5% 3%}}
@container peo (max-width:480px){#work .slide-pe .pe-frame{inset:0}}

/* 1. Projects: a bento of five projects built from A to Z. Each card: the project's own image with a category
   chip, and its name under it. One tall card and four small ones in a wide frame; a wide card over two pairs
   in a narrow one. */
#work .slide-pe.pe-build{background:transparent !important}
#work .pe-build .pe-bento{
 --pe-cname:clamp(12px,min(1.7cqw,4cqh),22px);--pe-ctx:clamp(11px,min(1.38cqw,3.3cqh),17px);--pe-chip:clamp(9px,min(1.15cqw,2.8cqh),13px);
 position:absolute;inset:0;display:grid;gap:clamp(6px,1cqw,12px);
 grid-template-columns:1.08fr 1fr 1fr;grid-template-rows:1fr 1fr;
 grid-template-areas:"sdd shield kora" "sdd askmap sada";
}
#work .pe-build .pe-sdd{grid-area:sdd}#work .pe-build .pe-shield{grid-area:shield}#work .pe-build .pe-kora{grid-area:kora}
#work .pe-build .pe-askmap{grid-area:askmap}#work .pe-build .pe-sada{grid-area:sada}
#work .pe-build .pe-card{
 position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
 padding:clamp(5px,.8cqw,9px);border-radius:14px;background:#f0f0ed;color:#222;
}
#work .pe-build .pe-shot{position:relative;display:block;flex:1 1 auto;min-height:0;border-radius:9px;overflow:hidden;background:#d9d9d5}
#work .pe-build .pe-shot img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;border-radius:0}
#work .pe-build .pe-chip{
 position:absolute;top:clamp(6px,1cqw,10px);inset-inline-start:clamp(6px,1cqw,10px);display:inline-flex;align-items:center;gap:.55em;
 padding:.45em .75em .45em .5em;border-radius:6px;background:rgba(22,26,24,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
 color:#fff;font-size:var(--pe-chip);line-height:1.2;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
#work .pe-build .pe-chip i{flex:none;width:.95em;height:.95em;border-radius:2px;background:var(--pe-red)}
#work .pe-build .pe-chip-name{display:none;text-transform:none;letter-spacing:.01em}
#work .pe-build .pe-cap{flex:none;display:block;padding:clamp(6px,1.9cqh,10px) 3px 1px}
#work .pe-build .pe-cap b{display:block;margin:0;font-size:var(--pe-cname);font-weight:500;line-height:1.25;color:#1f1f1f}
#work .pe-build .pe-cap .pe-text{display:block;margin-top:1px;font-size:var(--pe-ctx);line-height:1.35;color:#6b6b68;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#work .pe-build .pe-sdd .pe-cap .pe-text{white-space:normal}
html[lang="ar"] #work .pe-build .pe-chip{letter-spacing:0}

@container pe (aspect-ratio < 1.4){
 #work .pe-build .pe-bento{grid-template-columns:1fr 1fr;grid-template-rows:1.3fr 1fr 1fr;grid-template-areas:"sdd sdd" "shield kora" "askmap sada";
  --pe-cname:clamp(12px,calc(6px + 1.9cqw),20px);--pe-ctx:clamp(10.5px,calc(5.5px + 1.5cqw),16px);--pe-chip:clamp(9px,calc(5px + 1.1cqw),12px)}
}
@container pe (aspect-ratio < 1.4) and (max-height:520px){
 #work .pe-build .pe-card:not(.pe-sdd) .pe-cap .pe-text{display:none}
}
@container pe (aspect-ratio < 1.4) and (max-height:250px){
 #work .pe-build .pe-cap{display:none}
 #work .pe-build .pe-chip-cat{display:none}
 #work .pe-build .pe-chip-name{display:inline}
}

/* 2. AI skills: the ShieldKey skill library. A header with the counts, then the skills as cards:
   id and kind on top, the name and the one job it does under them. One card in ink for rhythm. */
#work .pe-sk .sk-in{
 --sk-gap:clamp(6px,1cqw,12px);--sk-name:clamp(12.5px,min(1.75cqw,4.1cqh),22px);--sk-desc:clamp(11px,min(1.32cqw,3.2cqh),17px);
 --sk-tag:clamp(9.5px,min(1.12cqw,2.7cqh),13px);--sk-title:clamp(17px,min(2.9cqw,7cqh),40px);
 position:absolute;inset:0;display:flex;flex-direction:column;gap:clamp(10px,3cqh,22px);
}
#work .pe-sk .sk-head{flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:2px 2px 0}
#work .pe-sk .sk-title{display:block;font-size:var(--sk-title);line-height:1.08;font-weight:500;letter-spacing:-.035em}
#work .pe-sk .sk-stats{display:flex;gap:clamp(6px,.8cqw,10px)}
#work .pe-sk .sk-stats span{display:inline-flex;align-items:baseline;gap:.4em;padding:.5em .85em;border-radius:40px;background:var(--pe-card);font-size:var(--sk-desc);color:var(--pe-soft);white-space:nowrap}
#work .pe-sk .sk-stats b{font-weight:600;color:var(--pe-ink);font-size:1.15em}
#work .pe-sk .sk-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:var(--sk-gap)}
#work .pe-sk .sk-card{
 display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-width:0;min-height:0;overflow:hidden;
 padding:clamp(9px,1.4cqw,18px);border-radius:14px;background:var(--pe-card);
}
#work .pe-sk .sk-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 6px}
#work .pe-sk .sk-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--sk-tag);color:var(--pe-soft);letter-spacing:.02em;white-space:nowrap}
#work .pe-sk .sk-kind{font-size:var(--sk-tag);line-height:1.2;padding:.32em .6em;border-radius:6px;white-space:nowrap}
#work .pe-sk .k-ai{background:#fde7e3;color:#c3311d}
#work .pe-sk .k-code{background:#e6e6e1;color:#3c3c38}
#work .pe-sk .k-vision{background:#ece8ff;color:#5a3bf0}
#work .pe-sk .sk-name b{display:block;font-weight:500;font-size:var(--sk-name);line-height:1.22;letter-spacing:-.01em}
#work .pe-sk .sk-desc{display:block;margin-top:.3em;font-size:var(--sk-desc);line-height:1.35;color:var(--pe-soft)}
#work .pe-sk .sk-hl{background:var(--pe-ink);color:#f4f4f1}
#work .pe-sk .sk-hl .sk-id,#work .pe-sk .sk-hl .sk-desc{color:rgba(244,244,241,.66)}
#work .pe-sk .sk-hl .k-code{background:rgba(244,244,241,.14);color:#f4f4f1}
html[lang="ar"] #work .pe-sk .sk-title{letter-spacing:0;line-height:1.3}
html[lang="ar"] #work .pe-sk .sk-name b{letter-spacing:0;line-height:1.4}
html[lang="ar"] #work .pe-sk .sk-desc{line-height:1.5}
@container pe (aspect-ratio < 1.4){
 #work .pe-sk .sk-in{--sk-title:clamp(16px,calc(6px + 3.4cqw),34px);--sk-name:clamp(12px,calc(5.5px + 1.9cqw),20px);--sk-desc:clamp(10.5px,calc(5px + 1.5cqw),16px);--sk-tag:clamp(9px,calc(4.5px + 1.2cqw),12px)}
 #work .pe-sk .sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #work .pe-sk .sk-card:nth-child(n+7){display:none}
}
@container pe (aspect-ratio < 1.4) and (max-height:520px){
 #work .pe-sk .sk-desc{display:none}
 #work .pe-sk .sk-stats span{padding:.35em .7em}
}
@container pe (aspect-ratio < 1.4) and (max-height:300px){
 #work .pe-sk .sk-card:nth-child(n+5){display:none}
 #work .pe-sk .sk-stats{display:none}
}

/* 3. Automation: the connections. One drawing for a wide frame, one for a narrow or tall one. */
#work .pe-net .nt{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#work .pe-net .nt-tall,#work .pe-net .nt-compact,#work .pe-net .nt-mini{display:none}
@container pe (width <= 760px){#work .pe-net .nt-wide{display:none}#work .pe-net .nt-compact{display:block}}
@container pe (aspect-ratio >= 1.4) and ((width <= 560px) or (height <= 230px)){#work .pe-net .nt-wide,#work .pe-net .nt-compact{display:none}#work .pe-net .nt-mini{display:block}}
@container pe (aspect-ratio < 1.4){#work .pe-net .nt-wide,#work .pe-net .nt-compact,#work .pe-net .nt-mini{display:none}#work .pe-net .nt-tall{display:block}}
#work .pe-net .nt-compact .nt-t{font-size:24px}
#work .pe-net .nt-compact .nt-ht{font-size:24px}
#work .pe-net .nt-compact .nt-st{font-size:14px}
#work .pe-net .nt-compact .nt-okt{font-size:17px}
#work .pe-net .nt-mini .nt-t,#work .pe-net .nt-mini .nt-ht{font-size:22px}
#work .pe-net .nt-mini .nt-okt{font-size:16px}
#work .pe-net .nt-ln{fill:none;stroke:#d5d5cf;stroke-width:1.6}
#work .pe-net .nt-node{fill:#fff;stroke:#e1e1dc;stroke-width:1.2}
#work .pe-net .nt-chip{fill:#f1f1ee}
#work .pe-net .nt-ic{fill:none;stroke:#17191c;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#work .pe-net .nt-ic-hub{stroke:none;fill:#ef3b23}
#work .pe-net .nt-ic-ok{stroke:#17191c}
#work .pe-net .nt-t{font-size:19px;font-weight:500;fill:#17191c}
#work .pe-net .nt-s{font-size:14.5px;fill:#74746f}
#work .pe-net .nt-tall .nt-t{font-size:15px}
#work .pe-net .nt-hub{fill:#17191c}
#work .pe-net .nt-ht{font-size:20px;font-weight:500;fill:#f4f4f1}
#work .pe-net .nt-tall .nt-ht{font-size:17px}
#work .pe-net .nt-step{fill:rgba(244,244,241,.12)}
#work .pe-net .nt-st{font-size:12.5px;fill:rgba(244,244,241,.85)}
#work .pe-net .nt-ok{fill:#fff;stroke:#17191c;stroke-width:1.6}
#work .pe-net .nt-okt{font-size:14px;font-weight:500;fill:#17191c;paint-order:stroke;stroke:#fff;stroke-width:6px;stroke-linejoin:round}
#work .pe-net .nt-dot{fill:#ef3b23}
body.motion-paused #work .pe-net .nt-dot{display:none}
@media(prefers-reduced-motion:reduce){#work .pe-net .nt-dot{display:none}}

/* a wide frame with little room (smaller laptops, a narrow window): names only, in slightly larger type */
@container pe (max-width:720px) and (aspect-ratio >= 1.4){
 #work .pe-build .pe-card:not(.pe-sdd) .pe-cap .pe-text{display:none}
 #work .pe-build .pe-bento{--pe-cname:clamp(12.5px,min(2.15cqw,4.8cqh),16px)}
 #work .pe-sk .sk-desc{display:none}
 #work .pe-sk .sk-in{--sk-name:clamp(12.5px,min(2.1cqw,4.8cqh),16px)}
}
/* a small or short wide frame (a short laptop window, a small phone): the projects keep their images with the name
   on the chip; the skills drop the counts and ids and show one or two rows; the connections use the mini drawing */
@container pe (aspect-ratio >= 1.4) and ((width <= 560px) or (height <= 230px)){
 #work .pe-build .pe-cap,#work .pe-build .pe-chip-cat{display:none}
 #work .pe-build .pe-chip-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
 #work .pe-build .pe-chip{max-width:calc(100% - 2 * clamp(6px,1cqw,10px))}
 #work .pe-sk .sk-stats,#work .pe-sk .sk-id{display:none}
 #work .pe-sk .sk-card{gap:6px}
}
@container pe (aspect-ratio >= 1.4) and (width > 560px) and (height <= 230px){
 #work .pe-sk .sk-card:nth-child(n+5){display:none}
}
@container pe (aspect-ratio >= 1.4) and (width <= 560px){
 #work .pe-sk .sk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 #work .pe-sk .sk-card:nth-child(n+7){display:none}
}
@container pe (aspect-ratio >= 1.4) and (width <= 560px) and (height <= 190px){
 #work .pe-sk .sk-card:nth-child(n+4){display:none}
}
@container pe (aspect-ratio >= 1.4) and (width <= 340px){
 #work .pe-build .pe-chip i{display:none}
 #work .pe-build .pe-chip{padding-inline-start:.75em}
}

/* ==========================================================================
   Multimedia: the wall (wall.js). Mahdi's portrait drawn with the work: every square is a piece of work set by tone,
   with the portrait laid over it at --alpha. The wall covers the frame, pager and summary rows of the work view; those
   stay in place, hidden, so the page keeps the proportions every other category has. The portrait stands on the
   left in both languages (he looks towards the words), and the words sit beside it at the bottom, where the summary
   sits in the other categories. Narrow screens stack the words under the portrait.
   ========================================================================== */
html body #work .work-content[data-category="multimedia"] > #gallery,
html body #work .work-content[data-category="multimedia"] > .gallery-bottom,
html body #work .work-content[data-category="multimedia"] > #project-meta,
html body #work .work-content[data-category="multimedia"] > #gallery *,
html body #work .work-content[data-category="multimedia"] > .gallery-bottom *,
html body #work .work-content[data-category="multimedia"] > #project-meta *{visibility:hidden !important;pointer-events:none !important}
html body #work .work-content[data-category] > #mm-wall{
 grid-row:2 / 5 !important;grid-column:1 !important;align-self:stretch;justify-self:stretch;
 position:relative;z-index:2;min-height:0;height:auto !important;container:mmw/size;
}
#mm-wall .mw-in{position:absolute;inset:0;display:flex;flex-direction:row;direction:ltr;gap:clamp(24px,4.5cqw,56px)}
#mm-wall .mw-stage{position:relative;flex:0 0 auto;height:100%;width:min(calc(100cqh * 2 / 3),62cqw);container:mws/size}
#mm-wall .mw-board{
 --bw:min(100cqw,calc(100cqh * 2 / 3));--gap:clamp(1px,calc(var(--bw) / 190),3px);
 position:relative;width:var(--bw);height:calc(var(--bw) * 1.5);
}
#mm-wall .mw-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols,14),minmax(0,1fr));grid-template-rows:repeat(var(--rows,21),minmax(0,1fr));gap:var(--gap)}
#mm-wall .mw-t{
 position:relative;display:block;min-width:0;min-height:0;width:auto;height:auto;margin:0;padding:0;border:0;
 border-radius:calc(var(--gap) * .7);overflow:hidden;background:#dcdcd9;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
#mm-wall .mw-img{
 position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;opacity:0;border-radius:0;
 background-size:1200% 1000%;background-repeat:no-repeat;filter:grayscale(1) brightness(var(--b));transition:opacity .6s ease;
}
#mm-wall video.mw-img{inset:auto;left:var(--vx);top:var(--vy);width:400%;height:400%;object-fit:fill}
#mm-wall .mw-board.ready-1 .mw-t.a1 > .mw-img{background-image:url(./assets/wall/atlas-1.webp);opacity:1}
#mm-wall .mw-board.ready-v .mw-t.fv > .mw-img{opacity:1}
/* the portrait over each square: whole until the square's work has loaded, then at --alpha */
#mm-wall .mw-t::after{
 content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;
 background-size:var(--ts);background-position:var(--tp);opacity:1;transition:opacity .6s ease;
}
#mm-wall .mw-board.ready-tone .mw-t::after{background-image:url(./assets/wall/portrait-tone.webp)}
#mm-wall .mw-board.ready-1 .mw-t.a1::after,#mm-wall .mw-board.ready-v .mw-t.fv::after{opacity:var(--alpha)}
#mm-wall .mw-t.is-on{outline:2px solid #ef3b23;outline-offset:-1px;z-index:1}
#mm-wall .mw-t:focus-visible{outline:2px solid #ef3b23;outline-offset:1px;z-index:2}
/* the loupe: the square in colour, with its project's name */
#mm-wall .mw-loupe{
 position:absolute;left:0;top:0;z-index:5;box-sizing:border-box;width:clamp(150px,calc(var(--bw) * .48),250px);padding:6px;
 border-radius:14px;background:#fff;box-shadow:0 24px 46px -20px rgba(23,25,28,.6),0 0 0 1px rgba(23,25,28,.07);
 pointer-events:none;opacity:0;visibility:hidden;scale:.86;
 transition:translate .14s cubic-bezier(.2,.7,.2,1),opacity .16s ease,scale .18s cubic-bezier(.2,.7,.2,1),visibility 0s linear .18s;
}
#mm-wall .mw-loupe.on{opacity:1;visibility:visible;scale:1;transition:translate .14s cubic-bezier(.2,.7,.2,1),opacity .16s ease,scale .18s cubic-bezier(.2,.7,.2,1),visibility 0s}
#mm-wall .mw-loupe.no-move{transition:none}
#mm-wall .mw-lbox{position:relative;display:block;aspect-ratio:1;border-radius:9px;overflow:hidden;background:#ececea}
#mm-wall .mw-limg{position:absolute;inset:0;background-repeat:no-repeat}
#mm-wall .mw-lcv{position:absolute;inset:0;display:none;width:100%;height:100%}
#mm-wall .mw-loupe.is-film .mw-lcv{display:block}
#mm-wall .mw-loupe.is-film .mw-limg{display:none}
#mm-wall .mw-lcap{display:block;padding:7px 3px 1px;font-size:13px;line-height:1.3;color:#17191c}
#mm-wall .mw-lcap b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-weight:500}
#mm-wall .mw-lcap small{display:block;margin-top:2px;font-size:11px;line-height:1.3;color:#ef3b23}
/* the words beside the portrait, in the summary's type, level with the portrait's top edge */
#mm-wall .mw-side{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;padding:0;margin-top:-.3em;text-align:start}
html[dir="rtl"] #mm-wall .mw-side,html[dir="rtl"] #mm-wall .mw-lcap{direction:rtl}
#mm-wall .mw-kicker{margin:0 0 6px;font-size:clamp(10px,1.05dvh,14px);line-height:1.5;letter-spacing:.07em;color:#7a746d}
#mm-wall .mw-title{margin:0;font-size:clamp(26px,3dvh,36px);font-weight:600;line-height:1.15;letter-spacing:-.035em;color:#202020;text-wrap:balance}
#mm-wall .mw-desc{margin:12px 0 0;max-width:46ch;font-size:clamp(14px,1.55dvh,20px);line-height:1.65;color:#5c5954;text-wrap:pretty}
#mm-wall .mw-hint{display:flex;align-items:baseline;gap:.55em;margin:16px 0 0;font-size:clamp(12px,1.3dvh,16px);line-height:1.5;color:#7f7972}
#mm-wall .mw-hint::before{content:"";flex:none;width:.62em;height:.62em;border-radius:1px;background:#ef3b23}
#mm-wall .mw-hint-tap{display:none}
@media (hover:none){#mm-wall .mw-hint-point{display:none}#mm-wall .mw-hint-tap{display:inline}}
html[lang="ar"] #mm-wall .mw-kicker,html[lang="ar"] #mm-wall .mw-title{letter-spacing:0}
html[lang="ar"] #mm-wall .mw-title{line-height:1.35}
html[lang="ar"] #mm-wall .mw-desc{line-height:1.8}
/* a narrow or upright area (phones, upright tablets): the words go under the portrait, the portrait takes the rest */
@container mmw (aspect-ratio < 1.05){
 #mm-wall .mw-in{flex-direction:column;gap:14px}
 #mm-wall .mw-stage{flex:1 1 auto;width:100%;height:auto;min-height:0}
 #mm-wall .mw-board{margin-inline:auto}
 #mm-wall .mw-side{flex:none;justify-content:flex-start;padding:0;margin-top:0}
 #mm-wall .mw-desc{display:none}
 #mm-wall .mw-title{font-size:clamp(20px,5.4cqw,30px)}
 #mm-wall .mw-hint{margin-top:8px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){#mm-wall .mw-loupe,#mm-wall .mw-img,#mm-wall .mw-t::after{transition:none}}
body.motion-paused #mm-wall .mw-loupe{transition:none}
/* a main menu item that is a category itself (Multimedia) marks itself in red, like the others, without the old dark pill */
html body #work .discipline-nav .nav-primary[data-category].active{background:none !important;border-color:transparent !important;color:#cc2d25}

/* the viewer (wall.js): one piece large over the page, with its kind, title and note; steps through every piece */
dialog.mw-view{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;
 background:transparent;color:#f2eee6;font-family:inherit}
dialog.mw-view::backdrop{background:rgba(12,12,15,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mw-view .mw-vin{--cap:118px;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:56px 104px 26px}
.mw-view .mw-vfig{margin:0;display:flex;justify-content:center;min-height:0}
.mw-view .mw-vbox{--ar:1;position:relative;overflow:hidden;border-radius:4px;background-color:#1d1d20;background-repeat:no-repeat;
 height:min(calc(100dvh - 56px - 26px - 20px - var(--cap)),calc((100vw - 208px) / var(--ar)));aspect-ratio:var(--ar);
 box-shadow:0 34px 80px -34px rgba(0,0,0,.85),0 0 0 1px rgba(242,238,230,.06)}
.mw-view .mw-vimg{position:absolute;inset:0;background-repeat:no-repeat}
.mw-view .mw-vfilm{position:absolute;left:var(--vx);top:var(--vy);width:var(--vw);height:var(--vh);max-width:none;object-fit:fill;display:block}
.mw-view[data-kind="motion"] .mw-vimg{display:none}
.mw-view:not([data-kind="motion"]) .mw-vfilm{display:none}
.mw-view .mw-vcap{width:min(620px,100%);min-height:calc(var(--cap) - 20px);text-align:center}
.mw-view .mw-vkind{display:flex;justify-content:center;gap:14px;margin:0 0 8px;font-size:11.5px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:#a6a199}
.mw-view .mw-vcount{color:#77736c;font-variant-numeric:tabular-nums}
.mw-view h2{margin:0;font-size:clamp(20px,2.1vw,27px);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:#f4f1ea}
.mw-view .mw-vnote{margin:8px auto 0;max-width:60ch;font-size:14px;line-height:1.6;color:#c4bfb6;text-wrap:pretty}
html[lang="ar"] .mw-view .mw-vkind,html[lang="ar"] .mw-view h2{letter-spacing:0}
html[lang="ar"] .mw-view .mw-vnote{line-height:1.8}
.mw-view .mw-vbtn{position:absolute;display:grid;place-items:center;width:48px;height:48px;margin:0;padding:0;border-radius:50%;
 border:1px solid rgba(242,238,230,.26);background:rgba(242,238,230,.06);color:#f2eee6;font-size:19px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s}
.mw-view .mw-vbtn:hover{background:rgba(242,238,230,.16);border-color:rgba(242,238,230,.5)}
.mw-view .mw-vbtn:focus-visible{outline:2px solid #ef3b23;outline-offset:3px}
.mw-view .mw-vprev{left:28px;top:calc(50% - var(--cap,118px) / 2);translate:0 -50%}
.mw-view .mw-vnext{right:28px;top:calc(50% - var(--cap,118px) / 2);translate:0 -50%}
.mw-view .mw-vclose{right:24px;top:18px;width:42px;height:42px;font-size:24px}
html[dir="rtl"] .mw-view .mw-vprev{left:auto;right:28px}
html[dir="rtl"] .mw-view .mw-vnext{right:auto;left:28px}
html[dir="rtl"] .mw-view .mw-vclose{right:auto;left:24px}
html[dir="rtl"] .mw-view .mw-vprev span,html[dir="rtl"] .mw-view .mw-vnext span{display:inline-block;transform:scaleX(-1)}
@media (max-width:700px){
 .mw-view .mw-vin{--cap:150px;padding:58px 16px 84px;gap:16px}
 .mw-view .mw-vbox{height:min(calc(100dvh - 58px - 84px - 16px - var(--cap)),calc((100vw - 32px) / var(--ar)))}
 .mw-view .mw-vprev,.mw-view .mw-vnext{top:auto;bottom:22px;translate:none}
 .mw-view .mw-vprev{left:calc(50% - 60px)}.mw-view .mw-vnext{right:calc(50% - 60px)}
 html[dir="rtl"] .mw-view .mw-vprev{left:auto;right:calc(50% - 60px)}
 html[dir="rtl"] .mw-view .mw-vnext{right:auto;left:calc(50% - 60px)}
 .mw-view .mw-vnote{font-size:13px}
}