/* ── Shell ─────────────────────────────────────────────────────── */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 14px;
}
@media (min-width: 700px) { .shell { padding: 0 20px; } }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-inner {
  max-width: var(--shell); margin: 0 auto; padding: 8px 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
@media (min-width: 700px) { .topbar-inner { padding: 10px 20px; gap: 18px; flex-wrap: nowrap; } }

.brand {
  font-family: var(--font-display); font-weight: 900; font-size: 1.02rem;
  letter-spacing: -0.02em; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap);
}
.brand-dot {
  width: 11px; height: 11px; background: var(--bronze);
  border-radius: 6px 2px 6px 2px; display: inline-block; flex: none;
}

/* On a phone the nav is a horizontally scrolling strip — every destination
   stays reachable with a thumb and nothing wraps into a second row. */
.nav {
  display: flex; gap: 4px; width: 100%; order: 3;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 9px 14px; border-radius: var(--brick-sm); text-decoration: none;
  color: var(--muted); font-size: 13.5px; font-weight: 600;
  white-space: nowrap; scroll-snap-align: start;
  display: inline-flex; align-items: center; min-height: 38px;
  transition: background .2s, color .2s, border-radius .25s;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); border-radius: var(--brick-sm-flip); }
.nav a.active { background: var(--slate); color: #fff; }

@media (min-width: 860px) {
  .nav { width: auto; order: 0; margin-left: auto; overflow: visible; }
  .nav a { padding: 6px 13px; min-height: 0; font-size: 13px; }
}

main { padding: 18px 0 calc(88px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { main { padding: 26px 0 80px; } }

/* ── Bento grid ────────────────────────────────────────────────── */

/* One column on a phone. Two from 560px. Six from 900px, where the
   asymmetric spans finally mean something. */
.bento { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.bento > * { min-width: 0; }

@media (min-width: 560px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .span-2, .span-3, .span-4, .span-6 { grid-column: span 2; }
  .span-1-sm { grid-column: span 1; }
}
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .span-2 { grid-column: span 2; }
  .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 4; }
  .span-6 { grid-column: span 6; }
}