/* DABB — how we work (about page).
   The head · THE TRAIL (five stops along a dabb's trackway; a living dabb walks it) · commitments · the numbers · clients.
   The trail has two flows, told to the script by --m-flow:
     y  (default)       the trackway runs DOWN a column on the start edge, the stops are stacked beside it
     x  (from 1200 px)  the trackway runs ALONG a strip the width of the wrap, the stops sit under it in five columns
   State set by js/parts/07-method.js:  li.method__stop.is-ahead / .is-here  ·  g.method__set.is-on                       */

.method {
  /* the hour: IN THE SUN (amendment 7, 2026-10-16 — several viewers found the site dark; this band, between the light plate and
     the light close, was the darkest stretch of the about page): the section carries .in-sun (base.css) — the bare sand,
     lifted, and deep type; the plate above and the close below stand in the same sun, so no hour changes at its edges */
  --m-flow: y;
  --m-rail: 64px;                        /* flow y: width of the trackway's column */
  --m-strip: 116px;                      /* flow x: height of the trackway's strip … */
  --m-axis: 44px;                        /* … and where the tail line runs in it, from its top */
  --m-bleed: 24px;                       /* the animal's canvas is this much larger than the track on every side */
  --m-gap: clamp(56px, 6.5vw, 96px);     /* air between the blocks */
  --m-mark: var(--accent-text);          /* station marks: ink at Noon, yellow at Night — never yellow on white */
  --m-fig: clamp(2.75rem, 1.2rem + 6.4vw, 6rem);   /* the numerals of the numbers block: 44 → 96 */
  --m-fig-lh: 0.9;                       /* they are Latin digits on both pages: the Latin leading, also in Arabic */
  padding-block: clamp(64px, 8vw, 128px) clamp(72px, 9vw, 144px);   /* it follows the landscape strip that closes the notes */
}
.method__head { gap: var(--s-4); margin-block-end: clamp(32px, 4vw, 56px); }
@media (min-width: 900px) {
  .method__head { align-items: baseline; }
  .method__head > .sec__title { grid-column: 1 / span 7; }
  .method__head > .sec__lead { grid-column: 8 / -1; max-inline-size: 46ch; padding-block-end: 0; }
}

/* ───────── a block and its bar (label at the start, a quiet note at the end) ───────── */
.method__block { margin-block-start: var(--m-gap); }
.method__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--gutter);
  margin-block-end: var(--s-6);
}
.method__bar-h { color: var(--fg); }
.method__bar-note { color: var(--fg-2); }

/* ───────── shared small type ───────── */
.method__n { font-size: var(--fs-xs); line-height: 1.4; color: var(--fg-2); }
/* the stop's plant — the same arfaj at this stop's age: at the end of the number's line, on the sand */
.method__age { --plant: clamp(40px, 3.6vw, 52px); position: absolute; inset-block-start: calc(var(--s-5) - var(--plant) / 2 + 8px); inset-inline-end: 2px; }
@media (min-width: 1000px) { .method__age { inset-block-start: calc(var(--s-6) - var(--plant) / 2 + 8px); inset-inline-end: 6px; } }
.method__name { margin-block-start: var(--s-3); }
.method__text { margin-block-start: var(--s-3); max-inline-size: 44ch; color: var(--fg-2); }

/* the stop's people — one or two of the dressed team, small, on the sand of the trail: a canvas drawn by the script.
   Stacked (flow y) they stand on the number's line, between the number and the plant; from 1200 px (flow x) in the
   strip itself, under the trackway and over the stop's own hairline */
.method__crew {
  --m-crew: 62px;
  position: absolute; inset-block-start: calc(var(--s-5) + 0.72em - var(--m-crew) / 2); inset-inline: 26px 52px; block-size: var(--m-crew);
  pointer-events: none;
}
.method__crew-cv { display: block; inline-size: 100%; block-size: 100%; max-inline-size: none; }
html:not(.js) .method__crew { display: none; }

/* ───────── 2 · the trail ───────── */
.method__route { position: relative; padding-inline-start: calc(var(--m-rail) + var(--s-4)); }

/* the track: line art (the prints and the tail's line) and, over it, the animal */
.method__track { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--m-rail); color: var(--fg); }
.method__prints { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; overflow: visible; }
.method__dhub {
  position: absolute; inset-block-start: calc(var(--m-bleed) * -1); inset-inline-start: calc(var(--m-bleed) * -1);
  inline-size: calc(100% + var(--m-bleed) * 2); block-size: calc(100% + var(--m-bleed) * 2); max-inline-size: none;
  pointer-events: none;
}
/* one set = a foot print, the hand print just ahead of it, and the stretch of tail line beside them.
   Ahead of the animal the set is faint; behind it, full ink. */
