/* Three project states. Fill is an editorial estimate, not a loading animation. */
/* Alignment revision 2026-10-29: every case occupies the same content tracks. */
html #projects-inner>.source-case,html #projects-inner>.source-case>div{width:100%;min-width:0;align-self:stretch;box-sizing:border-box}
html #projects-inner details.project--teaser,html #projects-inner details.project--teaser>summary{width:100%;min-width:0;box-sizing:border-box}
details.project>summary{grid-template-columns:48px minmax(0,1.2fr) minmax(0,1fr) 240px 32px}
details.project>summary .project-year{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;overflow:visible;white-space:nowrap;min-width:0}
details.project>summary .wl-case-stage{--stage-progress:#d9dcd6;position:relative;isolation:isolate;display:inline-flex;flex:0 0 152px;align-items:center;justify-content:center;box-sizing:border-box;width:152px;height:24px;padding:0 10px;border:1px solid color-mix(in srgb,var(--ink,currentColor) 15%,transparent);border-radius:999px;font:400 12px/16px var(--mono,monospace);letter-spacing:0;text-transform:none;white-space:nowrap;color:var(--ink,inherit);overflow:hidden;background:transparent;box-shadow:none}
details.project>summary .wl-case-stage::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--case-stage-fill,0%);z-index:-1;background:var(--stage-progress);pointer-events:none}
details.project>summary .wl-case-stage[data-stage=online],details.project>summary .wl-case-stage[data-stage=past]{color:var(--ink,inherit);background:var(--stage-progress)}
details.project>summary .wl-case-stage[data-stage=online]::before,details.project>summary .wl-case-stage[data-stage=past]::before{display:none}
html[data-theme=dark] details.project>summary .wl-case-stage{--stage-progress:#4e534b}
details.project .wl-case-outbound{grid-column:1/-1;clear:both;display:flex;align-items:center;justify-content:flex-end;width:100%;margin:32px 0 0;padding:18px 0 0;border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)}
details.project .wl-case-outbound a{font:400 12px/1.6 var(--mono,monospace);color:inherit;text-decoration:none;text-underline-offset:4px}
details.project .wl-case-outbound a:hover{text-decoration:underline}
details.project .wl-case-outbound a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
#case-nimer-assi .wl-case-outbound{border:0;padding-top:0}
#case-nimer-assi .wl-case-outbound a:hover{text-decoration:none}

@media(max-width:1100px) and (min-width:761px){details.project>summary{grid-template-columns:32px minmax(0,1.2fr) minmax(0,1fr) 232px 24px;column-gap:16px}details.project>summary .project-year{gap:12px}details.project>summary .wl-case-stage{flex-basis:152px;width:152px}}
@media(max-width:760px){details.project>summary{grid-template-columns:26px minmax(0,1fr) 28px}details.project>summary .project-year{display:grid;grid-template-columns:76px 152px;grid-column:2/-1;grid-row:3;justify-content:start;gap:12px;min-width:0}details.project>summary .wl-case-stage{flex-basis:152px;width:152px;height:24px;font-size:12px}details.project>summary .project-plus{grid-row:1/3}details.project .wl-case-outbound{justify-content:flex-start}}
@media(forced-colors:active){details.project>summary .wl-case-stage{border-color:CanvasText}}

/* Legible secondary information; titles keep the established type scale. */
html #projects-inner details.project>summary :is(.project-number,.project-category,.project-year){font-size:12px;line-height:18px;letter-spacing:.025em;font-variant-numeric:tabular-nums}
html #projects-inner details.project>summary .project-category{overflow-wrap:normal}
html #projects-inner details.project>summary:focus-visible{outline:2px solid var(--ink);outline-offset:5px;border-radius:2px}

