/* About page: a long read in the landing's system. Narrow measure for prose, wide for the two
   diagrams. Reuses landing.css tokens; only this page's layout lives here. */
.ab-hero { padding: 96px 0 72px; border-bottom: 1px solid var(--line); }
.ab-name { font: 700 clamp(64px, 11vw, 148px)/0.92 var(--serif); letter-spacing: -.045em; }
.ab-name .tld { color: var(--thread); }
.ab-expand { margin-top: 18px; font: 400 15px/1.4 var(--mono); color: var(--ink-3); letter-spacing: .01em; }
.ab-expand b { color: var(--thread); font-weight: 500; }
.ab-hero .lede { margin-top: 32px; max-width: 34em; font-size: 20px; }

.ab { padding: 88px 0; border-bottom: 1px solid var(--line); }
.ab-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; }
.ab-grid > h2 { font: 700 28px/1.15 var(--serif); letter-spacing: -.02em; position: sticky; top: 96px; align-self: start; }
.ab-grid > h2 span { display: block; margin-bottom: 10px; font: 500 12px/1 var(--mono); color: var(--thread); letter-spacing: 0; }
.prose { max-width: 680px; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.prose p + p { margin-top: 18px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.prose a:hover { text-decoration-color: var(--thread); }
@media (max-width: 900px) { .ab-grid { grid-template-columns: 1fr; gap: 20px; } .ab-grid > h2 { position: static; } .ab { padding: 64px 0; } }

/* The three parts of the name */
.parts { margin-top: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.part-n { padding: 24px 24px 8px 0; }
.part-n + .part-n { padding-left: 24px; border-left: 1px solid var(--line); }
.part-n b { display: block; font: 700 40px/1 var(--serif); letter-spacing: -.03em; }
.part-n b.si { color: var(--thread); }
.part-n i { display: block; margin-top: 10px; font: italic 400 14px/1.4 var(--sans); color: var(--ink-3); }
.part-n p { margin-top: 12px; color: var(--ink-2); font-size: 15px; text-wrap: pretty; }
@media (max-width: 760px) { .parts { grid-template-columns: 1fr; } .part-n + .part-n { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* Principles: numbered, ruled */
.principles { counter-reset: p; display: grid; gap: 0; max-width: 760px; }
.principle { counter-increment: p; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.principle::before { content: counter(p, decimal-leading-zero); font: 500 13px/1.9 var(--mono); color: var(--thread); }
.principle h3 { font: 700 20px/1.3 var(--serif); letter-spacing: -.01em; }
.principle p { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; text-wrap: pretty; }

/* The loop */
.loop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.loop div { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.loop div:not(:last-child)::after { content: ""; position: absolute; right: -13px; top: 50%; width: 14px; border-top: 1.5px dashed var(--thread); }
.loop b { display: block; font: 700 15px/1.3 var(--serif); }
.loop span { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 900px) { .loop { grid-template-columns: 1fr; } .loop div:not(:last-child)::after { right: auto; left: 28px; top: auto; bottom: -13px; width: 0; height: 14px; border-top: 0; border-left: 1.5px dashed var(--thread); } }

.pull { margin: 28px 0 8px; padding-left: 20px; border-left: 2px solid var(--thread); font: 700 24px/1.3 var(--serif); letter-spacing: -.015em; color: var(--ink); max-width: 30em; }