/* ==========================================================================
   About page · New York 2026, four days
   Reading path: label → headline → lead (head) · why New York · the five parts on one line, each with its number
   (the page's memorable element) · who organises it · partners (logo grid + the list in words) · from Bucharest ·
   two ways in. Scoped to body.p-about; shared tokens and components come from fot.css.
   ========================================================================== */

/* ---------- head ---------- */
body.p-about .ab-head { padding-top: calc(var(--edge) + 136px); }
body.p-about .ab-head .h1 { font-size: clamp(46px, 5.6vw, 96px); max-width: 19ch; text-wrap: balance; }
body.p-about .ab-head__t { gap: 26px; }
body.p-about .ab-head .lead { max-width: 34ch; text-wrap: pretty; }
body.p-about .ab-head__side { gap: 10px; }
body.p-about .ab-note { font-size: 16px; line-height: 1.5; color: var(--fg-2); max-width: 32ch; }
body.p-about .ab-head__side .more { margin-top: 6px; }
body.p-about .ab-facts b { text-wrap: balance; }

/* ---------- shared ---------- */
body.p-about .ab-sh { display: flex; flex-direction: column; gap: 18px; }
body.p-about .sec .h2 { text-wrap: balance; }
body.p-about .ab-stack { display: flex; flex-direction: column; gap: 16px; }
body.p-about .ab-rowhead { gap: 20px 48px; margin-bottom: 0; }
body.p-about .ab-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 30em; }
body.p-about .ab-side p { font-size: 17px; line-height: 1.5; color: var(--fg-2); }
body.p-about .body { max-width: 34em; text-wrap: pretty; }

/* ---------- 01 · why New York: three reasons, numbered ---------- */
body.p-about .ab-why { gap: 0; }
body.p-about .ab-why li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 16px; padding: 22px 0 24px; border-top: 1px solid var(--hair); }
body.p-about .ab-why li:first-child { border-top-color: var(--fg); }
body.p-about .ab-why__n { grid-row: 1 / 3; padding-top: 7px; font: 500 13px/1 var(--mono); letter-spacing: .04em; color: var(--accent-t); }
body.p-about .ab-why__h { font: 700 clamp(22px, 1.9vw, 30px)/1.1 var(--sans); letter-spacing: -.015em; }
body.p-about .ab-why__t { font-size: 18px; line-height: 1.6; color: var(--fg-2); max-width: 36em; text-wrap: pretty; }

/* ---------- 02 · the five parts on one line ----------
   The festival line of the site (the stops on the home page, the day on the venues page): hollow stations,
   Watch ringed in violet (it runs beside Think), Connect a violet diamond at the end. Big number under each station. */
