/* DABB 2 — THE FIRST SCREEN, ON SAND (01-hero): WORKSITES IN THE SAND (AMENDMENT 10). One full-bleed picture, the type on it white.
   · behind everything ONE canvas (.hero__canvas), edge to edge — it also lies behind the top bar: desert sand, a
     transparent shade, one patch of sun, flat sand with one far ṭaʿs in a corner, the tool marks pressed into the sand, OUR WORK DUG INTO IT AS WORKSITES
     with each work's own crew working round it, their small scenes, a few plants of Najd (js/parts/01-hero.js). It never
     takes the pointer. The shade's tone is --shade-rgb (read by the script); what looks dark here is shade over sand, never
     a black field. Under the canvas the section is what every section is (css/base.css): a shade over the page's own sand —
     that is what shows until the picture is painted, and without scripts. At its bottom edge the canvas fades out (a mask)
     into exactly that: the page's sand in the ground the next section begins in (the work: in the sun — no shade, the sun's
     lift; read from that section by the script: --hero-foot-sh, --hero-foot-sun) — no seam, no band of shade;
   · the words stand at the BOTTOM of the screen: the headline (two lines, weight 500) low on the start side, a hairline
     right across, then one sentence + ONE white pill (start side) and the label + THE SEVEN NAMES of our work (end side),
     each a link to its project page (.hero__work), in the work's own ground, in the sun (deep type once the picture lives);
   · THE WORKSITES' OWN LINKS (.hero__sites › .hero__site, made and placed by the script over the picture): for the pointer
     only (aria-hidden, out of the tab order — the names below carry the links). A WORK'S NAME stands by its site
     (.hero__name: the small label on its pill of shade) while it is pointed at, its name below is pointed at or focused, or
     the sun's round rests on it (.is-named); the name below is underlined meanwhile (.hero__work.is-on).
   · .hero__tag: the small labels on the picture (placed by the script in the section's own pixels) — a tool mark's name (the
     tools' names are Latin on both pages), a crew member's part in its project in the project's own words (.is-say: the page's
     own direction and face), a host's project — its own name over its own line, wrapped (.is-host) — a plant's names
     (.is-plant: Arabic · transliteration · Latin).
   LIGHT (AMENDMENT 7, lighter): the shade is two thirds of --shade-dusk over the open ground (.16) and, under type, only what
   white needs there — in ROUND POOLS (2026-10-20, the owner: the old shades read as dark rectangles): each group of white type
   stands in one soft elliptical pool, as dense in its middle as the lightest ripple behind it asks, falling away over a long
   smootherstep — never a box or a band (the script). The sun's light follows a mouse over the sand (eased, ~0.14 s behind;
   back to its round when the pointer rests 2 s or leaves), never under the type. Every piece of type is measured
   (DABB.hero.contrast()).
   A PHONE (below 700 px: one worksite at a time) has THE TRAIL above the headline instead of the row of names (see THE TRAIL below).
   Layout: one column below 860 px; from 860 the names stand beside the sentence. Everything is logical (inline-start / -end):
   the Arabic page is the mirror by construction.
   Exports nothing. Reads: --header-h, --band-total, --dock-h (chrome); the bottom padding keeps the last row clear of the chat
   bubble (00-wa: 48 / 52 px high, 16 / 24 px from the corner, lifted by the dock). */

