/* ============================================================================
   quien (about): intimacy. Deep ground.
   1. Opening (flow + in): who, two values, the still life in an instrument frame.
   2. Trajectory (pan): a ruler of years read against a fixed playhead, with a
      rolling odometer that counts the years as they pass.
   3. Where (flow + pointer): Latin America typed in markdown syntax on a canvas,
      with the cities as a real, focusable list.
   ========================================================================== */

.about {
  --yr: 2.3rem;                 /* ruler width per year between milestones */
  --base: 17.5rem;              /* minimum room a milestone needs */
  --rhead-w: 27rem;             /* the "Trayectoria" head of the rail */
  --last-w: calc(var(--base) + var(--yr));   /* 2026, the last milestone */
  --line-y: 46%;                /* where the ruler runs across the stage */
}

/* ------------------------------------------------------------- opening -- */
.about__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
  padding-bottom: clamp(0.5rem, 2vh, 1.5rem);
}
.about__h { max-width: 19ch; }
.about__hl { display: block; }

.about__values {
  margin: clamp(2.2rem, 5vh, 3.2rem) 0 0;
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 44rem;
  border-top: 1px solid var(--rule);
}
.about__value {
  display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); column-gap: 1rem;
  align-content: start;
  padding: 1.35rem 1.6rem 0.2rem 0;
}
.about__value + .about__value { padding-left: 1.6rem; padding-right: 0; border-left: 1px solid var(--rule); }
.about__glyph {
  grid-row: 1 / span 2;
  width: 2.9rem; height: 2.9rem;
  fill: none; stroke: var(--sc-ink-soft); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.about__value dt {
  font: 480 1.28rem/1.15 var(--sc-font-display);
  letter-spacing: -0.01em; color: var(--sc-ink);
  padding-top: 0.2rem;
}
.about__value dd { margin: 0.45rem 0 0; font-size: 0.97rem; line-height: 1.55; color: var(--sc-ink-soft); max-width: 30ch; }

/* the loop: try, apply, teach. Turns one step when you look at it. Plain ink:
   in this chapter the accent belongs to the h2 and to the year under the playhead. */
.about__loop { transform-origin: 24px 24px; transform-box: view-box; transition: transform 700ms var(--ease-out); }
.about__dot { fill: var(--sc-ink-soft); stroke: var(--sc-ink); }
.about__tip { stroke-width: 1.2; }
/* the level: no smoke, the bubble sits dead centre. Nudge it and it settles. */
.about__bubble { fill: var(--sc-ink-soft); stroke: var(--sc-ink); transform-box: fill-box; transform-origin: center; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .about__value--loop:hover .about__loop { transform: rotate(120deg); }
  .about__value--level:hover .about__bubble { animation: about-settle 1100ms var(--ease-out); }
}
@keyframes about-settle {
  0% { transform: translateX(0); }
  18% { transform: translateX(-6px); }
  42% { transform: translateX(4px); }
  64% { transform: translateX(-2px); }
  82% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

/* the still life, in an instrument frame; replaceable with a real photo */
.about__still { margin: 0; justify-self: end; width: min(100%, 27rem); }
.about__frame { padding: 0.8rem; }
.about__frame::before, .about__frame::after { --c: var(--rule-strong); --t: 12px; }
.about__pic {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--sc-r-sm);
  background: var(--sc-surface);
  box-shadow: var(--sc-e2);
}
.about__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* the plates are 3:4, the same ratio as the frame, so cover crops nothing by
     itself and the position never matters. The plates carry no printed border
     (the bracket is the frame), so the scale is only headroom for the pointer
     drift: 1.75% of the picture per side, while about.js moves it at most 1.4%
     across and 1.1% down. The drift is a percentage of the picture, so that
     headroom holds at every width. The tablet sits 2.5% in from the left edge:
     any scale beyond this and it starts to lose its corner. */
  object-fit: cover; object-position: 50% 50%;
  transform: translate3d(calc(var(--px, 0) * 1%), calc(var(--py, 0) * 1%), 0) scale(1.035);
  will-change: transform;
}
.about__cap { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; padding-left: 0.8rem; }
.about__cap::before { content: ""; width: 1.4rem; height: 1px; background: var(--rule-strong); }

/* ----------------------------------------------------------- trajectory -- */
.about__pan { position: relative; }
.about__stage { background: var(--ground); transition: background-color var(--theme-dur) var(--ease-out); }
/* a still window over the moving rail: milestones leaving to the left fade out
   before they slide under the file rail */
