/* DABB — WORK (dabb2): the reel. The light is on the work. Since AMENDMENT 7 the reel lies IN THE SUN (css/base.css
   .in-sun: deep type on the bare sand, lifted by the light — a soft local shade under each block of white type read as a
   dark box here, so the whole section changed rule): round the pictures of the project in focus THE LIGHT COMES UP — a pool
   of the sand's own highlight, brighter than the sand round it — and the pictures cast the sun's soft shadow. The first
   screen's foot ends in exactly the work's own ground (01-hero.js reads --sh-in / --sun-in): no band of shade between them.
   .work__head     label · one headline · one line
   .work__body     the reel: everything below lives in ITS pixels (the script measures the layout this file makes)
     .work__stage::before   THE POOL OF LIGHT of that stage: a wash of the sand's highlight (--sun-rgb at --work-pool)
                   behind a soft elliptical mask round the pictures (--hx --hy its centre, --rx --ry its reach — it closes
                   before the words and before the stage's hairlines). Hidden until the stage is lit; then it comes up to
                   --work-lift. (--gx / --gy, still set by the script, are no longer needed: the light has no grain.)
                   A stage marked data-work-quiet (Labaik Badal) takes no pool of light: the light comes up a little and
                   EVENLY across it (a wide, level band) — a quiet light.
     .work__track  the trackway down the lane, pressed into the sand: dark, like shadow (inline SVG built by the script)
     .work__list > .work__stage   one project, one screen:  .work__text | .work__lane | .work__show (.work__pics + .work__plant)
                   from 900 px: words and pictures side by side, the sides swapping on every second stage;
                   below 900 px: pictures, then words; from 420 px the lane is a gutter at the end side; below 420 px
                   there is no lane (and so no dabb) — only the light.
     .work__canvas the ONE dabb: a small canvas that travels with the animal (moved by transform), above the pictures
   .work__pics     the picture box: aspect-ratio --ar; each .work__pic sits at --x / --y with width --w (percentages of
                   the box, --x measured from the LANE side), turned by --r degrees; .work__pic--over lies on top of the
                   others and is cut out of them with a ring of the page colour.
   State (script):  .work.is-live  stages are dim unless .is-lit      .work.is-on     a stage is lit
                    .work.has-dabb the canvas is in use               .work__stage.is-lit   the stage the light is on
   --m is +1 / -1: the hand of the stage (which side the lane is on) — it mirrors turns and the lit edge.             */

.work {
  --sh: var(--shade-sun); --sh-in: var(--shade-sun);           /* the hour: the sun — from its first pixel: the first screen's foot comes up to meet it (01-hero.js reads --sh-in / --sun-in and ends in exactly this ground: no band of shade where the work begins) */
  --sun-in: var(--sun);
  --shade-ease: clamp(64px, 7vw, 110px);                        /* … and the shade is gone before the first word: the label stands at the top padding */
  --work-lift: 1;                                               /* how far the light comes up round the work in focus */
  --work-pool: 0.52;                                            /* the light's highlight, level over the pictures, over the lifted sand (the step: 01-hero's builder, AMENDMENT 6 "every weak point") */
  --work-gutter: 56px;                                          /* the lane beside a stacked stage (420 – 899 px) */
  --work-mono: clamp(0.6875rem, 0.664rem + 0.095vw, 0.75rem);   /* the Latin value of --fs-xs, for mono figures on the Arabic page too */
  padding-block: clamp(72px, 8vw, 128px) 0;
}

/* ───────── head ───────── */
.work__head { display: grid; gap: var(--s-5); margin-block-end: clamp(40px, 5vw, 72px); }

.work__kicker { color: var(--fg-2); }
.work__lead { color: var(--fg-2); max-inline-size: 34ch; }
@media (min-width: 900px) {
  .work__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .work__kicker { grid-column: 1 / -1; }
  .work__title { grid-column: 1 / span 8; }
  .work__lead { grid-column: 9 / -1; padding-block-end: 0.4em; }
}

/* ───────── the reel ───────── */
.work__body { position: relative; overflow: hidden; overflow: clip visible; }      /* the pool is wider than a phone: cut at the sides only */
.work__list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; }

/* the light, the trackway and the dabb are placed in measured pixels from the body's top-left corner: left / top on
   purpose — they follow the layout (which mirrors), they must not be mirrored a second time */
