/* DABB — contact v2 (block: .contact). Short: one line and two actions on the page, and directly under them THE FIELD — in
   dabb2 THE DAYLIGHT PLACE: real sand in the lightest shade of the page, where the team, dressed dabbs, walk between
   three homes.
     .contact__ground   the ground of the stage, shown once the script has painted it (.contact__net.is-sand):
       .contact__sand   the sand itself (DABB.Sand: ripples, and in the same relief the ring walls, the courts and the
                        trackways of the lanes)
       .contact__shade  the stage's shade over it — its gradient comes from the script, which knows where the words
                        stand: dense (--contact-shade-word) in a band across every row of words, lifted to --shade-day
                        over the open ground, --contact-shade-foot at the foot. Stacked (phones) the bands lie on a
                        second layer (.contact__shade--words) that ends beside the words: the trails' side of the
                        stage stays in the day from top to bottom
                        The whole ground fades out at its top and bottom edges into the page's own sand under the
                        section's dusk shade: no line where the stage begins or ends.
     Until then (and without script or painter) the stage is the section's dusk shade, and the plate is drawn in white.
   THE OFFICES STAND ON THE FIELD: a list of three blocks of real text laid over the drawing, each directly above its
   home, in white (--on-field; the quiet lines in --on-field-2) on their band of shade: ≥ 4.5 : 1 against the brightest
   grain of sand behind them (measured: DABB.contact.ground()). The script stands every home under its block — the
   ring's edge on the block's edge — and keeps trails, marks and animals clear of the words.
     · from 720 px: three blocks in a row that share their lines (subgrid); under them the ground (--contact-ground).
       A name that runs to a second line (Arabic: Garner's) lifts only its own top — the one-line names stand on their
       country line (align-self: end). From 1000 to 1199 px the row ends short of the floating WhatsApp button's column
       (css/parts/00-wa.css: 24 – 80 px from the end edge there), so the last block's map link never lies under it
     · narrower: the blocks stacked on the start side, each followed by the room its home takes (--contact-home, set by
       the script: it knows how long the animals are), the trails hanging round them on the end side
   Everything is laid out with logical properties (but one label that follows canvas coordinates).
   State set by the script:  .contact__net.is-off (it cannot be drawn: the list alone) · .contact__stage { --contact-home } ·
                             .contact__who.is-on · .contact__copy.is-done | .is-fail
   AMENDMENT 7 — THE DAYLIGHT PLACE IS IN THE SUN (css/base.css .in-sun: this section is in its list). The head and the
   stage carry no shade at all: the bands under the words are gone (--contact-shade-word / -day / -foot: 0 — the script
   reads them), the sand is lifted a little by the light like every section in the sun (.contact__ground::after), and the
   words are deep umber (--on-field …). DABB.contact.ground() measures every line against the grain that is worst for its
   ink — the darkest, for deep type. */

.contact {
  --sh: var(--shade-sun); --sh-in: var(--shade-sun);             /* the head and the stage stand in the sun, like the services above */
  padding-block-end: 0;                                           /* the field closes the section, edge to edge */
  --contact-shade-word: 0;                                        /* no band of shade across a row of words: in the sun deep type needs none (it was .60 under white) */
  --contact-shade-day: 0;                                         /* … none over the open ground (the page's day hour does not lie here) */
  --contact-shade-foot: 0;                                        /* … nor at the stage's foot (the blog below is in the sun too) */
  --contact-line: #2A170B;                                        /* what is drawn on the sand: the sand's own deep shadow, never a white line */
  --contact-hole: var(--dabb-ink);                                /* the dark of a door, read by the script */
  --contact-paper: var(--dabb-white);                             /* a parcel on a back */
  --contact-ink: var(--dabb-ink);
  /* the WhatsApp button carries a 16 px label: --wa (#1F9D55) gives white only 3.5:1, so the button takes that green one
     step deeper — white reads at 5.1:1 on it (6.1:1 on hover). The icon-only uses of --wa need 3:1 and keep the token. */
  --contact-wa: #197E44;
  --contact-wa-hover: #15703C;
}
html[data-theme="night"] .contact { --contact-hole: var(--n-950); }

