/* The About page. One narrow column, one diagram carrying the whole argument. */

.about .docmain{max-width:790px}

.a-hero{padding:58px 0 44px}
.a-hero h1{font-family:var(--display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(30px,5vw,46px);line-height:1.06;margin:0 0 22px;max-width:17ch;text-wrap:balance}
.a-lede{font-size:17.5px;line-height:1.66;color:var(--mid);margin:0 0 16px;max-width:60ch}
.a-punch{color:var(--ink);font-family:var(--display);font-weight:600;font-size:20px;
  line-height:1.4;letter-spacing:-.01em;max-width:24ch;margin-top:22px}

/* ── the figure ── */
.fig{margin:42px 0 0;padding:0}
.figsvg{width:100%;height:auto;display:block;overflow:visible}
.figsvg text{font-family:'IBM Plex Mono',ui-monospace,monospace}
.figsvg .fl{font-size:11px;letter-spacing:.11em;text-transform:uppercase;fill:var(--dim);font-weight:500}
.figsvg .fl-on{fill:var(--blue)}
.figsvg .fs{font-size:10.5px;fill:var(--dim)}
.figsvg .fm{font-size:12px;fill:var(--mid)}
.figsvg .fn{font-size:12px;fill:var(--ink);font-weight:500}
.figsvg .fo{font-size:12px;fill:var(--mid)}
.figsvg .fq{fill:var(--warn)}
.figsvg .fok{fill:var(--ink)}
.figsvg .fw{font-size:11.5px;fill:var(--dim)}
.figsvg .fw-on{fill:var(--good)}
.fig figcaption{margin-top:16px;font-size:13px;line-height:1.6;color:var(--dim);max-width:62ch}
@media (max-width:620px){
  .figsvg{min-width:600px}
  .fig{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ── sections ── */
.a-sec{padding:48px 0;border-top:1px solid var(--line)}
.a-sec h2{font-family:var(--display);font-size:clamp(22px,3.2vw,27px);font-weight:600;
  letter-spacing:-.018em;margin:0 0 16px;max-width:26ch;line-height:1.2;text-wrap:balance}
.a-sec > p{font-size:16px;line-height:1.7;color:var(--mid);margin:0 0 16px;max-width:64ch}
.a-sec > p.sub{font-size:14.5px;color:var(--dim);margin-top:-8px;margin-bottom:24px}
.a-sec b{color:var(--ink);font-weight:600}

.pull{margin:26px 0;padding:0 0 0 20px;border-left:3px solid;border-image:var(--grad) 1;max-width:62ch}
.pull p{font-size:16.5px;line-height:1.62;color:var(--ink);margin:0 0 10px;font-style:italic}
.pull cite{font-style:normal;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11.5px;color:var(--dim);letter-spacing:.02em}
.pull cite a{color:var(--dim)}
.pull cite a:hover{color:var(--blue)}

/* ── the four rules ── */
ol.rules{list-style:none;counter-reset:r;padding:0;margin:6px 0 0;
  display:flex;flex-direction:column;gap:2px}
ol.rules li{counter-increment:r;position:relative;padding:22px 0 22px 52px;
  border-top:1px solid var(--line)}
ol.rules li:first-child{border-top:0;padding-top:8px}
ol.rules li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:24px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;font-weight:500;
  color:var(--blue);letter-spacing:.04em}
ol.rules li:first-child::before{top:10px}
ol.rules h3{font-family:var(--display);font-size:17.5px;font-weight:600;color:var(--ink);
  margin:0 0 10px;line-height:1.35;letter-spacing:-.01em;max-width:34ch}
ol.rules p{font-size:15px;line-height:1.68;color:var(--mid);margin:0 0 10px;max-width:62ch}
ol.rules p.why{font-size:13.5px;color:var(--dim);margin:0;padding-left:14px;
  border-left:2px solid var(--line);max-width:58ch}

/* ── the refusals ── */
.nots{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:11px;margin-top:6px}
.not{padding:16px 17px;border-radius:13px;border:1px solid var(--line);background:var(--panel);
  display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden}
.not::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bad);opacity:.55}
.not b{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink);line-height:1.32}
.not span{font-size:13.5px;line-height:1.58;color:var(--mid)}

/* ── proof links ── */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:12px;margin-top:8px}
.check{display:flex;flex-direction:column;gap:8px;padding:18px 18px 17px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel);text-decoration:none;
  transition:border-color .16s,transform .16s,background .16s}
.check:hover{border-color:var(--blue);transform:translateY(-2px);background:var(--panel2);text-decoration:none}
.check .cn{font-family:var(--display);font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.3}
.check .cd,.check .cd-only{font-size:13.5px;line-height:1.55;color:var(--mid);flex:1}
.check .cn-after{color:var(--blue);font-size:14px}

/* ── who / close ── */
.a-who p{max-width:64ch}
.a-close{padding:54px 0 10px;border-top:1px solid var(--line);text-align:center}
.a-close h2{font-family:var(--display);font-size:clamp(24px,4vw,34px);font-weight:700;
  letter-spacing:-.02em;margin:0 0 10px}
.a-close p{color:var(--mid);margin:0 0 24px;font-size:16px}
.a-close .btn.go.big{background:var(--grad);color:#fff;padding:14px 30px;border-radius:13px;
  font-size:15.5px;font-weight:600;display:inline-block;text-decoration:none}
.a-close .btn.go.big:hover{text-decoration:none;filter:brightness(1.08)}

@media (max-width:700px){
  .a-hero{padding:36px 0 30px}
  .a-punch{font-size:18px}
  .a-sec{padding:36px 0}
  ol.rules li{padding-left:42px}
  .checks,.nots{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}