.about__window {
  position: absolute; inset: 0; z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--rail-w) - 0.5rem), #000 calc(var(--content-l) - 0.6rem));
          mask-image: linear-gradient(90deg, transparent calc(var(--rail-w) - 0.5rem), #000 calc(var(--content-l) - 0.6rem));
}

.about__rail {
  position: relative; height: 100%;
  padding-left: var(--content-l);
  align-items: stretch;
}
.about__rail > * { flex: none; }

.about__rhead { position: relative; width: var(--rhead-w); height: 100%; }
.about__rtitle {
  position: absolute; left: 0; bottom: calc(100% - var(--line-y) + 1.35rem);
  font-size: calc(var(--t-h2) * 0.74);
}
.about__rsub { position: absolute; left: 0; top: calc(var(--line-y) + 1.5rem); }

.about__years { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
.about__yr {
  --a: 1; --l: 1;
  position: relative; flex: none; height: 100%;
  width: calc(var(--base) + var(--g) * var(--yr));
}
/* the ruler: a hairline with one tick per year and quarter ticks between */
.about__yr::before {
  content: ""; position: absolute; left: 0; right: 0; top: var(--line-y); height: 10px;
  background:
    linear-gradient(var(--rule-strong), var(--rule-strong)) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px) 0 0 / calc(100% / var(--g)) 10px repeat-x,
    linear-gradient(90deg, var(--rule) 0 1px, transparent 1px) 0 0 / calc(100% / var(--g) / 4) 5px repeat-x;
}
/* after 2026 the ruler keeps going, and fades: the road is not over */
.about__yr:last-child::before {
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent);
          mask-image: linear-gradient(90deg, #000 45%, transparent);
}

.about__node {
  position: absolute; left: 0; top: var(--line-y); z-index: 2;
  width: 11px; height: 11px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--ground); border: 1px solid var(--rule-strong);
  opacity: calc(0.5 + 0.5 * var(--a));
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.about__y {
  position: absolute; left: -0.05em; bottom: calc(100% - var(--line-y) + 1.35rem);
  font: 420 clamp(2.4rem, 1.6rem + 1.6vw, 3.3rem)/0.9 var(--sc-font-display);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.03em;
  color: var(--sc-ink-soft);
  opacity: calc((0.5 + 0.5 * var(--a)) * var(--l));
  transform: translate3d(0, calc((1 - var(--a)) * 14px), 0);
  transition: color 240ms var(--ease-out);
}
.about__ico {
  position: absolute; left: 0; bottom: calc(100% - var(--line-y) + 6.4rem);
  width: 3.4rem; height: 3.4rem; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round;
  color: var(--sc-ink-soft);
  opacity: calc((0.5 + 0.5 * var(--a)) * var(--l));
  clip-path: inset(-2px calc((1 - var(--a)) * 100%) -2px -2px);
  transition: color 240ms var(--ease-out);
}
.about__hid { stroke-dasharray: 1.5 2.6; opacity: 0.75; }
/* 2026: a round table seen from above, every seat taken */
.about__grain { stroke-width: 0.8; opacity: 0.7; }
.about__seats rect { fill: currentColor; stroke: none; }
.about__seats path { stroke-width: 1.3; }
.about__t {
  position: absolute; left: 0; top: calc(var(--line-y) + 1.55rem);
  width: min(15.5rem, calc(100% - 2rem));
  font-size: 1rem; line-height: 1.5; color: var(--sc-ink-soft);
  opacity: var(--l);
  transform: translate3d(0, calc((1 - var(--a)) * 10px), 0);
  transition: color 240ms var(--ease-out);
}

/* passed: settled ink. now: the accent owns it. */
.about__yr.is-past .about__node { background: var(--sc-ink-soft); border-color: var(--sc-ink-soft); }
.about__yr.is-past .about__y { color: var(--sc-ink); }
.about__yr.is-now .about__node {
  background: var(--sc-accent); border-color: var(--accent-deep);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--sc-accent) 24%, transparent);
}
.about__yr.is-now .about__y { color: var(--accent-deep); }
.about__yr.is-now .about__ico { color: var(--accent-deep); }
.about__yr.is-now .about__t { color: var(--sc-ink); }

/* runway after the last milestone, so the pan ends with 2026 under the playhead */
.about__end { width: max(1.5rem, calc(100vw - var(--content-l) - var(--rhead-w) - var(--last-w))); }

/* the part of the ruler already read */
.about__fill {
  position: absolute; z-index: 1;
  left: calc(var(--content-l) + var(--rhead-w)); top: var(--line-y);
  width: 0; height: 2px; margin-top: -0.5px;
  background: var(--accent-deep);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* the playhead: where "now" sits while the years slide past */
.about__head {
  position: absolute; z-index: 3; pointer-events: none;
  left: calc(var(--content-l) + var(--rhead-w)); top: var(--line-y);
  width: 1px; height: 1.9rem; margin-top: -0.95rem;
  background: var(--accent-deep);
}
.about__head i {
  position: absolute; left: 50%; top: -0.5rem; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--accent-deep);
  transform: translateX(-50%);
}