.hero.sec {
  --hero-top: calc(var(--header-h) + var(--band-total, 10px));         /* what the fixed chrome covers */
  --hero-ground: 150px;                                                /* the least open ground above the headline (the words stand at the bottom: whatever is left over is ground too) */
  --hero-bot: calc(var(--dock-h, 0px) + 76px);
  --hero-fit: 10.5;                                                    /* the longer headline line is about this many ems wide */
  --hero-fs: min(var(--fs-hero), (100vw - 2 * var(--margin)) / var(--hero-fit), 13svh);
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  display: flex; flex-direction: column;
  min-block-size: 100vh; min-block-size: max(640px, 100svh);
  padding-block: 0;
  --sh: var(--shade-night, 0.86);
  --hero-foot-sh: var(--shade-sun, 0);                                 /* THE SEAM: the ground the next section begins in (the work: in the sun — no shade, the sun's lift). The script reads it from that section and writes it here (01-hero.js, foot) */
  --hero-foot-sun: var(--sun-lift, 0.12);
  background-color: transparent;                                       /* the page's sand lies under it — and its own shade: */
  background-image:
    linear-gradient(to bottom, rgba(var(--sun-rgb, 242, 211, 162), 0) calc(100% - 140px), rgba(var(--sun-rgb, 242, 211, 162), var(--hero-foot-sun)) calc(100% - 40px), rgba(var(--sun-rgb, 242, 211, 162), var(--hero-foot-sun)) 100%),
    linear-gradient(to bottom, rgba(var(--shade-rgb, 12, 9, 6), var(--shade-word, 0.48)) 0, rgba(var(--shade-rgb, 12, 9, 6), calc(var(--shade-dusk, 0.24) * 0.68)) 18%, rgba(var(--shade-rgb, 12, 9, 6), calc(var(--shade-dusk, 0.24) * 0.68)) 40%, rgba(var(--shade-rgb, 12, 9, 6), var(--shade-title, 0.28)) 50%, rgba(var(--shade-rgb, 12, 9, 6), var(--shade-word, 0.48)) 64%, rgba(var(--shade-rgb, 12, 9, 6), var(--shade-word, 0.48)) 86%, rgba(var(--shade-rgb, 12, 9, 6), var(--hero-foot-sh)) calc(100% - 40px), rgba(var(--shade-rgb, 12, 9, 6), var(--hero-foot-sh)) 100%);      /* (about what the picture itself carries — AMENDMENT 7: two thirds of --shade-dusk over the open ground, what white needs where the type is — so nothing jumps when the picture comes; without scripts the words keep their contrast on this alone. Its last 40 px — where the picture gives way to it — are the next section's own ground: no seam) */
  color: var(--fg);
}
/* … and where a script will paint the picture (html.js), the ground it fades in over is the picture's own in brief: the open hour,
   ONE soft round pool of shade round the words (start side, low), one round the label and the seven names (end side; in one column,
   under the pill, across) and one along the top bar — round, as the picture's are (the owner, 2026-10-20: no bands, no boxes), so
   that nothing changes shape when the picture comes. They are what a visitor sees for a second or so before the picture (or for good,
   if the hero's script fails), and the label and the names are still white then (deep only once the picture lives), so they keep
   white type readable on their own: measured in WebKit on the bare ground (the lightest pixel in each line's box), EN and AR at
   1280 × 720 – 1920 × 1080, the headline 4.8 : 1 or more, the sentence, its link, the menu and the logo 4.8 : 1 or more, the label and
   the names 5.6 : 1 or more; in one column (700 – 859 px) the names 5.6 : 1 or more (2026-10-20 — the names' pool came with the
   integration check: without it the names fell to 3.9 : 1). Without a script the bands above stay. */
