/* About and the 404 page: the parts list beside the mark, the founders, and text that is still to come. */

/* the parts of the mark, set like the parts list on a drawing */
.legend--parts { width: min(400px, 30vw); text-align: left; }
.parts { margin: 0 0 14px; border-top: 1px solid var(--line); }
.parts > div { display: grid; grid-template-columns: 76px 1fr; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.parts dt { font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.parts dt.parts__slash { color: var(--signal); }
.parts dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.legend--parts p.note { min-height: 0; }

/* the caption under the lone slash on the 404 page */
.legend--lone { width: min(320px, 26vw); }
.legend--lone p.note { min-height: 0; }

h2 .slash { font-style: normal; color: var(--signal); }

/* the founders: P, the slash, H */
.founders { display: grid; grid-template-columns: minmax(0, 1fr) clamp(56px, 9vw, 150px) minmax(0, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.founder { padding: clamp(28px, 3.4vw, 52px) 0 clamp(32px, 3.8vw, 56px); }
.founder__glyph { display: block; margin: 0 0 clamp(20px, 2.6vw, 38px) -.04em; font: 700 clamp(112px, 15vw, 248px)/.74 var(--sans); font-stretch: 112%; letter-spacing: -.04em; color: var(--ink-3); }
.founder h3 { margin: 0 0 18px; }
.founders__slash { position: relative; }
.founders__slash::before { content: ""; position: absolute; left: 50%; top: 8%; bottom: 8%; width: 2px; margin-left: -1px; background: var(--signal); transform: skewX(-22.8deg); }

/* text that has not been supplied yet: plainly marked, never invented */
.pending { display: table; margin: 0 0 10px; padding: 7px 11px 6px; border: 1px dashed var(--line-2); border-radius: 2px; font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.pending--text { display: block; max-width: 44ch; min-height: 92px; margin-bottom: 0; }

@media (max-width: 860px) {
  .page-about .fig, .page-not-found .fig { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
  .legend--parts, .legend--lone { width: auto; }
  .founders { grid-template-columns: 1fr; }
  .founder { padding: 28px 0 32px; }
  .founders__slash { height: 56px; }
  .founders__slash::before { left: 20px; top: 0; bottom: 0; }
}