/* ==========================================================================
   Completed projects (sections/done.php, assets/js/done.js): a strip of tall cards, after lpas.com's markets strip.
   Animated mode: the section lies over the map's last screen and the strip's entry (--dn-e, set by done.js; the map
   stays pinned that long, see projects.css); its stage is pinned while the strip (--dn-t of scroll) slides in from
   the right and on to the left, then rises with the page. Each card arrives as it enters (--q: its box rises over
   the photo and settles, its name comes out of a blur) and its photo lags a little behind it (--px).
   ========================================================================== */
.dn { position: relative; z-index: 8; color: var(--white); }
html.js:not(.gr-static) .dn {
  margin-top: calc(-100vh - var(--dn-e, 100vw)); margin-top: calc(-100svh - var(--dn-e, 100vw));
  height: calc(100vh + var(--dn-t, 600vw)); height: calc(100svh + var(--dn-t, 600vw)); pointer-events: none;
}
/* where the strip has covered the map (the target of #projects-done) and where it ends: scroll gates (app.js) */
.dn__gate { position: absolute; top: var(--dn-e, 100vw); width: 1px; height: 1px; pointer-events: none; }
.dn__gate--end { top: var(--dn-t, 600vw); }
html:not(.js) .dn__gate, html.gr-static .dn__gate { top: 0; }   /* #projects-done: the strip's top (no gates without the motion) */

.dn__stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; overflow: clip; }
html.js:not(.gr-static) .dn__stage { position: sticky; top: 0; }
.dn__track {
  position: absolute; top: 0; left: 0; display: flex; width: max-content; height: 100%; direction: ltr;   /* the first card leads: it enters first */
  pointer-events: auto; will-change: transform; transform: translate3d(100vw, 0, 0);
  box-shadow: -40px 0 90px rgb(0 0 0 / .55);                                                        /* its edge over the map */
}
.dn__list { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
.dn-intro, .dn-card { position: relative; flex: none; height: 100%; direction: rtl; overflow: hidden; }

/* ---------- the opening card: the title, over the map in paper white ---------- */
/* a ruled top (the kicker, a hairline, the years) and a ruled foot (the link, the hint); between them the count as a
   lockup (the numeral, its unit beside it), the title and the lead, set on one edge */
.dn-intro {
  --rule: rgb(14 20 27 / .13);
  display: flex; flex-direction: column; width: clamp(300px, 32vw, 600px); padding: calc(var(--header-h) + 30px) clamp(26px, 2.8vw, 48px) 100px;
  background: var(--paper); color: var(--ink);
}
.dn-intro__top { display: flex; align-items: center; gap: 14px; color: rgb(14 20 27 / .5); font-size: 12px; font-weight: 600; }
.dn-intro__top i { flex: 1; height: 1px; background: var(--rule); }
.dn-intro__k { color: var(--green-lo); font-size: 12.5px; font-weight: 750; }
.dn-intro__body { margin-block: auto; padding-block: 28px; }
.dn-intro__count { display: flex; align-items: flex-start; gap: 16px; }
.dn-intro__n { font-size: clamp(96px, 9.5vw, 180px); font-weight: 150; line-height: .78; color: var(--green); font-variant-numeric: tabular-nums; }
.dn-intro__unit { padding-top: .6em; padding-inline-start: 16px; border-inline-start: 1px solid var(--rule); color: rgb(14 20 27 / .55); font-size: 12.5px; font-weight: 600; line-height: 1.7; }
.dn-intro__title { margin-top: 26px; font-size: clamp(30px, 2.7vw, 50px); font-weight: 300; line-height: 1.3; }
.dn-intro__lead { max-width: 25em; margin-top: 12px; font-size: 14.5px; line-height: 1.95; color: rgb(14 20 27 / .62); }
.dn-intro__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--rule); }
.dn-intro__all {
  display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px;
  color: var(--ink); font-weight: 750; font-size: 14px; text-decoration: none; box-shadow: inset 0 -1.5px 0 var(--green);
}
.dn-intro__all .arrow { width: 20px; height: 20px; transition: transform .35s var(--ease-out); }
.dn-intro__all:hover .arrow { transform: scaleX(-1) translateX(4px); }
[dir="ltr"] .dn-intro__all:hover .arrow { transform: translateX(4px); }
.dn-intro__all:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.dn-intro__cue { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; color: rgb(14 20 27 / .5); }
.dn-intro__cue i { position: relative; width: 46px; height: 1.5px; background: rgb(14 20 27 / .25); overflow: hidden; }
.dn-intro__cue i::after { content: ""; position: absolute; inset: 0; background: var(--ink); animation: dn-cue 2s var(--ease-io) infinite; }
@keyframes dn-cue { 0% { transform: translateX(100%); } 60%, 100% { transform: translateX(-100%); } }   /* the way the strip goes */