html.js .hero.sec {
  --hp-x: 34%; --hp-y: 60%; --hp-w: 80%; --hp-h: 44%;                 /* the words' pool: where, how large (of the section) — a phone has its own, below */
  --hn-x: 74%; --hn-y: calc(100% - var(--hero-bot) - 125px); --hn-w: 32%; --hn-h: 130px; --hn-a: 0.22;   /* the names' pool: the label and the seven names (end side, level with the sentence's first lines) */
  --hl-x: calc(var(--margin, 72px) + 54px);                            /* the logo's */
  background-image:
    linear-gradient(to bottom, rgba(var(--sun-rgb, 242, 211, 162), 0) calc(100% - 140px), rgba(var(--sun-rgb, 242, 211, 162), var(--hero-foot-sun)) calc(100% - 40px), rgba(var(--sun-rgb, 242, 211, 162), var(--hero-foot-sun)) 100%),
    radial-gradient(ellipse var(--hp-w) var(--hp-h) at var(--hp-x) var(--hp-y), rgba(var(--shade-rgb, 12, 9, 6), 0.4) 0, rgba(var(--shade-rgb, 12, 9, 6), 0.4) 58%, rgba(var(--shade-rgb, 12, 9, 6), 0.18) 82%, rgba(var(--shade-rgb, 12, 9, 6), 0) 100%),
    radial-gradient(ellipse var(--hn-w) var(--hn-h) at var(--hn-x) var(--hn-y), rgba(var(--shade-rgb, 12, 9, 6), var(--hn-a)) 0, rgba(var(--shade-rgb, 12, 9, 6), var(--hn-a)) 58%, rgba(var(--shade-rgb, 12, 9, 6), calc(var(--hn-a) * 0.45)) 82%, rgba(var(--shade-rgb, 12, 9, 6), 0) 100%),
    radial-gradient(ellipse 62% 130px at 50% 44px, rgba(var(--shade-rgb, 12, 9, 6), 0.36) 0, rgba(var(--shade-rgb, 12, 9, 6), 0.36) 60%, rgba(var(--shade-rgb, 12, 9, 6), 0) 100%),
    radial-gradient(ellipse 200px 110px at var(--hl-x) 44px, rgba(var(--shade-rgb, 12, 9, 6), 0.26) 0, rgba(var(--shade-rgb, 12, 9, 6), 0.26) 45%, rgba(var(--shade-rgb, 12, 9, 6), 0) 100%),
    linear-gradient(to bottom, rgba(var(--shade-rgb, 12, 9, 6), calc(var(--shade-dusk, 0.24) * 0.68)) 0, rgba(var(--shade-rgb, 12, 9, 6), calc(var(--shade-dusk, 0.24) * 0.68)) calc(100% - 150px), rgba(var(--shade-rgb, 12, 9, 6), var(--hero-foot-sh)) calc(100% - 40px), rgba(var(--shade-rgb, 12, 9, 6), var(--hero-foot-sh)) 100%);
}
html.js[dir="rtl"] .hero.sec { --hp-x: 66%; --hn-x: 26%; --hl-x: calc(100% - var(--margin, 72px) - 54px); }
@media (max-width: 859.98px) {                                         /* (one column: the names under the sentence's pill, across) */
  html.js .hero.sec, html.js[dir="rtl"] .hero.sec { --hn-x: 50%; --hn-y: calc(100% - var(--hero-bot) - 40px); --hn-w: 85%; --hn-h: 110px; --hn-a: 0.3; }
}
@media (max-width: 699px) {
  html.js .hero.sec, html.js[dir="rtl"] .hero.sec { --hp-x: 50%; --hp-y: 66%; --hp-w: 120%; --hp-h: 34%; --hn-a: 0; }   /* (a phone: the trail in place of the row of names; the Arabic page too — the rules above for it are stronger: the checks, 2026-10-20, its names' pool on an Arabic phone, its words' pool off the middle) */
}
html[lang="ar"] .hero.sec { --hero-fit: 6.2; }
html[lang="ar"] .hero__title { line-height: 1.2; }                      /* two short lines: they may stand closer than a paragraph of display type */

/* ── the living ground ── */
.hero__canvas {
  position: absolute; inset: 0; z-index: 0; display: block;
  inline-size: 100%; block-size: 100%;
  scroll-margin-block-start: var(--hero-top);                          /* (a probe: the script reads the chrome's height from here) */
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent calc(100% - 2px));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent calc(100% - 2px));       /* its last stretch gives way to the page's own sand under the same shade (short: the openings of the row, and the dabb at their rim — all of it in the picture: FOOT in the script — stand close above it) */
  opacity: 0; transition: opacity var(--t-3) var(--e-std);
}
.hero.is-live .hero__canvas { opacity: 1; }
html.is-calm .hero__canvas { transition: none; }

/* ── the words ── */
.hero__in {
  position: relative; z-index: 1; flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: calc(var(--hero-top) + var(--hero-ground)) var(--hero-bot);
}
.hero__title { font-size: var(--hero-fs); color: var(--fg); }
.hero__title .ln > span { white-space: nowrap; }
.hero__title .ln { padding-block-end: 0.3em; margin-block-end: -0.3em; }      /* the reveal's mask (.ln, overflow hidden) must not cut the tails of g, y and p: room below the base line, the same layout */
@media (max-width: 1099.98px) {                                /* "that keep your head high" and its mark: where the line does not fit, it breaks (never the mark alone: a no-break space ties it to the last word) */
  .hero__title .ln > span { white-space: normal; text-wrap: balance; }
}
.hero__rule { block-size: var(--hair); background: var(--rule-2); margin-block: clamp(18px, 3.2svh, 34px) clamp(20px, 3.2svh, 32px); }