body.p-about .ab-line { --dot: 20px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--gap); margin-top: clamp(44px, 5vw, 80px); }
body.p-about .ab-st { position: relative; display: flex; flex-direction: column; min-width: 0; }
body.p-about .ab-st__k { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font: 700 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-t); }
body.p-about .ab-st__k .pi { inline-size: 32px; block-size: 32px; flex: none; }
body.p-about .ab-st__dot { position: relative; display: block; block-size: var(--dot); margin: 16px 0 24px; }
body.p-about .ab-st__dot::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--gap)); top: calc(var(--dot) / 2 - 2px); block-size: 4px; background: var(--accent); }
body.p-about .ab-st__dot::after { content: ""; position: absolute; left: 0; top: 0; inline-size: var(--dot); block-size: var(--dot); border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px var(--fg); transition: background .35s var(--ease), transform .35s var(--ease); }
body.p-about .ab-st--par .ab-st__dot::after { box-shadow: inset 0 0 0 3px var(--accent); }
body.p-about .ab-st--end .ab-st__dot::before { display: none; }
body.p-about .ab-st--end .ab-st__dot::after { border-radius: 3px; background: var(--accent); box-shadow: none; transform: rotate(45deg) scale(.82); }
body.p-about .ab-st:hover .ab-st__dot::after { background: var(--accent); }
body.p-about .ab-st--end:hover .ab-st__dot::after { transform: rotate(45deg) scale(.95); }
body.p-about .ab-st__n { display: flex; align-items: flex-start; font: 700 clamp(72px, 8.6vw, 156px)/.8 var(--sans); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
body.p-about .ab-st__n b { font-weight: 700; }
body.p-about .ab-st__plus { font-size: .46em; line-height: 1; margin-left: .06em; letter-spacing: 0; color: var(--accent-t); }
body.p-about .ab-st__t { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 17px; line-height: 1.45; max-width: 24ch; text-wrap: pretty; }

/* ---------- 03 · who organises it ---------- */
body.p-about #organiser .lead { max-width: 30ch; }
body.p-about .ab-kv { display: flex; flex-direction: column; margin: 6px 0 0; border-top: 1px solid var(--fg); }
body.p-about .ab-kv div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
body.p-about .ab-kv dt { font: 500 12px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
body.p-about .ab-kv dd { margin: 0; font-size: 17px; line-height: 1.45; }

/* ---------- 04 · partners: the logo grid (build.py) and the list in words ---------- */
/* logo tiles like the home band: paper tiles so any logo colour reads on the dark page; grey at rest, colour on hover */
body.p-about .lgg { --lg-paper: #F7F3EC; display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); margin-top: clamp(40px, 4.4vw, 64px); }
body.p-about .lgg__grp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 14px var(--gap); padding-top: 14px; border-top: 1px solid var(--fg); }
body.p-about .lgg__h { align-self: start; padding-top: 4px; }
body.p-about .lgg__l { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
body.p-about .lgg__i { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
body.p-about .lgg__m { display: grid; place-items: center; block-size: 108px; padding: 14px 18px; background: var(--lg-paper); }
body.p-about .lgg__m img { block-size: 40px; inline-size: auto; max-inline-size: 100%; object-fit: contain; filter: grayscale(1) contrast(1.06); opacity: .9; transition: filter .45s var(--ease), opacity .45s var(--ease); }
/* per-logo greys (data-logo from build.py): the pale marks a step darker, the round seals a size up; eTheatrum's name beside its mark */
body.p-about .lgg__m { grid-auto-flow: column; column-gap: 10px; }
body.p-about .lgg__i[data-logo="unatc"] img { filter: grayscale(1) brightness(.5); opacity: 1; }
body.p-about .lgg__i[data-logo="ucin"] img { filter: grayscale(1) brightness(.7) contrast(1.25); opacity: 1; }
body.p-about .lgg__i[data-logo="romampro"] img { filter: grayscale(1) brightness(.8) contrast(1.1); opacity: 1; }
body.p-about .lgg__i[data-logo="ucin"] img, body.p-about .lgg__i[data-logo="racc-ct"] img { block-size: 56px; }
@media (forced-colors: active) { body.p-about .lgg__m { forced-color-adjust: none; } }
body.p-about .lgg__i:hover img, body.p-about .lgg:focus-within img { filter: none; opacity: 1; }
body.p-about .lgg__n { font-size: 15px; line-height: 1.4; color: var(--fg-2); }
body.p-about .ab-plist { margin: clamp(36px, 4vw, 56px) 0 0; border-top: 1px solid var(--fg); }
body.p-about .lgg + .ab-plist { margin-top: clamp(28px, 3vw, 44px); }
body.p-about .ab-plist > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 10px var(--gap); padding: 18px 0 20px; border-bottom: 1px solid var(--hair); }
body.p-about .ab-plist dt { padding-top: 6px; font: 500 12px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
body.p-about .ab-plist dd { margin: 0; }
body.p-about .ab-plist ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); margin: 0; padding: 0; list-style: none; }
body.p-about .ab-plist li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0 10px; border-top: 1px solid var(--hair); font: 700 clamp(18px, 1.4vw, 22px)/1.3 var(--sans); letter-spacing: -.01em; }
body.p-about .ab-plist li:nth-child(-n+2) { border-top: 0; padding-top: 2px; }
body.p-about .ab-plist li::before { content: ""; inline-size: 7px; block-size: 7px; background: var(--accent); transform: translateY(-.12em); }

/* ---------- 05 · from Bucharest ---------- */
body.p-about .ab-legs { position: relative; display: flex; flex-direction: column; margin-top: 10px; }
body.p-about .ab-legs::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: 18px; width: 2px; background: var(--accent); }
body.p-about .ab-legs li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 0; }
body.p-about .ab-legs li > span:last-child { font: 500 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); }
body.p-about .ab-legs b { display: block; font: 700 19px/1.2 var(--sans); letter-spacing: -.01em; text-transform: none; color: var(--fg); }
body.p-about .ab-legs__s { position: relative; z-index: 1; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); }
body.p-about .ab-legs__s.is-done { background: var(--accent); box-shadow: none; }
body.p-about .ab-photo { grid-column: 1 / -1; margin: clamp(44px, 5vw, 80px) 0 0; }
body.p-about .ab-photo__m { aspect-ratio: 21 / 9; background: var(--soft); }
body.p-about .ab-photo__m img { object-position: 50% 32%; }