/* ---------- the cards ---------- */
.dn-card { --tone: #3B403E; --on: #fff; --line: rgb(255 255 255 / .28); width: clamp(320px, 40vw, 760px); background: var(--tone); color: var(--on); }
.dn-card:nth-child(6n+2) { --tone: #774936; }                                                          /* iron oxide, quieter */
.dn-card:nth-child(6n+3) { --tone: #C9D1D6; --on: #15202A; --line: rgb(21 32 42 / .22); }            /* galvanised steel */
.dn-card:nth-child(6n+4) { --tone: #3E5749; }                                                          /* sage, toward the brand green */
.dn-card:nth-child(6n+5) { --tone: #D9CBB8; --on: #2A1D14; --line: rgb(42 29 20 / .22); }            /* sand, less pink */
.dn-card:nth-child(6n+6) { --tone: #2C4049; }                                                          /* blue steel */
.dn-card a { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.dn-card a:focus-visible { outline: 3px solid var(--wire); outline-offset: -6px; }
.dn-card__pic { position: absolute; inset: 0 0 auto; height: 60%; overflow: hidden; background: #1B222B; }
.dn-card__pic img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: translateX(calc(var(--px, 0) * -7%)) scale(1.17); transition: filter .5s; will-change: transform;   /* lags behind its card */
}
.dn-card a:hover .dn-card__pic img { filter: brightness(1.08) saturate(1.08); }
/* the box: rises over the photo while the card enters, then settles (its tail below fills what it uncovers) */
.dn-card__box {
  position: absolute; inset-inline: 0; top: 60%; height: 40%; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(18px, 2.4vh, 30px) clamp(20px, 2.2vw, 34px) 88px; background: var(--tone);                          /* clear of the next-section pill */
  transform: translateY(calc((1 - var(--q, 1)) * -30%)); will-change: transform;
}
.dn-card__box::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 60%; background: inherit; }
.dn-card__facts { display: flex; gap: clamp(14px, 1.6vw, 26px); padding-inline-end: 64px; opacity: calc(var(--q, 1) * 1.4 - .4); }
.dn-card__facts span { flex: 1; max-width: 210px; display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; box-shadow: inset 0 -1px 0 var(--line); font-size: 14px; font-weight: 650; line-height: 1.5; }
.dn-card__facts small { font-size: 11.5px; font-weight: 600; opacity: .68; }
.dn-card__plus { position: absolute; top: clamp(18px, 2.4vh, 30px); inset-inline-end: clamp(20px, 2.2vw, 34px); width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s, box-shadow .3s; }
.dn-card__plus::before, .dn-card__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: currentColor; transition: background-color .3s, transform .4s var(--ease-out); }
.dn-card__plus::after { transform: rotate(90deg); }
.dn-card a:hover .dn-card__plus, .dn-card a:focus-visible .dn-card__plus { background: var(--on); box-shadow: none; }
.dn-card a:hover .dn-card__plus::before, .dn-card a:hover .dn-card__plus::after,
.dn-card a:focus-visible .dn-card__plus::before, .dn-card a:focus-visible .dn-card__plus::after { background: var(--tone); }
.dn-card a:hover .dn-card__plus::after { transform: rotate(180deg); }
.dn-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.dn-card__name {
  font-size: clamp(28px, 2.7vw, 50px); font-weight: 300; line-height: 1.2;
  filter: blur(calc((1 - var(--q, 1)) * 10px)); opacity: calc(.15 + var(--q, 1) * .85);                               /* comes out of a blur */
  transform: translateX(calc((1 - var(--q, 1)) * 24px));                                                              /* and lags a little */
}
.dn-card__no { display: block; margin-top: 8px; font-size: 13px; font-weight: 650; opacity: .78; }
.dn-card__of { flex: none; max-width: 12em; padding-bottom: 4px; text-align: end; font-size: 14px; font-weight: 550; line-height: 1.6; opacity: .88; }

/* ---------- phones: one card and a bit of the next ---------- */
@media (max-width: 760px) {
  .dn-intro, .dn-card { width: 84vw; }
  .dn-intro { padding-bottom: 92px; }
  .dn-intro__lead { font-size: 14px; }
  .dn-card__pic { height: 54%; }
  .dn-card__box { top: 54%; height: 46%; padding: 18px 20px 86px; }
  .dn-card__facts { flex-direction: column; gap: 8px; }
  .dn-card__facts span { max-width: none; }
  .dn-card__plus { width: 38px; height: 38px; top: 18px; inset-inline-end: 20px; }
  .dn-card__foot { flex-direction: column; align-items: stretch; gap: 6px; }
  .dn-card__of { max-width: none; text-align: start; padding: 0; }
  .dn-card__name { font-size: 30px; }
}

/* ---------- without the motion (no JavaScript, reduced motion): a row that scrolls sideways by itself ---------- */
html:not(.js) .dn__stage, html.gr-static .dn__stage { height: auto; min-height: 0; }
html:not(.js) .dn__track, html.gr-static .dn__track {
  position: relative; width: auto; height: min(86vh, 760px); transform: none; box-shadow: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
html:not(.js) .dn-intro, html:not(.js) .dn-card, html.gr-static .dn-intro, html.gr-static .dn-card { scroll-snap-align: start; }
html:not(.js) .dn-intro__cue, html.gr-static .dn-intro__cue { display: none; }   /* it speaks of the scroll-driven strip */