/* ==========================================================================
   Ongoing projects (sections/projects.php, assets/js/projects.js): Iran in relief, each project a cut-out of its
   photo standing on its spot; the title and the details on the inline-start side, the list on the inline-end side.
   Animated mode (ch_sec4): the section lies over the news section's two screens; its stage is pinned while the
   news screen holds, and opens over it as a circle (--r, set by projects.js) with a lit rim (--ro).
   ========================================================================== */
.prj {
  --bg: #05090D; --ink: #fff; --sub: rgb(255 255 255 / .62); --chip: rgb(11 17 24 / .74); --chip-line: rgb(255 255 255 / .12);
  --panel: rgb(10 16 22 / .88); --cloud: rgb(28 38 48 / .96); --cloud-2: rgb(20 28 36 / .7);
  --r: 0px; --ro: 0; --cp: 1;
  position: relative; z-index: 7; color: var(--ink);
}
.prj.is-day {
  --bg: #E9E6E0; --ink: #16202A; --sub: rgb(22 32 42 / .62); --chip: rgb(255 255 255 / .84); --chip-line: rgb(22 32 42 / .1);
  --panel: rgb(250 249 246 / .92); --cloud: rgb(255 255 255 / .96); --cloud-2: rgb(255 255 255 / .7);
}
/* where the map has fully opened: the target of #projects-ongoing, and a scroll gate (app.js) */
.prj__anchor { position: absolute; top: 0; width: 1px; height: 1px; pointer-events: none; }
html.js:not(.gr-static) .prj__anchor { top: 100vh; top: 100svh; }
.prj__stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; overflow: clip; }   /* the ring grows past the screen: it must never add to the page (on a phone that moved the scroll) */
/* pinned on through the completed-projects strip's way in (--dn-e, done.js), and dimmed as it goes under (--cover) */
html.js:not(.gr-static) .prj { margin-top: -200vh; margin-top: -200svh; height: calc(200vh + var(--dn-e, 0px)); height: calc(200svh + var(--dn-e, 0px)); pointer-events: none; }
.prj__dim { position: absolute; z-index: 9; inset: 0; background: #000; opacity: 0; pointer-events: none; }   /* done.js sets its opacity */
html.js:not(.gr-static) .prj__stage { position: sticky; top: 0; }
.prj__view { position: absolute; z-index: 1; inset: 0; overflow: hidden; background: var(--bg); color: var(--ink); pointer-events: auto; transition: background-color .6s; }
html.js:not(.gr-static) .prj:not(.is-full) .prj__view { clip-path: circle(0 at 50% 52%); }   /* opened by projects.js */
.prj__ring {   /* drawn once at its full size and scaled (a ring that grew by its size repainted its glow every frame) */
  position: absolute; z-index: 2; left: 50%; top: 52%; width: calc(var(--rmax, 100vmax) * 2); height: calc(var(--rmax, 100vmax) * 2); transform: translate(-50%, -50%) scale(0); will-change: transform, opacity;
  border-radius: 50%; pointer-events: none; opacity: 0;
  /* the lit rim as gradients (blurred shadows this size took a third of a second to draw the first time) */
  background: radial-gradient(closest-side, transparent calc(100% - 46px), rgb(91 230 198 / .12) calc(100% - 26px), rgb(91 230 198 / .45) calc(100% - 6px), #E8FFF8 calc(100% - 1.5px), rgb(91 230 198 / .55) 100%, transparent calc(100% + 1px));
}

/* ---------- the map ---------- */
.prj__map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }   /* a finger turns it sideways, scrolls the page up and down */
.prj__map:active { cursor: grabbing; }
.prj__veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 95% at 50% 46%, transparent 58%, rgb(2 5 8 / .8)); }
.prj__veil::after {
  content: ""; position: absolute; inset: 0; opacity: .035;   /* plain: a blend mode over a canvas that draws every frame is blended again every frame */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.prj.is-day .prj__veil { background: radial-gradient(125% 95% at 50% 46%, transparent 62%, rgb(120 112 100 / .26)); }
.prj.is-day .prj__veil::after { opacity: .05; }
/* clouds part as the circle opens (--cp: 0 → 1) */
.prj__clouds { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.prj__clouds i {
  position: absolute; left: var(--x); top: var(--y); width: 70vmax; height: 46vmax; border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(closest-side, var(--cloud), var(--cloud-2) 40%, rgb(0 0 0 / 0) 100%);   /* soft by its gradient: a blur filter was redrawn every frame */
  transform: translate(-50%, -50%) translate(calc(var(--dx) * var(--cp)), calc(var(--dy) * var(--cp))) scale(calc(1 + var(--cp) * .25));
  opacity: calc(1 - var(--cp));
}

/* ---------- the projects on the map: the cut-out, its shadow, a dot when it is too far to read ---------- */
.prj__sites { position: absolute; z-index: 1; inset: 0; pointer-events: none; }   /* its own layer: the cut-outs never rise over the details */
.prj-site { --w: 480px; position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.prj-site__body { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }   /* scaled by projects.js */
.prj-site__shadow {
  position: absolute; left: 0; top: 0; width: calc(var(--w) * 1.05); height: calc(var(--w) * .22); transform: translate(-50%, -55%); border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / .72), rgb(0 0 0 / .3) 60%, transparent);
}
.prj.is-day .prj-site__shadow { background: radial-gradient(closest-side, rgb(40 32 20 / .45), rgb(40 32 20 / .18) 60%, transparent); }
.prj-site__cut {
  position: absolute; left: 0; bottom: 0; width: var(--w); padding: 0; border: 0; background: none; transform: translate(-50%, 6%); transform-origin: 50% 100%;
  pointer-events: auto; cursor: pointer; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .35)); transition: transform .5s var(--ease-out), filter .4s;
}
.prj-site__cut img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
.prj-site__dot {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; padding: 0; border: 0; background: var(--green); cursor: pointer;
  box-shadow: 0 0 0 3px rgb(255 255 255 / .85), 0 0 16px 3px rgb(14 156 89 / .65); opacity: 0; pointer-events: none;
}
.prj-site__dot::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; }   /* a finger-sized target */
.prj-site.is-far .prj-site__cut { opacity: 0; pointer-events: none; }
.prj-site.is-far .prj-site__dot { opacity: 1; pointer-events: auto; }
.prj-site.is-hot .prj-site__cut, .prj-site__cut:hover { transform: translate(-50%, 0) scale(1.08); filter: drop-shadow(0 18px 18px rgb(0 0 0 / .4)) drop-shadow(0 0 1.5px var(--green-hi)); }
.prj-site.is-hot .prj-site__dot { transform: scale(1.4); }

