/* ══ THE IDENTITY HEAD ═══════════════════════════════════════ 11 Sep 2026 ══

   Cover photograph, then a row of portrait, name, figures and actions, then a
   hairline. Three pages carry it: my-jobs, dashboard-tradesperson and now
   trade-profile.

   Sir: the top of the trade profile should be the same layout and placement as
   the top of the overview, with a cover photo. It should look uniform at the
   top, and keep the signed off and photo section.

   IT WAS ALREADY DEFINED TWICE. The dashboard's own comment says the rules
   came out of my-jobs "unchanged, class for class, because two dashboards that
   nearly agree are worse than one that does not". Adding a third copy to make
   a third page agree is the move that guarantees they stop agreeing: Mason's
   traps file has a component defined twice differing, and the second copy
   missing the rule that sized its icon. So this is the one definition, lifted
   from the dashboard's CSSOM rather than retyped from its markup — the rules
   there carry comments inside their bodies and no regex survived them — and
   the three pages link it.

   WHAT THE REFERENCE SUPPLIES, AND WHAT IT MUST NOT. From Sir's own Facebook
   Page, measured at 1920: the ORDER (cover, portrait breaking the line, name,
   counts, description, actions right-aligned) and the RATIO. Nothing else.
   The ground stays cream, the faces stay ours, the arch stays the arch.

   §27: one structure, and the role never changes it. What changes is what the
   figures COUNT. The homeowner's are jobs posted and what tradespeople made of
   her; the trade's own dashboard counts jobs completed and what he earned; the
   trade's PUBLIC profile counts what a homeowner deciding needs — jobs signed
   off, the rating, and how long he has been here. Same row, three readings.

   THE COVER IS A PANEL, NOT A PHOTOGRAPH WITH AN ARCH ON IT. §20: the arch
   never goes on a picture. Sir squared it on 6 Sep, which is his call and not
   a small one — squared, the cover carries no mark of the identity at all.
   The arch is still on the page in the rail's pillar and the mark in the
   masthead, so the block is not orphaned.

   WIDTH FIRST, THEN THE RATIO. `aspect-ratio` with a `min-height` and no
   definite width resolves the WRONG way: at 480 a 170px floor multiplied out
   to 703px of cover inside a 448px column. The width is stated and the parent
   does the insetting, so the ratio can only ever set the height.

   ONLY THE PORTRAIT BREAKS THE LINE, not the whole row. Pulling `.ov-id` up by
   half the portrait took the name and figures up with it and printed them over
   the photograph — and under it, because the cover is positioned and the row
   was not. `align-self:start` plus a negative margin of half the portrait puts
   it on the row's top edge and lifts it by exactly half of itself at every
   width, rather than by whatever the description's line count made the row. */

.ov-head { margin: 0px 0px clamp(18px, 2vw, 26px); }
.ov-head { --ov-inset: clamp(14px,2vw,34px); padding-inline: var(--ov-inset); }
.ov-cover { position: relative; overflow: hidden; background: var(--navy); border-radius: 0px; width: 100%; aspect-ratio: 1240 / 300; min-height: 120px; max-height: 340px; }
.ov-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ov-cover-edit { position: absolute; right: 14px; bottom: 14px; z-index: 2; background: var(--cream); gap: 7px; }
.ov-cover-edit svg { width: 15px; height: 15px; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ov-head { --av: clamp(108px,11.5vw,168px); }
.ov-id { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0px, 1fr) auto; align-items: flex-end; column-gap: clamp(16px, 1.8vw, 24px); padding: 0px clamp(8px, 1.4vw, 20px); }
.ov-avatar { width: var(--av); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: var(--cream); box-shadow: 0 0 0 5px var(--cream); align-self: start; margin-top: calc(var(--av) / -2); margin-bottom: 2px; }
.ov-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ov-id-t { padding-bottom: 4px; min-width: 0px; }
.ov-name { margin: 0px 0px 5px; font-family: var(--serif-display); font-weight: 400; font-size: clamp(21px, 2.1vw, 26px); line-height: 1.15; color: var(--navy); }
.ov-figs { margin: 0px 0px 7px; display: flex; flex-wrap: wrap; align-items: center; gap: 0px 7px; font-family: var(--sans); font-size: 12px; line-height: 20px; color: var(--muted); }
.ov-figs b { font-weight: 600; color: var(--navy); }
.ov-dot { color: var(--muted); }
.ov-rate { display: inline-flex; align-items: center; gap: 6px; }
.ov-stars { display: inline-flex; gap: 1.5px; }
.ov-stars svg { width: 13px; height: 13px; fill: var(--gold-soft); stroke: none; display: block; }
.ov-star--half { opacity: 0.42; }
.ov-desc { margin: 0px; max-width: 62ch; font-family: var(--serif); font-size: 14px; line-height: 20px; color: var(--muted); }
.ov-since { margin: 8px 0px 0px; font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .ov-since { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.ov-since b { font-weight: 600; color: var(--navy); }
.ov-acts { display: flex; align-items: center; gap: 9px; padding-bottom: 4px; }
.ov-acts .btn { gap: 7px; }
.ov-acts svg { width: 15px; height: 15px; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1080px) {
  .ov-id { grid-template-columns: auto minmax(0px, 1fr); row-gap: 14px; align-items: end; }
  .ov-acts { grid-column: 1 / -1; padding-bottom: 0px; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .ov-id { grid-template-columns: minmax(0px, 1fr); justify-items: start; }
  .ov-head { --ov-inset: clamp(10px,3vw,18px); }
}
.ov-head { --ov-drop: clamp(12px,2.1vw,30px); }
.ov-id { align-items: start; column-gap: clamp(14px, 1.6vw, 22px); padding-left: 3.7%; padding-right: 2.6%; }
.ov-avatar { margin-top: var(--ov-drop); margin-bottom: 0px; }
.ov-id-t { margin-top: calc(var(--ov-drop) + var(--av) * .19); padding-bottom: 0px; }
.ov-acts { align-self: start; padding-bottom: 0px; margin-top: calc(var(--ov-drop) + var(--av) * .19 - 3px); }
.ov-head::after { content: ""; display: block; height: 1px; background: var(--line); margin: clamp(16px, 1.9vw, 28px) 2.6% 0px; }
.ov-head { --cover-tint: 10 22 40; --cover-wash: 214 223 233; padding-top: clamp(10px, 1.2vw, 18px); position: relative; isolation: isolate; }
.ov-head::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0px -8px auto; height: 84%; background: linear-gradient(180deg,
    rgb(var(--cover-wash) / .92) 0,
    rgb(var(--cover-wash) / .46) 46%,
    transparent 84%); mask-image: linear-gradient(90deg, transparent 0px, black 5%, black 95%, transparent 100%); }
.ov-cover { box-shadow: 0 10px 38px -8px rgb(var(--cover-tint) / .42),
             0 0 0 1px rgb(var(--cover-tint) / .10); }
@media (max-width: 1080px) {
  .ov-acts { margin-top: 0px; }
}
@media (max-width: 640px) {
  .ov-id-t { margin-top: 10px; }
  .ov-head::after { margin-inline: 0px; }
}