.method__set { opacity: 0.2; }
.method__set.is-on { opacity: 1; }
.method__print { fill: currentColor; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.method__drag { fill: none; stroke: currentColor; stroke-width: 1.7; opacity: 0.5; }
/* where the animal stood: the trough its tail left, ribbed once per ring */
.method__rest { fill: none; stroke: currentColor; stroke-width: 0.8; opacity: 0.7; }

/* the stops */
.method__stops { display: grid; }
.method__stop { position: relative; padding-block: var(--s-5) var(--s-7); border-block-start: var(--hair) solid var(--rule); }
.method__stop:last-child { padding-block-end: var(--s-6); }
/* the station mark: one scale set on the line … */
.method__stop::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 9px; block-size: 9px; margin-block-start: -5px; margin-inline-start: -4.5px;
  background: var(--m-mark); border: var(--hair) solid var(--m-mark); border-radius: 50%;
  z-index: 1;                                                     /* over the end of its tick */
}
/* … and a tick that reaches from it to the trail */
.method__stop::after {
  content: ""; position: absolute; inset-block-start: calc(var(--hair) * -1); inset-inline-end: 100%;
  inline-size: var(--s-4); block-size: var(--hair); background: var(--rule-2);
}
.method__stop.is-ahead::before { background: var(--bg); border-color: var(--rule-2); }      /* not reached yet: an empty scale */
.method__stop.is-here::before { outline: var(--hair) solid var(--m-mark); outline-offset: 3px; }   /* the animal stands here: the scale wears a ring */
.method__stop.is-here .method__n { color: var(--fg); }

.method__gets { display: grid; gap: var(--s-1); margin-block-start: var(--s-5); max-inline-size: 44ch; }
.method__gets-v { font-family: var(--f-mono); font-size: calc(var(--fs-sm) * 0.93); line-height: 1.6; }
html[lang="ar"] .method__gets-v, html[lang="ar"] .method__client-what { font-family: var(--f-text); line-height: var(--lh-sm); }   /* Arabic has no mono: the text face, as .label does (a mono stack would lend it Latin spaces) */

@media (min-width: 640px) {
  .method { --m-rail: 72px; }
  /* flow y on a wide column: name at the start, what happens and what you receive beside it */
  .method__stop { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); align-items: start; }
  .method__stop > .method__n { grid-column: 1 / -1; }
  .method__body { display: contents; }
  .method__body > .method__name { grid-column: 1; grid-row: 2 / span 2; }
  .method__body > .method__text { grid-column: 2; margin-block-start: var(--s-4); }
  .method__stop > .method__gets { grid-column: 2; }
}

@media (min-width: 1200px) {
  .method { --m-flow: x; --m-strip: 146px; }                       /* (the strip is taller here: the stops' people stand in it, under the trackway) */
  .method__crew { --m-crew: 74px; inset-block-start: auto; inset-block-end: calc(100% + 3px); inset-inline: 12px 0; }
  .method__route { padding-inline-start: 0; }
  .method__track { position: relative; inset: auto; inline-size: auto; block-size: var(--m-strip); }
  .method__stops { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gutter); }
  .method__stop { display: block; padding-block: var(--s-6) 0; }
  .method__stop:last-child { padding-block-end: 0; }
  .method__body { display: block; }
  .method__body > .method__text { margin-block-start: var(--s-3); }
  /* the five columns share their rows, so "you receive" starts on one line across the trail */
  @supports (grid-template-rows: subgrid) {
    .method__stops { grid-template-rows: repeat(3, auto); }
    .method__stop { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: 1 / span 3; grid-template-rows: subgrid; row-gap: 0; }
    .method__stop > .method__n, .method__stop > .method__gets { grid-column: 1; }
  }
  /* the tick now rises through the strip: a short mark above the trackway, a longer one below it; the trackway itself stays clear */
  .method__stop::after {
    inset-block-start: auto; inset-block-end: calc(100% + var(--hair)); inset-inline-end: auto; inset-inline-start: 0;
    inline-size: var(--hair); block-size: var(--m-strip); margin-inline-start: calc(var(--hair) * -0.5);
    background: linear-gradient(to bottom,
      transparent 0 calc(var(--m-axis) - 40px), var(--rule-2) calc(var(--m-axis) - 40px) calc(var(--m-axis) - 28px),
      transparent calc(var(--m-axis) - 28px) calc(var(--m-axis) + 28px), var(--rule-2) calc(var(--m-axis) + 28px) 100%);    /* hard stops: segments of one hairline, not a blend */
  }
  .method__text, .method__gets { max-inline-size: none; }
  /* a second row of hairlines: what you receive, read across the five stops like one line of a table */
  .method__gets { align-content: start; margin-block-start: var(--s-6); padding-block-start: var(--s-4); border-block-start: var(--hair) solid var(--rule); }
  .method__gets-v { font-size: var(--fs-xs); line-height: 1.6; }
}