@media(min-width:761px){html #projects-inner details.project>summary .project-category{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(min-width:761px) and (max-width:1100px){html #projects-inner details.project>summary h3{font-size:22px;line-height:28px}}

/* Full-width mineral light: the typography stays on its original grid. */
html #projects-inner details.project{border-block:0}
html #projects-inner details.project>summary{--ink:#202020;--muted:#626262;position:relative;isolation:isolate;background:transparent;box-shadow:none;transition:none}
html #projects-inner details.project>summary::before{content:"";position:absolute;pointer-events:none;z-index:-1;top:0;bottom:0;left:var(--case-band-left,calc((100% - 100vw)/2));width:var(--case-band-width,100vw);height:auto;border:0;border-radius:0;box-shadow:none;clip-path:inset(0);background-image:radial-gradient(ellipse 30% 118% at 26% 118%,#888b854a 0%,#a6aaa037 30%,#d1d4cc20 60%,transparent 85%),radial-gradient(ellipse 27% 104% at 71% 112%,#999e9340 0%,#bcc0b630 35%,#dfe1da18 66%,transparent 90%),linear-gradient(to top,#aeb2a822 0%,#d5d8d012 30%,transparent 78%);background-size:170% 132%,190% 145%,100% 100%;background-position:0% 80%,100% 100%,0 0;background-repeat:no-repeat;mask-image:linear-gradient(to bottom,transparent 0%,#00000008 18%,#00000035 42%,#000000a8 70%,black 94%,black 100%);opacity:0;transform:scaleY(-1);transition:opacity 420ms ease;animation:wl-case-mineral-flow 22s cubic-bezier(.45,0,.55,1) infinite alternate paused}
html #projects-inner details.project[open]>summary{background:transparent}
html #projects-inner details.project[open]>summary::before{opacity:.78;animation-play-state:running}
@media(hover:hover){html #projects-inner details.project>summary:hover{background:transparent}html #projects-inner details.project>summary:hover::before{opacity:1;animation-play-state:running}}
html #projects-inner details.project>summary:focus-visible{background:transparent}
html #projects-inner details.project>summary:focus-visible::before{opacity:1;animation-play-state:running}
html #projects-inner details.project>summary:hover h3{transform:none}
html #projects-inner details.project[open]>summary .project-number{text-decoration:none}
html[data-theme=dark] #projects-inner details.project>summary{--ink:#f4f4f4;--muted:#b3b3b3}
html[data-theme=dark] #projects-inner details.project>summary::before{background-image:radial-gradient(ellipse 30% 118% at 26% 118%,#858b7c70 0%,#62685850 30%,#454b3d24 60%,transparent 85%),radial-gradient(ellipse 27% 104% at 71% 112%,#777f6d66 0%,#555e4945 35%,#353d2e20 66%,transparent 90%),linear-gradient(to top,#62685830 0%,#353d2e18 30%,transparent 78%)}
@keyframes wl-case-mineral-flow{0%{background-position:0% 80%,100% 100%,0 0}45%{background-position:48% 100%,58% 72%,0 0}100%{background-position:100% 65%,0% 96%,0 0}}
html.motion-paused #projects-inner details.project>summary::before{animation:none}
@media(prefers-reduced-motion:reduce){html #projects-inner details.project>summary::before{animation:none;transition:none;background-position:50% 50%}}
@media(forced-colors:active){html #projects-inner details.project>summary::before{display:none}}

/* Case actions share spelling, type and a usable touch target. */
html #projects-inner .project-body a.wl-case-action{display:inline-flex;align-items:center;min-height:44px;max-width:100%;box-sizing:border-box;font:400 14px/20px var(--sans,Arial);letter-spacing:0;text-transform:none;color:var(--ink,#202020);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;white-space:normal}
html #projects-inner .project-body a.wl-case-action-contact{font-weight:500}
html #projects-inner .project-body a.wl-case-action:focus-visible{outline:2px solid currentColor;outline-offset:5px}

/* Shared closing navigation */
/* Presentation → per-case description → shared navigation. No fixed text height. */
html #projects-inner .project-body .wl-case-description{
 grid-column:1/-1;clear:both;max-width:72ch;margin:28px 0 0;padding:0;
 color:var(--ink,#202020);font:400 16px/26px var(--sans,Arial,sans-serif);
 letter-spacing:0;opacity:1;text-wrap:pretty;
}
html #projects-inner .project-body .wl-case-description>p{
 margin:0;font:inherit;color:inherit;letter-spacing:inherit;
}
html #projects-inner .project-body .wl-case-description>p+p{margin-top:16px}
/* Equal outer tracks keep the CTA centered, including cases without a website. */
html #projects-inner .project-body .wl-case-footer{
 display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
 grid-template-areas:'back contact external';align-items:baseline;
 column-gap:32px;row-gap:8px;grid-column:1/-1;clear:both;
 width:100%;box-sizing:border-box;margin:48px 0 0;padding:0;border:0;box-shadow:none;
}
html #projects-inner .project-body .wl-case-footer>a{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;min-width:44px;max-width:100%;width:auto;box-sizing:border-box;
 margin:0;padding:10px 0;border:0;border-radius:0;background:none;box-shadow:none;
 color:var(--muted,#626262);font:400 13px/24px var(--sans,Arial,sans-serif);
 letter-spacing:0;text-transform:none;text-decoration:none!important;white-space:normal;
 transition:color 180ms ease;
}
html #projects-inner .project-body .wl-case-footer>a::before,
html #projects-inner .project-body .wl-case-footer>a::after{content:none!important}
html #projects-inner .project-body .wl-case-footer .wl-case-footer-back{grid-area:back;justify-self:start}
html #projects-inner .project-body .wl-case-footer .wl-case-footer-contact{
 grid-area:contact;justify-self:center;color:var(--ink,#202020);
 font-size:18px;font-weight:500;letter-spacing:-.01em;text-align:center;
}
html #projects-inner .project-body .wl-case-footer .wl-case-footer-external{
 grid-area:external;justify-self:end;font-size:12px;text-align:end;
}
html #projects-inner .project-body .wl-case-footer>a:hover{color:var(--ink,#202020)}
html #projects-inner .project-body .wl-case-footer>a:focus-visible{outline:2px solid var(--ink,#202020);outline-offset:4px}
@media(max-width:600px){
 html #projects-inner .project-body .wl-case-description{margin-top:24px}
 html #projects-inner .project-body .wl-case-footer{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:'contact contact' 'back external';column-gap:24px;margin-top:32px;
 }
}
html[data-theme=dark] #projects-inner #case-in-production>.project-body.production-case{
 background:linear-gradient(180deg,transparent 0,var(--paper,#11120f) 76px);
}
@media(prefers-reduced-motion:reduce){html #projects-inner .project-body .wl-case-footer>a{transition:none}}

/* Case ending: the project link and contact share the end column. */
html #projects-inner .project-body .wl-case-footer{
 grid-template-columns:minmax(0,1fr) minmax(0,max-content);
 grid-template-areas:'back external' '. contact';
 align-items:start;column-gap:24px;row-gap:0;
}
html #projects-inner .project-body .wl-case-footer:not(:has(.wl-case-footer-external)){
 grid-template-areas:'back contact';
}
html #projects-inner .project-body .wl-case-footer .wl-case-footer-back{align-self:start}
html #projects-inner .project-body .wl-case-footer .wl-case-footer-external{
 grid-area:external;justify-self:end;text-align:end;font-size:13px;
}
html #projects-inner .project-body .wl-case-footer .wl-case-footer-contact{
 grid-area:contact;justify-self:end;justify-content:flex-end;gap:9px;
 color:var(--ink,#202020);font-size:14px;line-height:24px;font-weight:400;
 letter-spacing:0;text-align:end;
}
html #projects-inner .project-body .wl-case-footer>a.wl-case-footer-contact::before{
 content:''!important;display:block;flex:0 0 18px;width:18px;height:10px;
 border-radius:50%;background:linear-gradient(to bottom,#25271f 0 20%,#090a07 21% 100%);
 box-shadow:0 0 0 1px color-mix(in srgb,var(--ink,#202020) 20%,transparent);
 transition:transform 180ms ease;
}
@media(hover:hover){html #projects-inner .project-body .wl-case-footer .wl-case-footer-contact:hover::before{transform:scale(1.08)}}
@media(max-width:600px){html #projects-inner .project-body .wl-case-footer{grid-template-columns:minmax(0,1fr) minmax(0,max-content);grid-template-areas:'back external' '. contact';column-gap:12px}}
@media(prefers-reduced-motion:reduce){html #projects-inner .project-body .wl-case-footer .wl-case-footer-contact::before{transition:none}}
@media(forced-colors:active){html #projects-inner .project-body .wl-case-footer .wl-case-footer-contact::before{background:CanvasText;forced-color-adjust:auto}}