/* ───────── the head: the line, one sentence, two actions ───────── */
.contact__head { display: grid; gap: var(--s-6); }
.contact__title { margin: 0; }
.contact__say { display: grid; gap: var(--s-5); justify-items: start; }
.contact__lead { margin: 0; color: var(--fg-2); max-inline-size: 30ch; }
.contact__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.contact .contact__wa { background: var(--contact-wa); color: var(--on-wa); border-color: var(--contact-wa); }
.contact .contact__wa:hover { background: var(--contact-wa-hover); border-color: var(--contact-wa-hover); }
.contact__wa .ico { inline-size: 20px; block-size: 20px; }
.contact__mail { display: inline-flex; align-items: center; gap: var(--s-3); }
.contact__mail-a { font-size: var(--fs-body); line-height: 1.4; }

/* copy: a small round control beside the address; it confirms in place (the words go to a live region) */
.contact__copy {
  position: relative; display: inline-grid; place-items: center; flex: none;
  inline-size: 32px; block-size: 32px; padding: 0; cursor: pointer;
  color: var(--fg-2); background: transparent; border: var(--hair) solid var(--rule-2); border-radius: 50%;
}
.contact__copy::after { content: ""; position: absolute; inset: -8px; }                 /* a 48 px target around a 32 px control */
.contact__copy:hover { color: var(--on-btn); background: var(--fg); border-color: var(--fg); }
.contact__copy.is-done { color: var(--green-deep); background: var(--green-light); border-color: var(--green-light); }      /* it worked: Najd green, the colour of what went well (DESIGN2.md, amendment 4) */
.contact__copy.is-fail { color: var(--fg); border-color: var(--fg); }
.contact__copy-ico { inline-size: 16px; block-size: 16px; }
.contact__copy-i--b { display: none; }
.contact__copy.is-done .contact__copy-i--a { display: none; }
.contact__copy.is-done .contact__copy-i--b { display: inline; }
html:not(.js) .contact__copy { display: none; }                                         /* it needs a script; the link does not */

/* ───────── the field ───────── */
.contact__net { position: relative; margin: clamp(48px, 6vw, 96px) 0 0; color: var(--on-field); }
.contact__stage { position: relative; inline-size: 100%; overflow: hidden; touch-action: pan-y; }
/* the drawing lies under the words, as large as the stage; its caption stands in the stage's last corner (the script
   keeps the ground under it clear, like the ground under every line of an office) */
.contact__fig { position: absolute; inset: 0; z-index: 0; margin: 0; }
.contact__ground {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 28px, #000 64px, #000 calc(100% - 72px), rgba(0, 0, 0, 0.5) calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 28px, #000 64px, #000 calc(100% - 72px), rgba(0, 0, 0, 0.5) calc(100% - 30px), transparent 100%);
}
.contact__net.is-sand .contact__ground { opacity: 1; visibility: visible; }
.contact__ground::after { content: ""; position: absolute; inset: 0; background: rgba(var(--sun-rgb), var(--sun)); pointer-events: none; }      /* the sun's lift, as over the page's own sand round it: no step where the painted ground begins */
.contact__sand, .contact__shade { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.contact__shade--words { background-image: none; }               /* (stacked: the bands of the words, on the words' side only — the script lays them) */
.contact__shade:not(.contact__shade--words) { background-image: linear-gradient(rgba(var(--shade-rgb), var(--contact-shade-word)), rgba(var(--shade-rgb), var(--contact-shade-word))); }
.contact__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; color: var(--on-field); }
.contact__net.is-sand .contact__canvas { color: var(--contact-line); }
.contact__cap { position: absolute; inset-inline: 0; inset-block-end: var(--s-5); pointer-events: none; }
.contact .contact__cap-t { margin: 0; color: var(--on-field); }
html:not(.js) .contact__fig, .contact__net.is-off .contact__fig { display: none; }      /* no drawing: the offices alone, on the field */

/* ───────── the offices, on the field: one block over each home ─────────
   The list takes no pointer of its own — only its words do: over the open ground between two lines the pointer still
   reaches the animals; over a line it never does (the script lets them be then). */