.hero__foot { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px; }    /* (one column: the row's label band, as high as a name's pill, is 12 px higher than the label alone — taken from what was 28: the ground above the headline keeps its height) */
.hero__lead { max-inline-size: 31em; color: var(--fg); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-block-start: var(--s-5); }
.hero__more { color: var(--fg); }

/* ── the label and the row of names: our work ── */
.hero__marks { display: grid; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; align-self: start; }
.hero__row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 10px; min-inline-size: 0; }
.hero__lab { display: flex; align-items: center; white-space: nowrap; color: var(--fg); transition: color var(--t-3) var(--e-std); }
.hero.is-live .hero__lab { color: var(--sun-ink); }                    /* … in deep type once the picture lives: the row stands in the work's ground, in the sun (01-hero.js lifts the shade there; measured: contrast().label) */

/* THE SEVEN NAMES, each a link to its project page: the sentence's text face, a fine dot between them; underlined while its
   site is pointed at (.is-on, by the script), hovered or focused. Every name carries its dot BEFORE it, and the list reaches
   that far past its start edge, clipped there: a dot that would begin a line is out of sight (the critics: "• Jinaya • Labaik
   Badal" on a line of its own looked unfinished); a little room is kept round the rest for the underline and the focus ring */
.hero__works { --dot: 21px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px calc(var(--dot) + 4px); list-style: none; min-inline-size: 0;
  margin-block: -4px; margin-inline: 0 -4px; padding-block: 4px; padding-inline: 0 4px; overflow: hidden; overflow: clip; }
.hero__works > li { display: flex; align-items: center; margin-inline-start: calc(var(--dot) * -1); }   /* (each name reaches back over the gap with its dot: the first of a line reaches past the list's edge, where it is clipped) */
.hero__works > li::before { content: ""; inline-size: 3px; block-size: 3px; border-radius: 50%; background: currentColor; opacity: 0.42; margin-inline: 8px 10px; flex: none; }
.hero__work {
  font-family: var(--f-text); font-size: 15px; line-height: 1.5; font-weight: 500; letter-spacing: 0; color: var(--fg); text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
  transition: background-size var(--t-1) var(--e-std), color var(--t-3) var(--e-std);
}
html[dir="rtl"] .hero__work { background-position: 100% 100%; }
.hero.is-live .hero__works > li, .hero.is-live .hero__work { color: var(--sun-ink); }
.hero__work:hover, .hero__work:focus-visible, .hero__work.is-on { background-size: 100% 1px; }

/* THE WORKSITES' OWN LINKS, over the picture (the picture itself is the script's): for the pointer only — the names above carry
   the links for the keyboard and for assistive technology. A WORK'S NAME stands by its site (.hero__name: the small label on
   its pill of shade, placed by the script) while it is pointed at, its name below is, or the sun's round rests on it */