/* without scripts there is no trackway to draw: the stops stand as a plain numbered list with their marks */
html:not(.js) .method__track, html:not(.js) .method__stop::after { display: none; }
html:not(.js) .method__route { padding-inline-start: 0; }

/* ───────── 3 · commitments ───────── */
.method__principles { display: grid; column-gap: var(--gutter); }
.method__principle { padding-block: var(--s-5) var(--s-6); border-block-start: var(--hair) solid var(--rule); }
@media (min-width: 640px) { .method__principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .method__principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ───────── 4 · the numbers: a 2 × 2 ledger (one column on a phone). Numeral first, then what it counts ───────── */
.method__ledger { display: grid; column-gap: var(--gutter); border-block-end: var(--hair) solid var(--rule); }
.method__fact {
  display: grid; grid-template-areas: "v" "k" "note"; align-content: start; row-gap: var(--s-1);
  padding-block: var(--s-5) var(--s-6); border-block-start: var(--hair) solid var(--rule);
}
.method__fact-v { grid-area: v; }
.method__fact-k { grid-area: k; display: block; margin-block-start: var(--s-3); max-inline-size: 34ch; color: var(--fg); }
.method__fact-note { grid-area: note; color: var(--fg-2); }
.method__fig {
  display: inline-block;
  font-family: var(--f-display); font-weight: var(--w-display); font-stretch: var(--display-stretch);
  font-size: var(--m-fig); line-height: var(--m-fig-lh); letter-spacing: var(--tr-mega);
  font-variant-numeric: lining-nums; white-space: nowrap;
}
@media (min-width: 640px) {
  .method__ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ───────── 5 · clients ───────── */
.method__clients { display: grid; column-gap: var(--gutter); }
.method__client { padding-block: var(--s-5) var(--s-6); border-block-start: var(--hair) solid var(--rule); }
.method__client-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-block-size: 44px; }
.method__client-link { display: inline-flex; align-items: baseline; gap: 0.3em; min-block-size: 44px; padding-block: var(--s-1); color: inherit; text-decoration: none; }
.method__client-word { font-weight: inherit; }                    /* .link sets 600; a client's name keeps the headline weight */
.method__client-link:hover .method__client-word { background-size: 100% 2px; }
.method__client-ico { inline-size: 0.62em; block-size: 0.62em; stroke-width: 2.4; }
.method__client-link:hover .method__client-ico { transform: translate(3px, -3px); }
[dir="rtl"] .method__client-link:hover .method__client-ico { transform: scaleX(-1) translate(3px, -3px); }
.method__client-what { margin-block-start: var(--s-2); max-inline-size: 38ch; font-family: var(--f-mono); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--fg-2); }
/* a client's own mark, small and in one ink beside the name. Its box is fixed (and the <img> carries width / height from
   method.json: logo_w, logo_h), so the row does not move when the file arrives */
.method__logo { flex: none; display: block; }
.method__logo img { display: block; block-size: 22px; inline-size: auto; max-inline-size: none; }
.method__logo--mics img { inline-size: 55px; block-size: 22px; }
html[data-theme="night"] .method__logo img[src$=".svg"] { filter: invert(1); }     /* a currentColor file inside <img> is black: turn it to the night's ink */
.method.in-sun .method__logo img[src$=".svg"] { filter: none; }                   /* (in the sun the ink is deep: the file's own black) */
.method__logo--kand-games img { inline-size: 46px; block-size: 30px; object-fit: cover; filter: grayscale(1); }   /* a square file with air round the badge: crop to the badge; grey, because this view has one colour */
@media (min-width: 900px) { .method__clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ───────── motion ───────── */
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .method__set { transition: opacity var(--t-2) var(--e-std); }
  html:not(.is-calm) .method__client-ico { transition: transform var(--t-3) var(--e-dash); }
}