.work__track { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; color: var(--sand-hole); opacity: 0.66; }      /* pressed into the sand: the sand's own deep tone, like shadow — never a white line */
.work__tail { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0.8; }
.work__prints { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.work__canvas { position: absolute; left: 0; top: 0; z-index: 2; display: none; pointer-events: none; color: var(--fg); }
.work.has-dabb .work__canvas { display: block; }

/* ───────── one stage ───────── */
.work__stage {
  --m: 1; position: relative;
  /* the opening, until the script has measured the stage (it then gives all six in px): round where the pictures stand */
  --hx: 50%; --hy: calc(var(--s-8) + 38vw); --rx: 62vw; --ry: 46vw; --gx: 0px; --gy: 0px;
}
.work__stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(var(--sun-rgb), var(--work-pool));
  /* A CLEAR STEP, not a soft pool: the light lies level over the pictures and the sand round them, then gives way over a
     short, soft edge — the edge of a patch of sun (the penumbra), closed before the lane's far edge and the hairlines */
  -webkit-mask-image: radial-gradient(ellipse var(--rx) var(--ry) at var(--hx) var(--hy), #000 0, #000 72%, rgba(0, 0, 0, 0.9) 77%, rgba(0, 0, 0, 0.55) 83%, rgba(0, 0, 0, 0.2) 88%, rgba(0, 0, 0, 0.05) 92%, transparent 95%);
          mask-image: radial-gradient(ellipse var(--rx) var(--ry) at var(--hx) var(--hy), #000 0, #000 72%, rgba(0, 0, 0, 0.9) 77%, rgba(0, 0, 0, 0.55) 83%, rgba(0, 0, 0, 0.2) 88%, rgba(0, 0, 0, 0.05) 92%, transparent 95%);
  opacity: var(--work-lift);
}
.work.is-live .work__stage::before { opacity: 0; }
.work.is-live .work__stage.is-lit::before { opacity: var(--work-lift); }
/* Labaik Badal: no pool of light — the light comes up a little, evenly, across the whole stage */
.work__stage[data-work-quiet] { --work-lift: 0.34; }              /* (a third of the pool, level: a quiet light) */
.work__stage[data-work-quiet]::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 14%, #000 30%, #000 70%, rgba(0, 0, 0, 0.5) 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 14%, #000 30%, #000 70%, rgba(0, 0, 0, 0.5) 86%, transparent 100%);
}
@media (min-width: 900px) {
  .work__stage { --hx: calc(50% + var(--m) * min(22vw, 334px)); --hy: 50%; --rx: min(32vw, 486px); --ry: 46%; }
}
.work__stage:nth-child(even) { --m: -1; }
[dir="rtl"] .work__stage { --m: -1; }
[dir="rtl"] .work__stage:nth-child(even) { --m: 1; }

.work__in { position: relative; z-index: 1; display: grid; row-gap: var(--s-7); padding-block: var(--s-8); }
.work__in::before {                                             /* the hairline between stages, inside the page margins */
  content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--margin);
  block-size: var(--hair); background: var(--rule);
}
.work__lane { display: none; }

@media (min-width: 420px) and (max-width: 899.98px) {
  .work__in { padding-inline-end: calc(var(--margin) + var(--work-gutter)); }
  .work__lane { display: block; position: absolute; inset-block: 0; inset-inline-end: calc(var(--margin) - 12px); inline-size: var(--work-gutter); }
}
@media (min-width: 900px) {
  .work__in {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center;
    min-block-size: clamp(560px, 76vh, 880px); padding-block: clamp(64px, 9vh, 112px);
  }
  .work__text { grid-row: 1; grid-column: 1 / span 5; }
  .work__lane { display: block; grid-row: 1; grid-column: 6; align-self: stretch; }
  .work__show { grid-row: 1; grid-column: 7 / -1; }
  .work__stage:nth-child(even) .work__text { grid-column: 8 / -1; }
  .work__stage:nth-child(even) .work__lane { grid-column: 7; }
  .work__stage:nth-child(even) .work__show { grid-column: 1 / span 6; }
}

/* ───────── pictures ───────── */
.work__show { position: relative; min-inline-size: 0; }           /* the picture box and, beside the pictures, the project's plant */
.work__pics { position: relative; inline-size: 100%; aspect-ratio: var(--ar, 1.25); }
/* THE PROJECT'S PLANT: rooted at --px / --py of the picture box (measured from the lane side, like a picture's --x),
   on the sand under the pictures' level. Its species, its seed and its state come from the data (04-work.html, 04-work.js).
   In the shade it is dim like everything else there; when the shade lifts round the project it stands in the light. */
.work__plant {
  --plant: clamp(68px, 9.4vw, 140px);
  position: absolute; z-index: 0; inset-block-start: calc(var(--py, 50) * 1%); inset-inline-start: calc(var(--px, 50) * 1%);
  margin-block-start: calc(var(--plant) / -2); margin-inline-start: calc(var(--plant) / -2);
}
.work__stage:nth-child(even) .work__plant { inset-inline-start: auto; inset-inline-end: calc(var(--px, 50) * 1%); margin-inline: 0 calc(var(--plant) / -2); }
.work__stage[data-service="brand"] .work__plant { --plant: clamp(54px, 7vw, 96px); }      /* the arfaj: a low cushion */
.work.is-live .work__plant { opacity: 0.62; }
.work.is-live .work__stage.is-lit .work__plant { opacity: 1; }
.work.is-live .work__pics { cursor: pointer; }
.work__pic {
  --dy: 0px;
  position: absolute; inset-block-start: calc(var(--y, 0) * 1%); inset-inline-start: calc(var(--x, 0) * 1%);
  inline-size: calc(var(--w, 100) * 1%);
  border-radius: var(--r-1);
  outline: var(--hair) solid var(--rule); outline-offset: -1px;
  transform: translate3d(0, var(--dy), 0) rotate(calc(var(--r, 0) * var(--m) * 1deg));
}
.work__stage:nth-child(even) .work__pic { inset-inline-start: auto; inset-inline-end: calc(var(--x, 0) * 1%); }
.work__pic > img { display: block; inline-size: 100%; block-size: auto; border-radius: inherit; background: var(--bg-2); }
.work__pic--over { z-index: 1; box-shadow: 0 0 0 clamp(2px, 0.25vw, 3px) rgba(var(--shade-rgb), 0.62); }      /* cut out of the picture under it by a fine line of shade */
/* A picture in the light LIES ON THE SAND: it casts the one shadow of this ground — the sun's, down and away from the top
   left, like the dabb's own (the only shadow in dabb2: a cast shadow, never a card's glow). Physical on purpose: the sun
   does not move when the page is mirrored. */