/* ---------- head ---------- */
.prj__head { position: absolute; z-index: 3; top: calc(var(--header-h) + 26px); inset-inline-start: var(--gutter); max-width: 520px; pointer-events: none; transition: opacity .5s; }
.prj__title { display: flex; align-items: center; gap: .42em; font-size: clamp(32px, 3.8vw, 62px); font-weight: 300; line-height: 1.25; }
.prj__live { position: relative; width: .2em; height: .2em; flex: none; border-radius: 50%; background: var(--green-hi); box-shadow: 0 0 0 .1em rgb(23 184 108 / .22); animation: prj-live 1.8s ease-in-out infinite; }
@keyframes prj-live { 50% { box-shadow: 0 0 0 .26em rgb(23 184 108 / 0); } }
.prj__hint { margin-top: 10px; color: var(--sub); font-size: 14px; }
.prj.is-open .prj__head { opacity: 0; }

/* ---------- the list (the inline-end side: the title is on the other) ---------- */
.prj__list { position: absolute; z-index: 3; top: 50%; inset-inline-end: var(--gutter); display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; transform: translateY(-28%); }
.prj-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 260px; padding: 8px 14px 10px 10px; border: 0; border-radius: 14px; overflow: hidden;
  background: var(--chip); color: var(--ink); font: inherit; text-align: start; cursor: pointer; box-shadow: inset 0 0 0 1px var(--chip-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: box-shadow .3s, transform .4s var(--ease-out);
}
.prj-item img { width: 46px; height: 34px; object-fit: contain; flex: none; }
.prj-item b { display: block; font-size: 13.5px; font-weight: 750; line-height: 1.4; }
.prj-item small { display: block; font-size: 11.5px; color: var(--sub); }
.prj-item__bar { position: absolute; inset-inline: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--chip-line); }
.prj-item__bar::after { content: ""; display: block; width: var(--p); height: 100%; border-radius: inherit; background: var(--green-hi); }
/* while the circle opens (and while the strip comes over it) the list's glass is plain: its blur is redrawn every frame */
.prj:not(.is-full) .prj-item, .prj.is-covered .prj-item { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(11 17 24 / .9); }
.prj.is-day:not(.is-full) .prj-item, .prj.is-day.is-covered .prj-item { background: rgb(255 255 255 / .92); }
.prj-item:hover, .prj-item.is-hot, .prj-item[aria-current] { box-shadow: inset 0 0 0 1.5px var(--green-hi); transform: translateX(var(--nudge, 4px)); }   /* toward the map */
[dir="ltr"] .prj-item { --nudge: -4px; }
.prj-item:focus-visible { outline: 2px solid var(--wire); outline-offset: 3px; }