/* ---------- two ways in ---------- */
body.p-about .way .h2 { font-size: clamp(36px, 4.2vw, 68px); max-width: 14ch; text-wrap: balance; }
body.p-about .ab-cd { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; font-size: 16px; line-height: 1.35; color: var(--fg-2); }
body.p-about .ab-cd b { font: 500 clamp(20px, 1.8vw, 26px)/1.1 var(--mono); letter-spacing: -.02em; color: var(--fg); white-space: nowrap; }

/* ---------- breakpoints ---------- */
@media (max-width: 1080px) {
  body.p-about .ab-st__t { max-width: none; }
}
/* the line turns vertical: stations on the left, the number and the words beside them */
@media (max-width: 900px) {
  body.p-about .ab-line { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.p-about .ab-st { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); grid-template-areas: "dot k" "dot n" "dot t"; column-gap: 20px; padding-bottom: 40px; }
  body.p-about .ab-st:last-child { padding-bottom: 0; }
  body.p-about .ab-st__k { grid-area: k; }
  body.p-about .ab-st__n { grid-area: n; margin-top: 12px; font-size: clamp(64px, 17vw, 112px); }
  body.p-about .ab-st__t { grid-area: t; margin-top: 16px; max-width: 40ch; }
  body.p-about .ab-st__dot { grid-area: dot; margin: 0; block-size: auto; }
  body.p-about .ab-st__dot::before { left: calc(var(--dot) / 2 - 2px); right: auto; top: 18px; bottom: -58px; inline-size: 4px; block-size: auto; }
  body.p-about .ab-st__dot::after { top: 8px; }
}
@media (max-width: 720px) {
  body.p-about .ab-head { padding-top: calc(var(--edge) + 104px); }
  body.p-about .ab-head .h1 { font-size: clamp(40px, 12vw, 64px); }
  body.p-about .ab-head .lead { font-size: 19px; }
  body.p-about .sec .h2 { font-size: clamp(32px, 10vw, 48px); }
  body.p-about .ab-why li { grid-template-columns: 36px minmax(0, 1fr); gap: 6px 12px; }
  body.p-about .ab-why__t { font-size: 17px; }
  body.p-about .ab-kv div { grid-template-columns: 1fr; gap: 4px; }
  body.p-about .lgg__grp { grid-template-columns: 1fr; }
  body.p-about .lgg__l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.p-about .lgg__m { block-size: 88px; padding: 10px 12px; }
  body.p-about .lgg__m img { block-size: 36px; }
  body.p-about .lgg__i[data-logo="ucin"] img, body.p-about .lgg__i[data-logo="racc-ct"] img { block-size: 52px; }
  body.p-about .ab-plist > div { grid-template-columns: 1fr; gap: 6px; }
  body.p-about .ab-plist ul { grid-template-columns: 1fr; }
  body.p-about .ab-plist li { font-size: 18px; }
  body.p-about .ab-plist li:nth-child(2) { border-top: 1px solid var(--hair); padding-top: 9px; }
  body.p-about .ab-photo__m { aspect-ratio: 4 / 3; }
  body.p-about .ab-cd { align-items: flex-start; text-align: left; }
  body.p-about .way__f { flex-direction: column; align-items: stretch; }
  body.p-about .way__f .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.p-about .ab-st__dot::after { transition: none; }
}