/* Long-form posts. Three sizes only: the title, the brand, and everything else. */
.post-page { background: var(--sheet); }
.post-page .brand span { font: 400 28px/1 var(--serif); letter-spacing: -0.005em; }
.post-page .brand-mark { width: 32.7px !important; height: 20.7px !important; }
.post-page .nav-links a, .post-page .btn { font-size: 18px; }
.post { padding: 152px var(--gutter) 120px; }
.post-head, .post-body { max-width: 680px; margin: 0 auto; }
.post-head h1 { font-size: clamp(42px, 5.4vw, 76px); font-weight: 400; line-height: 1; letter-spacing: -0.008em; }
.byline { margin-top: 24px; padding-bottom: 36px; border-bottom: 1px solid var(--rule-strong); font-size: 18px; color: var(--lead); }
.post-body { margin-top: 44px; font-size: 18px; line-height: 1.7; }
.post-body > * + * { margin-top: 1.1em; }
.post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: 0.8em; }
.post-body strong { font-weight: 600; }

@media (max-width: 760px) {
  .post { padding-top: 112px; }
  .post-page .nav-links a, .post-page .btn, .byline, .post-body { font-size: 17px; }
  .post-page .brand span { font-size: 24px; }
  .post-page .brand-mark { width: 28px !important; height: 17.8px !important; }
}

/* Figures break out of the text column; their labels use the body size. */
.post-fig { width: min(880px, 100vw - 2 * var(--gutter)); margin: 2.4em 0; position: relative; left: 50%; transform: translateX(-50%); }
.post-img { margin: 44px 0 0; left: 50%; }
.post-img img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 4px; }
.fig-layers { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 24px 40px; padding: 28px 32px; background: #f4f4f1; border-radius: 6px; }
.layers { width: 100%; height: auto; display: block; overflow: visible; }
.layers .pt { fill: #fff; stroke: #1c1b19; stroke-width: 0.9; }
.layers .pt.admin { fill: rgba(255, 255, 255, 0.94); }
.layers .pe-l { fill: #d9d8d2; stroke: #1c1b19; stroke-width: 0.9; }
.layers .pe-r { fill: #c9c8c1; stroke: #1c1b19; stroke-width: 0.9; }
.layers .sh { fill: rgba(28, 27, 25, 0.12); }
.legend { display: grid; gap: 42px; }
.legend p { display: grid; grid-template-columns: 1.6em 1fr; column-gap: 6px; font-size: 18px; line-height: 1.4; }
.legend b { grid-row: span 2; font-weight: 600; }
.legend span { color: var(--lead); }
.fig-time ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.fig-time ol::before { content: ""; position: absolute; left: 7px; right: 0; top: 7px; height: 1px; background: rgba(28, 27, 25, 0.3); }
.fig-time li { position: relative; padding: 30px 16px 0 0; font-size: 18px; line-height: 1.4; }
.fig-time li::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: #1c1b19; }
.fig-time li.now::before { background: #f1dc73; box-shadow: 0 0 0 1px #1c1b19, 0 0 0 6px rgba(241, 220, 115, 0.4); }
.fig-time b { display: block; font-weight: 600; }
.fig-time span { color: var(--lead); }

@media (max-width: 760px) {
  .fig-layers { grid-template-columns: 1fr; padding: 20px; }
  .legend { gap: 14px; }
  .legend p, .fig-time li { font-size: 17px; }
  .fig-time ol { grid-template-columns: 1fr; gap: 20px; }
  .fig-time ol::before { left: 6px; right: auto; top: 7px; bottom: 7px; width: 1px; height: auto; }
  .fig-time li { padding: 0 0 0 30px; }
}
.post-fig, .post-fig * { font-stretch: 100%; }
.fig-time li + li { margin-top: 0; }