/* Website layout. Colors, type, spacing and rules come from design/tokens/tokens.css;
   components (buttons, empty state) from design/components/bundle.css. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; display: flex; flex-direction: column; }
a { color: var(--link); }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.pb-btn { text-decoration: none; box-sizing: border-box; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--surface); padding: var(--space-2) var(--space-4); font-weight: 800; }
.skip:focus { left: var(--space-4); top: var(--space-2); z-index: 10; }

/* Top bar: 64px, ruled below. */
.top { border-bottom: var(--border-thick) solid var(--rule); }
.top-in { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.brand .pb-logo-word { font-size: 26px; line-height: 1; color: var(--ink); }

/* Hero */
.hero { flex: 1; display: flex; align-items: center; }
.hero-in { flex: 1; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-top: var(--space-12); padding-bottom: var(--space-12); align-items: center; }
.eyebrow { margin: 0 0 var(--space-4); color: var(--ink-muted); }
.hero-title { margin: 0; font-size: 72px; line-height: 76px; font-weight: 900; letter-spacing: -2px; }
.lede { margin: var(--space-6) 0 0; font-size: 20px; line-height: 30px; font-weight: 600; max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* Hero figure: ruled boxes joined by labelled links. */
.flow { margin: 0; display: flex; flex-direction: column; }
.flow-box { border: var(--border-thick) solid var(--rule); background: var(--surface); box-shadow: var(--shadow-sm); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.flow-box-brand { background: var(--brand); color: var(--on-action); }
.flow-box-brand .flow-sub { color: var(--on-action); }
.flow-sub { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.flow-link { align-self: flex-start; margin-left: var(--space-6); padding: var(--space-2) var(--space-3); border-left: var(--border-thick) solid var(--rule); color: var(--ink-muted); }
.chunks { display: flex; gap: var(--space-1); }
.chunks i { width: 28px; height: 20px; border: var(--border-thin) solid var(--rule); background: var(--brand); }
.chunks i:nth-child(2n) { background: var(--surface-tint); }

/* Footer */
.foot { border-top: var(--border-thick) solid var(--rule); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding-top: var(--space-6); padding-bottom: var(--space-6); }
.foot-meta { color: var(--ink-muted); }

/* 404 */
.missing { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.missing .pb-empty { max-width: 560px; margin: 0 auto; }

@media (min-width: 960px) {
  .hero-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-top: 96px; padding-bottom: 96px; }
}
@media (max-width: 639px) {
  .hero-title { font-size: 44px; line-height: 48px; letter-spacing: -1px; }
  .lede { font-size: 18px; line-height: 28px; }
    .hero-in { padding-top: var(--space-8); padding-bottom: var(--space-8); }
}
/* The collapse still sits in the lower third of its square frame; show only that part. */
.missing-art { width: 160px; height: 64px; object-fit: cover; object-position: 50% 100%; }