/* ---------- back to the map: big, alone, where the eye goes after the flight ---------- */
.prj__back {
  position: absolute; z-index: 5; top: calc(var(--header-h) + 18px); inset-inline-start: var(--gutter); display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding-inline: 16px 22px; border: 0; border-radius: 999px; background: var(--white); color: var(--ink-dark, #0E141B); font: inherit; font-size: 15px; font-weight: 800;
  cursor: pointer; box-shadow: 0 0 0 4px rgb(14 156 89 / .35), 0 16px 34px -14px rgb(0 0 0 / .7);
  opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .35s, transform .5s var(--ease-out), visibility 0s .35s, background-color .3s;
}
.prj.is-day .prj__back { background: var(--ink); color: #fff; }
.prj__back .arrow { width: 22px; height: 22px; transform: none; }                 /* points back (inline-start) */
[dir="ltr"] .prj__back .arrow { transform: scaleX(-1); }
.prj__back:hover { background: #E6F7EF; }
.prj__back:focus-visible { outline: 2px solid var(--wire); outline-offset: 4px; }
.prj.is-open .prj__back { opacity: 1; visibility: visible; transform: none; transition: opacity .4s .45s, transform .6s var(--ease-out) .45s, visibility 0s; }

/* ---------- details ---------- */
.prj__panel {
  position: absolute; z-index: 4; top: calc(var(--header-h) + 84px); inset-inline-start: var(--gutter); width: min(420px, 34vw); max-height: calc(100% - var(--header-h) - 84px - 100px); overflow: auto;   /* clear of the next-section pill */
  border-radius: 20px; background: var(--panel); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px var(--chip-line), 0 40px 90px -40px rgb(0 0 0 / .7);
  opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .4s, transform .6s var(--ease-out), visibility 0s .45s; scrollbar-width: thin;
  overscroll-behavior: contain;   /* its own scroll never runs on into the page */
}
.prj.is-open .prj__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .5s, transform .9s var(--ease-out) .5s, visibility 0s; }
.prj__panel figure { position: relative; margin: 0; }
.prj__panel figure img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.prj__panel figcaption { position: absolute; bottom: 10px; inset-inline-start: 12px; padding: 3px 10px; border-radius: 999px; background: rgb(11 17 24 / .72); color: #fff; font-size: 11.5px; font-weight: 700; }
.prj__in { padding: 18px 22px 22px; }
.prj__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.prj-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 750; background: rgb(14 156 89 / .16); color: #79E9B5; box-shadow: inset 0 0 0 1px rgb(23 184 108 / .35); }
.prj.is-day .prj-tag { color: var(--green-lo); }
.prj-tag--muted { background: transparent; color: var(--sub); box-shadow: inset 0 0 0 1px var(--chip-line); }
.prj__name { margin-top: 10px; font-size: 22px; font-weight: 750; line-height: 1.4; }
.prj__client { color: var(--sub); font-size: 13.5px; }
.prj__bar { margin-top: 16px; }
.prj__bar p { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12.5px; color: var(--sub); }
.prj__bar b { color: var(--ink); font-size: 14px; }
.prj__bar i { display: block; height: 6px; border-radius: 6px; background: var(--chip-line); overflow: hidden; }
.prj__bar i::after { content: ""; display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-hi), var(--green)); transition: width .9s var(--ease-out) .6s; }
.prj__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: 16px; }
.prj__facts dt { font-size: 11.5px; color: var(--sub); }
.prj__facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; }
.prj__epc { display: flex; gap: 6px; margin-top: 14px; }
.prj__epc span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-weight: 800; font-size: 13px; color: var(--sub); box-shadow: inset 0 0 0 1px var(--chip-line); }
.prj__epc span.is-on { background: var(--green-fill); color: #fff; box-shadow: none; }
.prj__more { margin-top: 18px; }

/* ---------- day / night ---------- */
.prj__theme {
  position: absolute; z-index: 3; bottom: 26px; inset-inline-end: var(--gutter); display: inline-flex; gap: 2px; padding: 4px; border: 0; border-radius: 999px;
  background: var(--chip); box-shadow: inset 0 0 0 1px var(--chip-line); font: inherit; cursor: pointer; transition: opacity .35s;
}
.prj__theme span { padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 750; color: var(--sub); transition: background-color .3s, color .3s; }
.prj:not(.is-day) .prj__theme [data-on="night"], .prj.is-day .prj__theme [data-on="day"] { background: var(--green-fill); color: #fff; }
.prj__theme:focus-visible { outline: 2px solid var(--wire); outline-offset: 3px; }
.prj.is-open .prj__theme { opacity: 0; pointer-events: none; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .prj__head { top: calc(var(--header-h) + 14px); inset-inline-end: var(--gutter); }
  .prj__hint { font-size: 13px; }
  /* the list: a row to swipe, above the next-section pill */
  .prj__list { top: auto; bottom: 86px; inset-inline: 0; display: flex; gap: 8px; padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; transform: none; scroll-snap-type: x mandatory; }
  .prj__list::-webkit-scrollbar { display: none; }
  .prj__list li { scroll-snap-align: start; }
  .prj-item { width: 200px; }
  .prj.is-open .prj__list { opacity: 0; pointer-events: none; }
  .prj__back { top: calc(var(--header-h) + 12px); height: 46px; }
  .prj__title { font-size: clamp(28px, 8vw, 38px); }
  .prj__panel { top: auto; bottom: 78px; inset-inline: 12px; width: auto; max-height: 50%; }   /* clear of the next-section pill */
  .prj__panel figure { display: none; }                        /* the cut-out on the map is the picture here */
  .prj__theme { top: calc(var(--header-h) + 150px); bottom: auto; }
}

/* ---------- without the map (no JavaScript, reduced motion, no WebGL2): the list as cards ---------- */
html:not(.js) .prj__stage, html.gr-static .prj__stage { height: auto; min-height: 0; }
html:not(.js) .prj__view, html.gr-static .prj__view { position: relative; padding: calc(var(--header-h) + 40px) var(--gutter) 120px; }
.prj.is-flat .prj__view { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 20px) var(--gutter) 110px; }
html:not(.js) .prj__map, html:not(.js) .prj__sites, html:not(.js) .prj__clouds, html:not(.js) .prj__back, html:not(.js) .prj__panel, html:not(.js) .prj__theme,
html.gr-static .prj__map, html.gr-static .prj__sites, html.gr-static .prj__clouds, html.gr-static .prj__back, html.gr-static .prj__panel, html.gr-static .prj__theme,
.prj.is-flat .prj__map, .prj.is-flat .prj__sites, .prj.is-flat .prj__clouds, .prj.is-flat .prj__back, .prj.is-flat .prj__panel, .prj.is-flat .prj__theme { display: none; }
html:not(.js) .prj__head, html.gr-static .prj__head, .prj.is-flat .prj__head { position: static; }
html:not(.js) .prj__list, html.gr-static .prj__list, .prj.is-flat .prj__list {
  position: static; transform: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 28px; padding: 0; overflow: visible;
}
html:not(.js) .prj-item, html.gr-static .prj-item, .prj.is-flat .prj-item { width: 100%; height: 100%; flex-direction: column; align-items: stretch; padding: 16px 16px 18px; }
html:not(.js) .prj__hint, html.gr-static .prj__hint, .prj.is-flat .prj__hint { display: none; }   /* it speaks of the map */
html:not(.js) .prj-item img, html.gr-static .prj-item img, .prj.is-flat .prj-item img { width: 100%; height: 120px; }