.contact__offices {
  position: relative; z-index: 1; list-style: none; margin-block: 0; padding-block: var(--s-6) 0;
  display: grid; pointer-events: none;
}
.contact__office {
  display: grid; align-content: start; justify-items: start; min-inline-size: 0;
  /* its home stands under it — the script says how much room that takes — and then open ground before the next block:
     enough for the trail that leaves the door above to swing clear of this block's first line */
  padding-block-end: calc(var(--contact-home, 80px) + var(--s-7));
}
.contact__office:last-child { padding-block-end: calc(var(--contact-home, 80px) + var(--s-8) + var(--s-3)); }      /* (… and the caption) */
.contact__office > * { pointer-events: auto; }
.contact__office > .contact__reach { pointer-events: none; }
html:not(.js) .contact__office, .contact__net.is-off .contact__office { padding-block-end: var(--s-6); }

.contact__city { margin: 0; display: flex; align-items: baseline; gap: var(--s-3); color: var(--on-field); font-size: calc(var(--fs-h3) * 0.45 + var(--fs-h2) * 0.55); }      /* the stage's own headline: between the two sub-head sizes */
/* Arabic: the names are longer (غارنر، كارولاينا الشمالية) and the face is taller: the sub-head size, so that a name keeps to one
   line wherever its block can carry it */
.contact__city:lang(ar) { font-size: var(--fs-h3); }
.contact__flag { flex: none; inline-size: 24px; block-size: 16px; line-height: 0; outline: var(--hair) solid var(--field-rule); }   /* a hairline keeps a flag's own colours off the field's */
.contact__flag svg { display: block; inline-size: 100%; block-size: 100%; }
/* the country, and under it the coordinates: one quiet mono line, in every language and at every width (from 1280 px a
   Latin block is wide enough to carry them at the end of the country's own line) */
.contact__land { margin: var(--s-1) 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; white-space: nowrap; }
.contact .contact__land { color: var(--on-field); }
.contact__geo { font-size: var(--fs-xs); font-weight: 400; color: var(--on-field-2); }
.contact__addr { margin: var(--s-3) 0 0; color: var(--on-field-2); max-inline-size: min(100%, 11.75em); text-wrap: balance; }      /* (stacked: short lines — the trails swing round them) */
.contact__reach { margin: var(--s-1) 0 0; display: flex; flex-direction: column; align-items: flex-start; }
.contact__num, .contact__map {
  display: inline-flex; align-items: center; min-block-size: 44px;                      /* a finger's target */
  color: var(--on-field); text-decoration: none; pointer-events: auto;
}
.contact__num { gap: var(--s-2); font-weight: 600; }
.contact__num-ico { inline-size: 18px; block-size: 18px; }                              /* (the glyph in the field's ink: one colour on the field) */
.contact__num-t { font-size: var(--fs-sm); padding-block: 2px; border-block-end: 2px solid transparent; }
.contact__map { gap: 0.3em; font-size: var(--fs-sm); font-weight: 600; }
.contact__map-t { padding-block: 2px; border-block-end: 2px solid transparent; }
.contact__map .ico { inline-size: 1em; block-size: 1em; }
.contact__num:hover .contact__num-t, .contact__map:hover .contact__map-t { border-block-end-color: currentColor; }

/* who is this: one small label beside the animal under the pointer (or the finger) — its ROLE and nothing else: no
   city, no country, no flag. The script moves it with the animal: its corner is the canvas's own top left corner in both
   directions (canvas coordinates do not mirror), hence the physical offsets. */
.contact__who {
  position: absolute; top: 0; left: 0; z-index: 2; margin: 0; padding: 5px var(--s-3);
  white-space: nowrap; pointer-events: none;
  background: var(--on-field); border-radius: var(--r-pill);
  opacity: 0; visibility: hidden; will-change: transform;
}
.contact .contact__who { color: var(--on-btn); }                 /* (in the sun: an ink pill, white type — like the primary pill) */
.contact__who.is-on { opacity: 1; visibility: visible; }