/* the odometer: a counter slot that reads the milestone under the playhead.
   The display face may lack tabular figures, so all four digits sit centred in equal
   cells, like a register. The window is cut from the measured ink (0.139em to
   0.866em at opsz 144) with room to spare; the slot's hairlines sit on its
   edges and run to the playhead, where a tick joins counter and ruler. */
.about__odo {
  --win: 0.1em; --cell: 0.54em;   /* four equal cells, like a register */
  position: absolute; z-index: 0; pointer-events: none;
  left: calc(var(--content-l) - 0.06em); bottom: clamp(0.5rem, 3vh, 2rem);
  height: 1em;
  font: 340 min(clamp(8rem, 24vh, 14rem), calc(var(--rhead-w) / 2.2))/1 var(--sc-font-display);
  font-variant-numeric: lining-nums;
  letter-spacing: 0;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule-strong);
  user-select: none;
}
.about__odo::before, .about__odo::after {
  content: ""; position: absolute; left: 0.02em; width: calc(var(--rhead-w) + 0.04em); height: 1px;
  background: var(--rule);
}
.about__odo::before { top: var(--win); }
.about__odo::after { bottom: var(--win); }
.about__odo-tick {
  position: absolute; left: calc(var(--rhead-w) + 0.06em); top: calc(var(--win) - 0.4rem); bottom: calc(var(--win) - 0.4rem);
  width: 1px;
  background:
    linear-gradient(var(--accent-deep), var(--accent-deep)) top / 1px 0.8rem no-repeat,
    linear-gradient(var(--accent-deep), var(--accent-deep)) bottom / 1px 0.8rem no-repeat;
}
.about__odo-win { display: flex; height: 1em; clip-path: inset(var(--win) -0.12em var(--win) -0.12em); }
.about__odo-d, .about__odo-col { display: block; width: var(--cell); height: 1em; line-height: 1; text-align: center; }
.about__odo-col { -webkit-text-stroke-color: color-mix(in oklab, var(--accent-deep) 72%, transparent); }
.about__odo-strip { display: block; will-change: transform; }
.about__odo-strip i { display: block; height: 1em; font-style: normal; text-align: center; }

/* ------------------------------------------------------------- the map -- */
.about__map {
  position: relative;
  height: max(46rem, 100svh);
  overflow: hidden;
}
.about__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.about__pins { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

.about__pin { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity 400ms var(--ease-out); }
.about__pin.is-on { opacity: 1; }
.about__pin::before {
  content: ""; position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sc-accent); border: 1.5px solid var(--accent-deep);
  box-shadow: 0 0 0 2px var(--ground);
}
.about__pin::after {
  content: ""; position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--accent-deep); opacity: 0; transform: scale(0.5);
}
.about__pin.is-hot::after { animation: about-ping 1600ms var(--ease-out) 1, about-breathe 3600ms ease-in-out 1600ms infinite; }
@keyframes about-ping {
  0% { opacity: 0.9; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.8); }
}
@keyframes about-breathe {
  0%, 100% { opacity: 0; transform: scale(0.9); }
  50% { opacity: 0.55; transform: scale(1.15); }
}
.about__lead { position: absolute; left: 0; top: 0; width: 1px; height: 1px; max-width: none; overflow: visible; }
.about__lead line {
  stroke: var(--accent-deep); stroke-width: 1; stroke-dasharray: 2 3;
  opacity: 0; transition: opacity 200ms var(--ease-out);
}
.about__pl {
  position: absolute; white-space: nowrap;
  font: 500 0.74rem/1 var(--sc-font-mono); letter-spacing: 0.03em; color: var(--sc-ink);
  padding: 0.38rem 0.5rem; border-radius: var(--sc-r-sm);
  background: color-mix(in oklab, var(--ground) 90%, transparent);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--sc-e1);
  opacity: 0; transform: translate3d(var(--lx, 0), calc(-50% + 4px), 0);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.about__pl b { font-weight: 500; color: var(--accent-deep); margin-right: 0.45em; }
.about__pin.is-hot .about__pl { opacity: 1; transform: translate3d(var(--lx, 0), -50%, 0); }
.about__pin.is-hot .about__lead line { opacity: 1; }

