/* ============================================================
   v3 pages/about.css: About (prototype about.html), plus the live
   page's circular "The cycle" diagram, which Aud kept over the
   prototype's four boxes (decided 2026-10-04). The cycle rules are
   ported from v2 pages/about.css (.cycle, .loop-*).

   Class map from the prototype (ab- to rt-about-):
     ab-col, ab-h, ab-call .big       rt-about-col, rt-about-h, rt-about-call rt-about-big
     ab-what, ab-row .n               rt-about-what, rt-about-row rt-about-n
     ab-crew, ab-p .t, ab-p.open      rt-about-crew, rt-about-p rt-about-t, rt-about-p-open
     ab-ph, ab-role                   rt-about-ph, rt-about-role
   Class map from the live About (cycle):
     .cycle .cycle-header             rt-about-cycle rt-about-cycle-head
     .section-eyebrow-pill            rt-about-pill
     .section-title(.accent)          rt-about-cycle h2 (em)
     .section-sub                     rt-about-cycle-sub
     .cycle-loop .loop-svg            rt-about-loop rt-about-loop-svg
     .loop-arc .loop-center(-text)    rt-about-arc rt-about-center(-text)
     .loop-stage .loop-node(-num)     rt-about-stage rt-about-node(-num)
     .loop-stage-label / -sub         rt-about-stage-label / rt-about-stage-sub
   Not ported: ab-cycle (the prototype's four boxes).
   In the SVG markup use var(--rt-red) and var(--rt-slate), not the
   v2 names var(--red) and var(--slate-blue).
   ============================================================ */

/* Our story: single reading column, pull-out, numbered rows */
.rt-about-col{max-width:1010px}
.rt-about-col > p{font-size:17px;margin-bottom:18px}
.rt-about-col > p b{color:var(--rt-ink)}
.rt-about-h{margin:10px 0 22px}
.rt-about-h em{color:var(--rt-slate);font-weight:600}
.rt-about-call{border-left:4px solid var(--rt-red);background:#fbf1f0;border-radius:4px 16px 16px 4px;padding:22px 22px 20px;margin:8px 0 28px}
.rt-about-call .rt-about-big{font-size:21px;line-height:1.28;font-weight:800;letter-spacing:-.02em;color:var(--rt-ink);margin-bottom:12px}
.rt-about-big em{font-weight:600;color:#b02a22}
.rt-about-call p{font-size:15.5px}
.rt-about-what{font-family:var(--rt-mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rt-slate);margin:30px 0 14px}
.rt-about-row{display:grid;grid-template-columns:64px 1fr;gap:14px;border-top:2px solid #5b7093;padding:18px 0 22px}
.rt-about-n{font-family:var(--rt-serif);font-style:italic;font-weight:600;font-size:44px;line-height:1;color:#aab9d3}
.rt-about-row small{display:block;font-family:var(--rt-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rt-slate)}
.rt-about-row h3{margin:6px 0 6px;font-size:20px}
.rt-about-row p{font-size:15.5px}

/* the crew */
.rt-about-crew{display:grid;gap:14px}
.rt-about-p{border:1px solid var(--rt-line);border-radius:16px;background:#fff;padding:18px;display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start}
.rt-about-ph{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:19px;color:var(--rt-slate);background:#e8eff8;border:1px dashed #aab4c2;overflow:hidden}
.rt-about-ph img{width:100%;height:100%;object-fit:cover;display:block}
.rt-about-role{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--rt-red)}
.rt-about-p h3{margin:2px 0 0}
.rt-about-t{font-size:14px;font-weight:600;color:var(--rt-slate);margin-bottom:6px}
.rt-about-p p{font-size:14.5px}
.rt-about-p-open{border-style:dashed;background:var(--rt-soft)}
.rt-about-p-open .rt-about-ph{background:#fff}

/* the cycle (from the live page) */
.rt-about-cycle{padding:44px 0 64px;background:var(--rt-soft);border-bottom:1px solid var(--rt-line)}
.rt-about-cycle-head{text-align:center;max-width:720px;margin:0 auto}
.rt-about-pill{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--rt-slate);background:#eef2f7;border:1px solid rgba(61,90,122,.2);padding:7px 14px;border-radius:999px;margin-bottom:24px}
.rt-about-cycle h2{font-size:30px;font-weight:900;color:var(--rt-ink);letter-spacing:-.04em;line-height:1.05;margin:0 0 20px}
.rt-about-cycle h2 em{color:var(--rt-red);font-style:italic;font-family:var(--rt-serif);font-weight:600}
.rt-about-cycle-sub{font-size:17px;color:var(--rt-body);line-height:1.6;margin:0 auto;max-width:640px}
.rt-about-loop{display:flex;justify-content:center;align-items:center;width:100%}
.rt-about-loop-svg{width:100%;max-width:620px;height:auto;display:block}
.rt-about-arc path{opacity:.55;transition:opacity .4s ease}
.rt-about-loop:hover .rt-about-arc path{opacity:.95}
.rt-about-center circle{fill:#fff;stroke:var(--rt-red);stroke-width:2;filter:drop-shadow(0 4px 14px rgba(220,38,38,.2))}
.rt-about-center-text{font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:800;fill:var(--rt-red);text-anchor:middle;dominant-baseline:middle;letter-spacing:.04em}
.rt-about-node{fill:#fff;stroke:var(--rt-slate);stroke-width:2;filter:drop-shadow(0 2px 6px rgba(15,23,42,.1));transition:transform .3s ease;transform-origin:center;transform-box:fill-box}
.rt-about-stage:hover .rt-about-node{transform:scale(1.08)}
.rt-about-node-num{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;fill:var(--rt-slate);text-anchor:middle;dominant-baseline:middle}
/* text-anchor is set inline per label so labels clear the nodes */
.rt-about-stage-label{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:800;letter-spacing:.14em;fill:var(--rt-ink)}
.rt-about-stage-sub{font-size:14px;font-weight:500;fill:var(--rt-body)}

@media(min-width:700px){.rt-about-crew{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  .rt-about-col > p{font-size:18.5px;margin-bottom:22px}
  .rt-about-h{font-size:50px;margin-bottom:30px}
  .rt-about-call{padding:38px 44px 34px;margin:10px 0 40px}
  .rt-about-call .rt-about-big{font-size:31px}
  .rt-about-call p{font-size:17px;max-width:62ch}
  .rt-about-row{grid-template-columns:130px 1fr;gap:20px;padding:26px 0 32px}
  .rt-about-n{font-size:76px}
  .rt-about-row h3{font-size:26px}
  .rt-about-row p{font-size:17px}
  .rt-about-cycle{padding:84px 0 84px}
  .rt-about-cycle h2{font-size:44px}
}
@media(min-width:1080px){.rt-about-crew{grid-template-columns:repeat(3,1fr)}}