.hero__sites { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__site { position: absolute; display: none; border-radius: 27%; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.hero__site--plate { border-radius: 14%; }
.hero__name {
  --name-shade: 0.52;
  position: absolute; z-index: 2; left: 0; top: 0;                    /* (physical px, set by the script: beside its site) */
  display: block; padding: 6px 11px; border-radius: var(--r-pill);
  background: rgba(var(--shade-rgb, 12, 9, 6), var(--name-shade)); color: var(--fg);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--t-1) var(--e-std);
}
.hero__site.is-named > .hero__name { opacity: 1; }

/* ── a tool mark's name, beside it: the small label, white on a pill of shade ── */
.hero__tag {
  --tag-shade: 0.52;
  position: absolute; z-index: 2; inset-block-start: 0; left: 0;       /* (physical: the script places it in the section's own pixels) */
  display: block; padding: 6px 11px; border-radius: var(--r-pill);
  background: rgba(var(--shade-rgb, 12, 9, 6), var(--tag-shade)); color: var(--fg);
  white-space: nowrap; direction: ltr; pointer-events: none;
  opacity: 0; transition: opacity var(--t-2) var(--e-std);
}
html[lang="ar"] .hero__tag { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; }      /* the tools' names are Latin on both pages */
/* … and a plant's: the Arabic name · its transliteration · the Latin name (in italics, as a flora sets it). On the Arabic page the Arabic name leads from the right */
.hero__tag.is-plant { display: flex; align-items: baseline; gap: 0.62em; }
.hero__tag.is-plant > * { unicode-bidi: isolate; }
.hero__tag-ar { font-family: var(--f-text); font-size: 1.22em; font-weight: 500; letter-spacing: 0; line-height: 1; text-transform: none; }
.hero__tag i { font-style: italic; text-transform: none; letter-spacing: 0.02em; }
html[lang="ar"] .hero__tag.is-plant { direction: rtl; }
/* … and a crew member's part in its project, in the project's own words, as the project writes them (no capitals: "iOS" stays
   "iOS" — the page's own direction; Arabic in its own face) */
.hero__tag.is-say { direction: ltr; text-transform: none; letter-spacing: 0.02em; }
html[dir="rtl"] .hero__tag.is-say { direction: rtl; }
html[lang="ar"] .hero__tag.is-say { font-family: var(--f-text); text-transform: none; letter-spacing: 0; font-size: 0.8125rem; }
/* … and a host's: its project's own name (the label's own mono) over the project's own line, in the text face, wrapped */
.hero__tag.is-host { white-space: normal; inline-size: max-content; max-inline-size: 18.5rem; padding: 8px 13px 9px; border-radius: 12px; font-family: var(--f-text); font-size: 0.8125rem; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.hero__tag-n { display: block; margin-block-end: 2px; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hero__tag-l { display: block; }
html[lang="ar"] .hero__tag-n { font-family: var(--f-text); font-size: 0.8125rem; letter-spacing: 0; font-weight: 600; text-transform: none; }
.hero__tag.is-on { opacity: 1; }
html.is-calm .hero__tag { transition: none; }

/* ── from 860: the marks beside the sentence ── */
@media (min-width: 860px) {
  .hero.sec { --hero-ground: 120px; }
  .hero__foot { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
  .hero__marks { inline-size: clamp(330px, 40vw, 600px); margin-block-start: 3px; }   /* (the label level with the sentence's first line) */
}
@media (min-width: 900px) {
  .hero.sec { --hero-bot: calc(var(--dock-h, 0px) + clamp(92px, 11svh, 124px)); }
}
/* a SHORT phone (375 × 667): the whole first screen within the window, so that the names end above the chat bubble and the dock
   (the critics: at first paint the bubble and the dock lay over five of the seven names) — less open ground, a little less air */
@media (max-width: 699px) and (max-height: 700px) {
  .hero.sec { --hero-ground: 96px; }
  .hero__rule { margin-block: 12px 14px; }
  .hero__lead { line-height: 1.42; }
  .hero__cta { margin-block-start: 14px; }
  .hero__foot { row-gap: 10px; }
  .hero__row { row-gap: 6px; }
  .hero__works { row-gap: 2px; }
}

/* ── THE TRAIL (a phone, below 700 px — the first screen holds one worksite at a time; 01-hero.js, THE TRAIL). Seven small openings
   pressed into the sand just above the headline, one per work, along a DABB'S TRAIL — its feet left and right, the drag of its tail
   between (pressed: the side towards the sun, top-left, in shade; the far side catching light) — so that it reads as the ground, not
   as the dock's line of coloured dots at the foot of the screen. The work in view (.is-now) opens wide and is lit — a bright rim, the
   sun's warmth round it, its own mark crisp on its floor — and beside it its name on a pill of shade, a line of light under the name
   running out (the script's scaleX) before the next work comes. The others are smaller and shallower, each still showing its own
   mark in its floor (the check: in a thumbnail, dim marks read as the dock's dots).
   LABAIK BADAL (.is-plate) is not dug: a small plate laid on smoothed sand, a hairline and four corner brackets — as on the desktop.
   The openings glide to their places when the work in view changes (the script's FLIP); calm: no glide, no line. ── */
.hero__trail { display: none; }
@media (max-width: 699px) {
  .hero.sec { touch-action: pan-y pinch-zoom; }                        /* (a sideways swipe on the ground is the script's: the next work — the page still scrolls and zooms) */
  .hero__site > .hero__name { display: none; }                         /* (the trail carries the name of the work in view) */
  html.js .hero__marks:not(:focus-within) {                            /* (… and the seven works: the row of their names under the sentence is the trail's now — it gave the
                                                                          picture the room the trail takes, and on a short phone the names lay under the dock and the bubble.
                                                                          Every work is one tap away on the trail, its project one more tap on the worksite; "See our work"
                                                                          leads to them all. Hidden from the eye only: a screen reader still reads the seven links (the
                                                                          sr-only pattern), and the keyboard's focus on one shows the row. Without scripts the names stay) */
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  html.js .hero__trail {
    --trail-shade: 0.56;
    order: -1; position: relative; display: flex; align-items: center; justify-content: space-between;
    block-size: 40px; margin-block: 0 14px; margin-inline: -4px;
  }
  html.js .hero__trail::before {                                       /* the dabb's trail: feet left and right, the drag of the tail between */
    content: ""; position: absolute; inset-inline: 10px; inset-block-start: calc(50% - 7px); block-size: 14px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='.9'%3E%3Cpath d='M0 7.6Q4.5 6 9 7.6T18 7.6' stroke='rgba(255,236,206,.3)'/%3E%3Cpath d='M0 7Q4.5 5.4 9 7T18 7' stroke='rgba(43,26,12,.36)'/%3E%3C/g%3E%3Cg fill='rgba(255,236,206,.3)'%3E%3Cellipse cx='4.6' cy='3.1' rx='1.5' ry='.95' transform='rotate(-24 4.6 3.1)'/%3E%3Cellipse cx='13.6' cy='11.6' rx='1.5' ry='.95' transform='rotate(24 13.6 11.6)'/%3E%3C/g%3E%3Cg fill='rgba(43,26,12,.42)'%3E%3Cellipse cx='4' cy='2.5' rx='1.5' ry='.95' transform='rotate(-24 4 2.5)'/%3E%3Cellipse cx='13' cy='11' rx='1.5' ry='.95' transform='rotate(24 13 11)'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 50% / 18px 14px;
  }
  html[dir="rtl"].js .hero__trail::before { transform: scaleX(-1); }   /* (the trail runs the other way on the Arabic page) */
  .hero__stop {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
    min-inline-size: 30px; block-size: 40px; padding: 0 3px; border: 0; border-radius: var(--r-pill); background: none; color: var(--fg);
    font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--t-2) var(--e-std);
  }
  .hero__pit {
    position: relative; flex: none; inline-size: 20px; block-size: 20px; border-radius: 50%;
    background: rgba(var(--shade-rgb, 12, 9, 6), 0.4);
    box-shadow: inset 1.6px 2px 2.4px rgba(var(--shade-rgb, 12, 9, 6), 0.72), inset -1px -1.2px 1.4px rgba(255, 236, 206, 0.34), 0.6px 0.9px 0 rgba(255, 236, 206, 0.5);
    transition: inline-size var(--t-2) var(--e-std), block-size var(--t-2) var(--e-std), box-shadow var(--t-2) var(--e-std);
  }
  .hero__pit > img {
    position: absolute; inset: 3px; inline-size: calc(100% - 6px); block-size: calc(100% - 6px); border-radius: 30%; object-fit: cover;
    opacity: 0.9; transition: opacity var(--t-2) var(--e-std), inset var(--t-2) var(--e-std);
    pointer-events: none; -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none;   /* (a long press on a mark: the button's, never the image's menu) */
  }
  .hero__stop.is-now .hero__pit {
    inline-size: 30px; block-size: 30px;
    box-shadow: inset 2px 2.6px 3px rgba(var(--shade-rgb, 12, 9, 6), 0.6), inset -1.2px -1.4px 1.6px rgba(255, 236, 206, 0.45),
                0 0 0 1.5px rgba(255, 240, 214, 0.92), 0 0 18px 4px rgba(var(--sun-rgb, 248, 203, 144), 0.55);
  }
  .hero__stop.is-now .hero__pit > img { inset: 5px; inline-size: calc(100% - 10px); block-size: calc(100% - 10px); opacity: 1; }
  .hero__stop.is-plate .hero__pit {                                     /* Labaik Badal: a plate laid ON smoothed sand — raised, not dug */
    border-radius: 3px; background: rgba(var(--sun-rgb, 248, 203, 144), 0.4);
    box-shadow: 0.6px 1px 1.4px rgba(var(--shade-rgb, 12, 9, 6), 0.5), inset 0 0 0 0.75px rgba(255, 255, 255, 0.55);
  }
  .hero__stop.is-plate .hero__pit::after {                              /* … its four corner brackets */
    content: ""; position: absolute; inset: -3.5px; pointer-events: none; --b: rgba(255, 255, 255, 0.85);
    background: linear-gradient(var(--b), var(--b)) 0 0 / 4px 1px, linear-gradient(var(--b), var(--b)) 0 0 / 1px 4px,
                linear-gradient(var(--b), var(--b)) 100% 0 / 4px 1px, linear-gradient(var(--b), var(--b)) 100% 0 / 1px 4px,
                linear-gradient(var(--b), var(--b)) 0 100% / 4px 1px, linear-gradient(var(--b), var(--b)) 0 100% / 1px 4px,
                linear-gradient(var(--b), var(--b)) 100% 100% / 4px 1px, linear-gradient(var(--b), var(--b)) 100% 100% / 1px 4px;
    background-repeat: no-repeat;
  }
  .hero__stop.is-plate.is-now .hero__pit { border-radius: 4px; box-shadow: 0.8px 1.2px 1.8px rgba(var(--shade-rgb, 12, 9, 6), 0.5), inset 0 0 0 0.75px rgba(255, 255, 255, 0.6), 0 0 18px 4px rgba(var(--sun-rgb, 248, 203, 144), 0.5); }
  .hero__stop-say { display: none; }
  .hero__stop.is-now .hero__stop-say {
    position: relative; display: block; padding: 6px 11px 8px; border-radius: var(--r-pill);
    background: rgba(var(--shade-rgb, 12, 9, 6), var(--trail-shade)); color: var(--fg); white-space: nowrap;
    animation: hero-say var(--t-2) var(--e-std) both;
  }
  .hero__stop-name { display: block; color: var(--fg); }
  .hero__stop.is-now .hero__stop-say::after, .hero__stop-time {        /* the line of light: its track, and the time passed */
    position: absolute; inset-inline: 11px; inset-block-end: 3px; block-size: 1.5px; border-radius: 1px;
  }
  .hero__stop.is-now .hero__stop-say::after { content: ""; background: rgba(255, 255, 255, 0.2); }
  .hero__stop-time { z-index: 1; background: rgb(var(--sun-rgb, 248, 203, 144)); transform: scaleX(0); transform-origin: left center; }
  html[dir="rtl"] .hero__stop-time { transform-origin: right center; }
  html.is-calm .hero__stop-time, html.is-calm .hero__stop.is-now .hero__stop-say::after { display: none; }
}
@media (max-width: 699px) and (max-height: 700px) {
  html.js .hero__trail { block-size: 34px; margin-block-end: 9px; }
  .hero__stop { block-size: 34px; }
  .hero__stop.is-now .hero__pit { inline-size: 26px; block-size: 26px; }
  .hero__stop.is-now .hero__stop-say { padding: 5px 10px 7px; }
}
@keyframes hero-say { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero__lab, .hero__name, .hero__tag, .hero__work { transition: none; }
  .hero__stop, .hero__pit, .hero__pit > img { transition: none; }
  .hero__stop.is-now .hero__stop-say { animation: none; }
}
html.is-calm :is(.hero__lab, .hero__name, .hero__work) { transition: none; }
@media print {
  .hero.sec, html.js .hero.sec { min-block-size: 0; background-image: none; }
  .hero__canvas, .hero__tag, .hero__sites { display: none; }
  .hero__in { padding-block: var(--s-7); }
}