@media (max-width: 719.98px) {
  /* stacked, Arabic: «غارنر، كارولاينا الشمالية» on one line would leave the trails no room beside it (the animals walked over
     it) — the name breaks after «كارولاينا»; on the narrowest phones the Latin addresses keep to shorter lines too */
  .contact__city:lang(ar) { max-inline-size: min(100%, 8.9em); }
}
@media (max-width: 379.98px) { .contact__addr:lang(ar) { max-inline-size: min(100%, 10.4em); } }
@media (min-width: 720px) {
  /* three blocks in a row, the first on the page's own margin and the last ending on the other: they share their lines
     (subgrid) — a name or an address that runs to another line moves all three, so the three homes stand level. Under
     them the ground: as tall as a screen can spare, so that the animals can be 95 – 145 px long on two tiers of trails
     (the script needs about 26 px + 4.3 body lengths of it; 4.9 where the homes stand close and the short trails hang
     deeper). Block and ground together stay within one screen under the header. */
  .contact__stage {
    --contact-bw: clamp(220px, 23.5vw, 304px);
    --contact-ground: clamp(400px, min(60vh - var(--dock-h, 0px), 40vw + 160px), 660px);      /* (less the phone dock, where there is one) */
  }
  .contact__offices {
    grid-template-columns: repeat(3, minmax(0, var(--contact-bw))); justify-content: space-between; column-gap: var(--gutter);
    grid-template-rows: repeat(4, auto); padding-block-end: var(--contact-ground);
  }
  .contact__office, .contact__office:last-child { grid-row: span 4; grid-template-rows: subgrid; padding-block-end: 0; }
  .contact__city { align-self: end; }                             /* (a one-line name stands on its country line, whatever its neighbour's name does) */
  .contact__addr { max-inline-size: min(100%, 16.5em); }          /* two short lines, whichever the office */
  html:not(.js) .contact__offices, .contact__net.is-off .contact__offices { padding-block-end: var(--s-6); }
}
@media (min-width: 720px) { .contact__stage:lang(ar) { --contact-bw: clamp(220px, 26vw, 344px); } }      /* (Arabic: a wider block, for the same reason) */
@supports (block-size: 1svh) {
  @media (min-width: 720px) { .contact__stage { --contact-ground: clamp(400px, min(60svh - var(--dock-h, 0px), 40vw + 160px), 660px); } }
}
@media (min-width: 720px) and (max-width: 1023.98px) {
  .contact__city { font-size: var(--fs-h3); }                     /* (a block of 220 – 240 px: "Garner, NC" at the larger size ran into its neighbour's flag, or to a second line) */
}
@media (min-width: 900px) {
  .contact__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .contact__title { grid-column: 1 / span 7; }
  .contact__say { grid-column: 8 / -1; padding-block-end: 0.35em; }
}
@media (min-width: 1000px) {
  /* the block is wide enough for its last line to carry both links: the number at its start, the map at its end */
  .contact__reach { flex-direction: row; align-items: center; justify-content: space-between; justify-self: stretch; column-gap: var(--s-3); }
}
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .contact__offices { padding-inline-end: max(var(--margin), 92px); }      /* (clear of the floating button: see the head of this file) */
}
@media (min-width: 1100px) {
  .contact__num-t { font-size: var(--fs-body); }
  .contact__num { font-weight: 500; }
}
@media (min-width: 1280px) {
  /* … and for the country's line to end on the coordinates (Latin pages: the Arabic names of the countries are longer) */
  html:not([lang="ar"]) .contact__land { flex-direction: row; align-items: baseline; justify-content: space-between; justify-self: stretch; gap: var(--s-3); }
}
@media (min-width: 720px) and (hover: hover) and (pointer: fine) {
  .contact__num, .contact__map { min-block-size: 36px; }          /* (a mouse needs less: the block stays compact) */
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .contact__ground { transition: opacity var(--t-5) var(--e-std), visibility 0s linear var(--t-5); }      /* the shade lifts off the stage */
  html:not(.is-calm) .contact__net.is-sand .contact__ground { transition: opacity var(--t-5) var(--e-std); }
  html:not(.is-calm) .contact__copy { transition: background-color var(--t-2) var(--e-std), color var(--t-2) var(--e-std), border-color var(--t-2) var(--e-std); }
  html:not(.is-calm) .contact__num-t, html:not(.is-calm) .contact__map-t { transition: border-color var(--t-2) var(--e-std); }
  html:not(.is-calm) .contact__who { transition: opacity var(--t-1) var(--e-std), visibility 0s linear var(--t-1); }
  html:not(.is-calm) .contact__who.is-on { transition: opacity var(--t-1) var(--e-std); }
}