/* Lean layout: home page and About Mark. Loaded after site.css. */
.lean-hero h1 { max-width: 16em; }
.founder { margin: 4px 0 0; color: var(--muted); }
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.proof a { display: block; border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--surface); color: inherit; text-decoration: none; }
.proof a:hover { border-color: var(--accent); }
.proof b { display: block; font-size: 1.7rem; color: var(--accent); line-height: 1.1; }
.proof span { font-size: .85rem; color: var(--muted); }
.proof-note { margin-top: 8px; }

.lean-h { margin: 0 0 6px; }
.lean-sub { color: var(--muted); margin: 0 0 18px; }
.lean-gap { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); }
#games .lean-h { margin-bottom: 20px; }

.lean-feature { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: center; margin: 0 0 32px; }
.lean-feature:last-child { margin-bottom: 0; }
.lean-feature.solo { grid-template-columns: 1fr; }
.lean-feature img, .lean-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.lean-feature img.fit, .lean-card img.fit, .lean-research img.fit { object-fit: contain; background: #fff; }
.lean-feature h2 { margin: 0 0 8px; }
.lean-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.lean-card h3 { margin: 12px 0 6px; }
.lean-card p { margin: 6px 0; }
#how .lean-feature.lean-card { padding: 18px; }

.nums { color: var(--muted); font-size: .92rem; }
.nums b { color: var(--text); }
.links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 600; font-size: .92rem; }
.fail { font-size: .88rem; color: var(--muted); }
.fail strong { color: var(--text); }
.more { margin-top: 18px; font-weight: 600; }

.lean-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lean-small { display: grid; grid-template-columns: 160px 1fr; gap: 14px; align-items: center; }
.lean-small h3 { margin: 0 0 4px; }
.lean-small p { margin: 4px 0; }
.lean-small img { aspect-ratio: 16 / 10; }

.tool-row { padding: 18px; margin-bottom: 18px; }
.tool-row h3 { margin-top: 0; }
.tool-row.flip > :first-child { order: 2; }
.shots2 { display: grid; grid-template-columns: 1fr; gap: 8px; }
.shots2 img { width: 100%; height: auto; aspect-ratio: 16 / 6.5; object-fit: cover; object-position: top left; border-radius: 8px; }

.lean-research { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; margin-top: 28px; padding: 20px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.lean-research h3 { margin: 0 0 8px; }
.lean-points { margin: 10px 0; padding-left: 18px; }
.lean-points li { margin: 6px 0; }
.lean-points b { color: var(--accent); }
#epicforge { grid-template-columns: 1.6fr 1fr; align-items: center; }
@media (max-width: 800px) { #epicforge { grid-template-columns: 1fr; } }
.stat-panel { margin: 0; display: grid; gap: 10px; }
.stat-panel > div { padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.stat-panel dt { font-size: 1.5rem; font-weight: 700; color: var(--accent); line-height: 1.1; }
.stat-panel dd { margin: 2px 0 0; font-size: .88rem; color: var(--muted); }
.lean-research img { width: 100%; height: auto; border-radius: 10px; background: #fff; }

.lean-company { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
.lean-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; padding: 18px; border: 1px solid var(--border); border-radius: 12px; }
.lean-dl dt { font-weight: 700; }
.lean-dl dd { margin: 0; color: var(--muted); }

/* Kept for the Writing and talks list, switched off until there is something to list. */
.lean-list { list-style: none; padding: 0; margin: 0; }
.lean-list li { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border); }
.lean-list span { color: var(--muted); font-size: .88rem; }

/* About Mark */
.mark-hero h1 { margin-bottom: 6px; }
.mark-role { font-size: 1.1rem; color: var(--muted); margin: 0 0 14px; }
.mark-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mark-list { padding-left: 1.2em; }
.mark-list li { margin: 6px 0; }
.work-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: 12px; padding: 16px; color: inherit; text-decoration: none; background: var(--surface); }
.work-card strong { font-size: 1.05rem; line-height: 1.35; }
.work-card span { color: var(--muted); font-size: .92rem; }
.work-card .work-meta { font-size: .8rem; }
.work-card:hover { border-color: var(--accent); }

button.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; }
button.zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.zoom:hover img { filter: brightness(1.04); }

@media (max-width: 800px) {
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lean-feature, .lean-grid, .lean-research, .lean-company, .mark-grid { grid-template-columns: 1fr; }
  .tool-row.flip > :first-child { order: 0; }
}
@media (max-width: 420px) { .lean-small { grid-template-columns: 1fr; } }
.shots2.pair img { aspect-ratio: 16 / 9; object-fit: contain; }

/* EpicForge flow (replaces the stat tiles) and the text-only research box */
.flow { margin: 0; display: grid; gap: 4px; justify-items: stretch; text-align: center; font-size: .9rem; }
.flow-step, .flow-teams span { padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.flow-teams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.flow-teams span { padding: 8px 4px; }
.flow-arrow { color: var(--muted); line-height: 1; }
.flow-end { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.lean-research.solo { grid-template-columns: 1fr; }
.lean-research.solo > div { max-width: 46em; }
.lean-research b { color: var(--accent); }
.flow-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }
.flow-ask { border-style: dashed; color: var(--muted); font-size: .85rem; }
.flow-note { color: var(--muted); font-size: .8rem; font-style: italic; }
.lean-hero { padding-bottom: 20px; }

/* Hero stat line: four short receipts, each links to its section */
.stats { list-style: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 28px; font-size: .9rem; line-height: 1.4; }
.stats a { color: var(--muted); text-decoration: none; display: block; }
.stats a:hover { color: var(--text); }
.stats b { display: block; color: var(--accent); font-size: 1.3rem; font-weight: 700; margin-bottom: 2px; }
@media (max-width: 800px) { .stats { grid-template-columns: 1fr 1fr; gap: 14px 18px; } }
.mark-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 800px) { .mark-grid.two { grid-template-columns: 1fr; } }

/* Games: the player-driven promise line at the end of the section */
.games-promise { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--border); max-width: 70ch; color: var(--muted); }
.games-promise strong { color: var(--text); }