.work__pic::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 10px 14px 26px rgba(var(--shade-rgb), 0.34), 3px 4px 6px rgba(var(--shade-rgb), 0.24);      /* (AMENDMENT 7: a noon shadow on sand is soft) */
  opacity: 1;
}
.work.is-live .work__pic::after { opacity: 0; }
.work.is-live .work__stage.is-lit .work__pic::after { opacity: 1; }
.work__stage[data-work-quiet] .work__pic::after { box-shadow: 6px 9px 20px rgba(var(--shade-rgb), 0.26); }

/* dim until the light is on it */
.work.is-live .work__pics { opacity: 0.35; filter: grayscale(0.92); }
.work.is-live .work__text > * { opacity: 0.96; }                /* (a step back, no more: its quiet lines still measure 4.7 : 1 on the darkest grain, lifted) */
.work.is-live .work__stage.is-lit .work__pics { opacity: 1; filter: grayscale(0); }
.work.is-live .work__stage.is-lit .work__text > * { opacity: 1; }
.work.is-live .work__stage:not(.is-lit) .work__pic { --dy: calc(var(--d, 0) * 12px); }

@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .work.is-live .work__stage::before { transition: opacity 1100ms var(--e-std); }      /* the shade closes behind the light and opens ahead of it */
  html:not(.is-calm) .work.is-live .work__pics { transition: opacity var(--t-4) var(--e-std), filter var(--t-4) var(--e-std); }
  html:not(.is-calm) .work.is-live .work__text > * { transition: opacity var(--t-3) var(--e-std); }
  html:not(.is-calm) .work.is-live .work__pic { transition: transform var(--t-4) var(--e-dash) calc(var(--d, 0) * 70ms); }
  html:not(.is-calm) .work.is-live .work__pic::after { transition: opacity var(--t-4) var(--e-std) 200ms; }
  html:not(.is-calm) .work.is-live .work__plant { transition: opacity var(--t-4) var(--e-std); }
}

/* ───────── words ───────── */
.work__text { min-inline-size: 0; }
/* the index is a Latin mono run in both languages (.num is left-to-right): a block as wide as its figures, so it still
   starts at the text's own start edge in Arabic; its size is the Latin label size on both pages */
.work__idx { inline-size: fit-content; margin-block-end: var(--s-5); font-size: var(--work-mono); font-weight: 500; letter-spacing: 0.08em; color: var(--fg); }
.work__idx-of { margin-inline-start: 0.35em; color: var(--fg-2); }
.work__name { margin-block-end: var(--s-4); text-wrap: balance; }
.work__line { max-inline-size: 30ch; margin-block-end: var(--s-5); color: var(--fg-2); }
.work__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; margin-block-end: var(--s-6);
  font-family: var(--f-mono); font-size: var(--fs-xs); line-height: 1.6; letter-spacing: 0.04em; color: var(--fg-2);
}
.work__meta::before {                                           /* the one small mark of the stage: its service's colour */
  content: ""; align-self: center; flex: none; inline-size: 7px; block-size: 7px; margin-inline-end: var(--s-3);
  border-radius: 50%; background: var(--accent-mark);
}
.work__stage[data-state="live"] .work__meta::before { background: var(--green-text); }      /* a live product: its dot and its word are Najd green — life and growth (04-work.js, stateOf) */
.work__live { color: var(--green-text); }
.work__sep { white-space: pre; }
@media (max-width: 899.98px) {                                  /* a phone: the genre on its line, the status under it (no middot left hanging at a line's end) */
  .work__sep { display: none; }
  .work__status { flex-basis: 100%; padding-inline-start: calc(7px + var(--s-3)); }
}
html[lang="ar"] .work__meta { font-family: var(--f-text); font-size: var(--fs-sm); letter-spacing: 0; }
.work__acts { display: grid; gap: var(--s-4); justify-items: start; }
.work__links { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.work__pill { gap: var(--s-2); max-inline-size: 100%; }
.work__ext { inline-size: 0.95em; block-size: 0.95em; opacity: 0.7; }

@media (max-width: 899.98px) {
  .work__line { max-inline-size: 34ch; }
  .work__pill { white-space: normal; padding-block: 8px; text-align: start; }
}