/* Long-form pages share the homepage foundations. */
.phead { padding: 68px 0 44px; border-bottom: 1px solid var(--rule); }
.phead h1 { max-width: 19ch; font-size: clamp(38px, 5.1vw, 64px); margin: 18px 0 24px; letter-spacing: -.025em; }
.lede { max-width: 64ch; color: var(--muted); font-size: 18px; }
.article-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 68px; padding-top: 48px; }
.contents { align-self: start; position: sticky; top: 40px; font-size: 13px; }
.contents p { color: var(--muted); margin-bottom: 18px; }
.contents a { display: block; padding: 7px 0; text-decoration: none; }
.article-body { min-width: 0; }
.article-body > section { padding: 0 0 48px; margin-bottom: 42px; border-bottom: 1px solid var(--rule); }
.article-body > section:last-child { border: 0; margin-bottom: 0; }
.article-body h2 { font-size: 31px; margin-bottom: 8px; }
.article-body h3 { font-size: 26px; }
.article-body [data-tone] > h2, .proj[data-tone] .proj-h h2, .experiment[data-tone] > h2 { color: var(--ink); }
.article-body p, .article-body li, .article-body dd { max-width: 68ch; }
.sub { color: var(--muted); font-size: 12px; margin: 0 0 26px; }
.cite { border-left: 2px solid var(--accent); padding: 4px 0 4px 24px; margin: 28px 0; }
.cite .t { font-family: var(--serif); font-size: 24px; line-height: 1.25; color: var(--ink); }
.cite .v { font-size: 13px; color: var(--muted); }
.cite .l { color: var(--accent); font-size: 12px; display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; overflow-wrap: anywhere; }
.formula { padding: 28px 0; margin: 28px 0; border-block: 1px solid var(--rule); font-family: var(--mono); font-size: clamp(12px, 2vw, 18px); color: var(--ink); overflow-x: auto; }
.formula .where { display: block; font-family: var(--sans); font-size: 13px; line-height: 1.65; margin-top: 16px; color: var(--muted); }
.callout { padding: 22px 24px; background: var(--paper-2); border-left: 2px solid var(--accent); margin: 26px 0; }
.callout .h { color: var(--ink); font-weight: 500; }
.callout p:last-child { margin-bottom: 0; }
.projects { display: grid; gap: 52px; }
.proj { border-bottom: 1px solid var(--rule); padding-bottom: 48px; scroll-margin-top: 40px; }
.proj:last-child { border: 0; padding-bottom: 0; }
.proj-h { margin-bottom: 22px; }
.proj-h h2, .proj-h h3 { margin: 0 0 10px; }
.tag { font-size: 12px; color: var(--accent); }
.proj .row { margin: 26px 0; display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px 24px; }
.proj .row dt { font-size: 12px; padding-top: 3px; color: var(--muted); }
.proj .row dd { margin: 0; }
.stack { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 24px; font: 11px var(--mono); color: var(--muted); }
.stats { display: flex; flex-wrap: wrap; gap: 24px 36px; margin: 28px 0; }
.stat { flex: 1 1 120px; }
.stat .k { color: var(--accent); font: 36px/1.2 var(--serif); }
.stat .l { font-size: 12px; color: var(--muted); max-width: 18ch; }
.experiment { padding: 48px 0; border-bottom: 1px solid var(--rule); }
.experiment h2 { font-size: 32px; margin-bottom: 10px; }
.experiment > p { color: var(--muted); max-width: 65ch; margin-bottom: 28px; }
.experiment figcaption { max-width: 80ch; font-size: 13px; margin-top: 18px; color: var(--muted); }
.experiment .wide { max-width: none; padding: 0; }
.experiments-page .surface-shell { position: relative; background: var(--paper-2); }
.experiments-page #surface { height: 430px; }
.experiments-page .surface-eq { padding: 12px 20px; font: 12px var(--mono); border-top: 1px solid var(--rule); }
.experiments-page .surface-hint { position: absolute; right: 20px; top: 18px; font-size: 12px; color: var(--muted); }
.experiments-page .fig-shell { border: 1px solid var(--rule); }
.experiments-page .fig-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 20px; font-size: 13px; }
.experiments-page .fig-controls input { flex: 1; min-width: 120px; accent-color: var(--accent); }
.experiments-page .rankmove { padding: 0 20px 20px; color: var(--accent); font-size: 12px; min-height: 42px; }
.experiments-page .game-p { font-family: var(--sans); }
.experiments-page #surface:not(.live) { background: url('../fig/selection-surface.svg') center / contain no-repeat; }
.experiments-page canvas { max-width: 100%; }
.experiments-page .bar { grid-template-columns: minmax(0, 154px) minmax(20px, 1fr) 52px; }
@media (max-width: 760px) {
  .phead { padding-top: 40px; }
  .article-layout { grid-template-columns: 1fr; gap: 36px; padding-top: 30px; }
  .contents { position: static; display: flex; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
  .contents p { width: 100%; margin: 0; }
  .contents a { padding: 0; }
  .article-body h2 { font-size: 29px; }
}
@media (max-width: 480px) {
  .proj .row { grid-template-columns: 1fr; gap: 8px; }
  .proj .row dt:not(:first-child) { margin-top: 16px; }
  .formula { font-size: 11.5px; }
  .experiments-page #surface { height: 310px; }
  .experiments-page .surface-eq { font-size: 10px; }
  .experiments-page .bar { grid-template-columns: minmax(0, 116px) minmax(20px, 1fr) 40px; gap: 8px; font-size: 10px; }
  .experiments-page .bars { padding-inline: 12px; }
}