/* about.css — the About page: the chart fills the window under everything
   (about.js draws it) and is dimmed through the dither, so the words stand
   straight on it the way the video's do — the headings in rimmed type,
   the paragraphs as bars of ink, the orange on the numbers and the rules.
   One column, read top to bottom; the chart takes the drag between the lines. */

/* the chart: a hand to drag it; up and down stays the page's scroll on a touch screen */
.chart { overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.chart:active { cursor: grabbing; }
/* the dimming: ink dots over three quarters of the chart, two screen px each */
.chart::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--d25) 0 0 / 4px 4px; }

/* the text: one column on the chart, clear of the header */
main.about {
  position: relative; z-index: 1; max-width: 720px; margin: 0 auto;
  padding: calc(var(--top) + 24px) var(--gutter) 120px;
  pointer-events: none;
}
main.about > * { pointer-events: auto; }
.about .lead { margin-bottom: 40px; }
.about h1 { font-size: 36px; letter-spacing: 1px; line-height: 1.05; margin-bottom: 14px; text-wrap: balance; }
/* a paragraph as bars of ink, one a line that abuts the next, the way a
   plate holds a subtitle */
.bar { display: inline; font-size: 14px; line-height: 2; padding: 6px 8px; background: var(--ink); color: var(--paper);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.about p { max-width: 34em; }
.about p + p { margin-top: 10px; display: block; }

/* a section: the number and the glyph, the heading, the bars */
.about .sect { display: grid; grid-template-columns: 56px 1fr; gap: 6px 14px; align-items: start; margin-bottom: 40px; }
.about .sect .n { grid-row: 1; width: 48px; justify-self: center; font-weight: 900; font-size: 13px; letter-spacing: 2px; color: var(--ink); background: var(--accent); padding: 7px 0 6px; text-align: center; line-height: 1; }
.about .sect > i { grid-row: 2; justify-self: center; display: block; line-height: 0; }
.about .sect h2 { grid-column: 2; grid-row: 1; font-size: 22px; letter-spacing: 1px; line-height: 1.15; text-wrap: balance; }
.about .sect .body { grid-column: 2; grid-row: 2; }

/* the ladder: an ink table */
.about .ladderBox { background: var(--ink); color: var(--paper); padding: 16px; }
.about .head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.about .head .kick { color: var(--accent); }
.on-ink .ruler { background:
    linear-gradient(var(--paper), var(--paper)) 0 100% / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--paper) 0 2px, transparent 2px 10px) 0 100% / 100% 7px no-repeat; }
.about .ladderBox p { font-size: 13px; }
.ladder { list-style: none; border-top: 2px solid var(--paper); margin-top: 10px; font-size: 12px; }
.ladder li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 7px 0; border-bottom: 1px solid transparent; border-image: var(--d50p) 0 0 1 0 / 0 0 1px 0 repeat; }
.ladder li b { font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
.ladder li span { white-space: nowrap; }
.ladder li.top b { font-weight: 700; color: var(--accent); }
.ladder li.cols { border-bottom: 2px solid var(--paper); padding: 8px 0; }
.ladder li.cols span { font-weight: 500; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary .btn { margin-top: 14px; }
details[open] summary .btn { background: var(--accent); color: var(--ink); border-color: var(--accent); }
details[open] .ladder { margin-top: 12px; }

@media (min-width: 600px) {
  .about h1 { font-size: 48px; }
  .about .sect { grid-template-columns: 64px 1fr; gap: 8px 18px; }
  .about .sect h2 { font-size: 24px; }
  .bar { font-size: 15px; }
}