.about__legend {
  position: absolute; z-index: 3;
  left: var(--content-l); bottom: clamp(3rem, 9vh, 6rem);
  width: min(25rem, 31vw);
}
/* an h3 for the outline, a label to the eye; the night heading rule would
   otherwise turn it back into display tracking */
.about__legend h3.about__lh.label { margin: 0 0 0.85rem; line-height: 1.3; font-weight: 500; letter-spacing: 0.09em; }
.about__clist { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.about__chip {
  appearance: none; margin: 0; cursor: pointer; line-height: 1.2;
  min-height: 24px;
  color: var(--sc-ink); border-color: var(--rule-strong);
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.about__chip::before {
  content: ""; width: 0.6rem; height: 0.6rem; border-radius: 1px;
  background: repeating-linear-gradient(135deg, var(--accent-deep) 0 1px, transparent 1px 3px), color-mix(in oklab, var(--sc-accent) 45%, transparent);
  border: 1px solid var(--accent-deep);
  transition: background-color 160ms var(--ease-out);
}
.about__chip.is-hot, .about__chip[aria-pressed="true"] {
  border-color: var(--accent-deep);
  background: color-mix(in oklab, var(--sc-accent) 22%, var(--sc-surface));
}
.about__chip[aria-pressed="true"]::before { background: var(--accent-deep); }
.about__chip:active { transform: scale(0.97); }

/* the cities: one quiet line per country, keyed like the pins on the map.
   They are the map's accessible twin, not a second table of the same places. */
.about__cities { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.about__cities::before {
  content: attr(data-cc); content: attr(data-cc) / "";
  width: 1.9rem; flex: none;
  font: 500 0.7rem/1 var(--sc-font-mono); letter-spacing: 0.06em; color: var(--sc-ink-soft);
}
.about__cities li { display: inline-flex; align-items: center; }
.about__cities li + li::before {
  content: ""; width: 3px; height: 3px; margin: 0 0.5rem; border-radius: 50%;
  background: var(--rule-strong);
}
.about__city {
  appearance: none; background: none; border: 0; margin: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 24px;
  font: 400 0.86rem/1.3 var(--sc-font-text); color: var(--sc-ink-soft);
  text-decoration: underline 1px transparent; text-underline-offset: 0.3em;
  transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out);
}
.about__city.is-hot { color: var(--sc-ink); text-decoration-color: var(--accent-deep); }
.about__city[aria-pressed="true"] { color: var(--sc-ink); text-decoration-color: currentColor; }
.about__remote {
  margin-top: 1.5rem; max-width: 22ch;
  font: 440 var(--t-h3)/1.14 var(--sc-font-display);
  letter-spacing: -0.014em; color: var(--sc-ink);
  text-wrap: balance;
}

/* ----------------------------------------------------------- night tune -- */
:root[data-theme="night"] .about__value dt,
:root[data-theme="night"] .about__remote { font-weight: 420; letter-spacing: -0.008em; }
:root[data-theme="night"] .about__t,
:root[data-theme="night"] .about__value dd { line-height: 1.58; letter-spacing: 0.005em; }

/* ------------------------------------------- reduced motion, and no script --
   The rail becomes a plain grid of milestones in the page flow: every year
   is reachable without a sideways scroll and nothing moves. Without script
   nothing would drive the pan, so the same grid stands in for it. Under
   reduced motion about.js also turns the act into a flow act before the
   engine mounts, so the engine never tries to pin it. */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .about__pan { height: auto !important; }
  .about__pan .about__stage { position: static !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .about__window { position: static; -webkit-mask-image: none; mask-image: none; }
  .about__rail {
    display: grid !important; height: auto;
    grid-template-columns: repeat(auto-fill, minmax(max(14.5rem, 30%), 1fr)); gap: 2.6rem 2.2rem;
    padding: clamp(2rem, 6vh, 4rem) var(--content-r) clamp(3rem, 8vh, 5rem) var(--content-l);
    transform: none !important;
  }
  .about__years { display: contents; }
  .about__rhead, .about__yr { width: auto; height: auto; opacity: 1; position: relative; }
  .about__rhead { grid-column: 1 / -1; }
  .about__rtitle, .about__rsub, .about__y, .about__ico, .about__t, .about__node { position: static; transform: none; }
  .about__rsub { margin-top: 0.8rem; }
  .about__yr { display: grid; grid-template-columns: auto 1fr; align-items: end; align-content: start; gap: 0.2rem 0.9rem; padding-top: 1rem; border-top: 1px solid var(--rule-strong); }
  .about__yr::before, .about__node, .about__odo, .about__head, .about__fill, .about__end { display: none; }
  .about__ico { grid-row: 1; clip-path: none; color: var(--sc-ink-soft); }
  .about__y { grid-row: 1; color: var(--sc-ink); }
  .about__yr:last-child :is(.about__y, .about__ico) { color: var(--accent-deep); }
  .about__t { grid-column: 1 / -1; width: auto; margin-top: 0.6rem; color: var(--sc-ink-soft); opacity: 1; }
  .about__y, .about__ico { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .about__loop { transition: none; }
  .about__pin.is-hot::after { animation: none; opacity: 0.6; transform: scale(1); }
}
/* No script, no canvas: the map box would be a screen of empty ground, so the
   legend joins the flow. */
@media (scripting: none) {
  .about__map { height: auto; overflow: visible; }
  .about__cv, .about__pins { display: none; }
  .about__legend { position: relative; left: auto; bottom: auto; width: auto; padding: 0 var(--content-r) clamp(4rem, 10vh, 7rem) var(--content-l); }
}
/* The same, for engines that do not know (scripting). */
html:not(.js) .about__pan { height: auto; }
html:not(.js) .about__pan .about__stage { position: static !important; height: auto; min-height: 0 !important; overflow: visible !important; }
html:not(.js) .about__window { position: static; -webkit-mask-image: none; mask-image: none; }
html:not(.js) .about__rail {
  display: grid; height: auto;
  grid-template-columns: repeat(auto-fill, minmax(max(14.5rem, 30%), 1fr)); gap: 2.6rem 2.2rem;
  padding: clamp(2rem, 6vh, 4rem) var(--content-r) clamp(3rem, 8vh, 5rem) var(--content-l);
  transform: none;
}
html:not(.js) .about__years { display: contents; }
html:not(.js) :is(.about__rhead, .about__yr) { width: auto; height: auto; opacity: 1; position: relative; }
html:not(.js) .about__rhead { grid-column: 1 / -1; }
html:not(.js) :is(.about__rtitle, .about__rsub, .about__y, .about__ico, .about__t) { position: static; transform: none; }
html:not(.js) .about__rsub { margin-top: 0.8rem; }
html:not(.js) .about__yr { display: grid; grid-template-columns: auto 1fr; align-items: end; align-content: start; gap: 0.2rem 0.9rem; padding-top: 1rem; border-top: 1px solid var(--rule-strong); }
html:not(.js) :is(.about__node, .about__odo, .about__head, .about__fill, .about__end) { display: none; }
html:not(.js) .about__yr::before { display: none; }
html:not(.js) .about__ico { grid-row: 1; clip-path: none; color: var(--sc-ink-soft); opacity: 1; }
html:not(.js) .about__y { grid-row: 1; color: var(--sc-ink); opacity: 1; }
html:not(.js) .about__yr:last-child :is(.about__y, .about__ico) { color: var(--accent-deep); }
html:not(.js) .about__t { grid-column: 1 / -1; width: auto; margin-top: 0.6rem; color: var(--sc-ink-soft); opacity: 1; }
html:not(.js) .about__map { height: auto; overflow: visible; }
html:not(.js) :is(.about__cv, .about__pins) { display: none; }
html:not(.js) .about__legend { position: relative; left: auto; bottom: auto; width: auto; padding: 0 var(--content-r) clamp(4rem, 10vh, 7rem) var(--content-l); }

/* -------------------------------------------------------------- tablet -- */
@media (max-width: 1100px) {
  .about__legend { width: min(24rem, 40vw); }
}
@media (max-width: 900px) {
  .about__intro { grid-template-columns: 1fr; }
  .about__still { justify-self: start; width: min(100%, 24rem); }
}

/* -------------------------------------------------------------- mobile -- */
@media (max-width: 700px) {
  .about { --yr: 1.4rem; --base: 14rem; --rhead-w: 16rem; --line-y: 44%; }
  .about__values { grid-template-columns: 1fr; }
  .about__value, .about__value + .about__value { padding: 1.2rem 0 1rem; border-left: 0; }
  .about__value + .about__value { border-top: 1px solid var(--rule); }
  .about__rtitle { font-size: clamp(2rem, 9vw, 2.6rem); }
  .about__t { width: calc(100% - 1.5rem); font-size: 0.94rem; }
  .about__odo { font-size: min(clamp(5.5rem, 30vw, 8rem), calc(var(--rhead-w) / 2.2)); }
  .about__map { height: auto; overflow: visible; }
  .about__cv { position: relative; inset: auto; height: 72svh; }
  .about__pins { bottom: auto; height: 72svh; }
  .about__legend { position: relative; left: auto; bottom: auto; width: auto; padding: 1rem var(--content-r) 4.5rem var(--content-l); }
}