/* The Birdcage Business Builders look: cool paper, navy ink, burnt orange,
   Hanken Grotesk light headings with an italic accent, Inter for reading,
   and the watercolour wash from the BBB hero behind the top of the page. */
:root {
  --bg: #f1f4f5;
  --card: #f8fbfc;
  --ink: #22303a;
  --ink-strong: #0e1620;
  --muted: #45566d;
  --fade: #7d8a95;
  --line: rgba(14, 22, 32, .12);
  --track: #e2e8eb;
  --accent: #ad5319;
  --on-accent: #fcf6ef;
  --chip-live: #e6eddc;
  --chip-live-ink: #4d6634;
  --chip-soon: #f3e7d3;
  --chip-soon-ink: #6e4a1a;
  --frame: #0e1620;
  --wash-opacity: 1;
  --shadow: 0 1px 2px rgba(14, 22, 32, .04), 0 8px 24px rgba(14, 22, 32, .06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1620;
    --card: #16212d;
    --ink: #eef2f4;
    --ink-strong: #ffffff;
    --muted: rgba(241, 244, 245, .74);
    --fade: rgba(241, 244, 245, .48);
    --line: rgba(241, 244, 245, .12);
    --track: #1c2935;
    --accent: #d9a441;
    --on-accent: #0e1620;
    --chip-live: #22321f;
    --chip-live-ink: #b4cf93;
    --chip-soon: #33281a;
    --chip-soon-ink: #e6c27e;
    --frame: #05090e;
    --wash-opacity: .16;
    --shadow: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  position: relative;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 560px; z-index: -1;
  background: linear-gradient(rgba(241, 244, 245, .22), rgba(241, 244, 245, .22)), url(/img/wash.webp) center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 92%);
  mask-image: linear-gradient(#000 30%, transparent 92%);
  opacity: var(--wash-opacity);
}
body > * { position: relative; }
.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: calc(48px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));
}
header { text-align: center; }
.avatar {
  width: 104px; height: 104px; margin: 0 auto 18px; display: block;
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 4px rgba(248, 251, 252, .85), 0 12px 30px -10px rgba(14, 22, 32, .35);
}
.portrait { width: 100%; height: auto; border-radius: 20px; margin-bottom: 22px; display: block; }
h1 {
  margin: 0;
  color: var(--ink);
  font: 300 44px/1.05 "Hanken Grotesk", "Helvetica Neue", sans-serif;
  letter-spacing: -1px;
}
h1 em, h2 em { font-style: italic; font-weight: 500; }
.bio { margin: 10px auto 0; max-width: 32ch; color: var(--ink); font-size: 17px; }

nav {
  position: sticky; top: 0; z-index: 2;
  margin: 28px -16px 20px; padding: 10px 16px;
  transition: background-color .2s ease;
}
/* Only once the tabs stick to the top, so the wash shows through above. */
nav.stuck {
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 4px; gap: 4px;
  background: var(--track); border-radius: 999px;
}
.tabs button {
  appearance: none; border: 0; cursor: pointer;
  min-height: 42px; border-radius: 999px;
  background: transparent; color: var(--muted);
  font: 500 15px/1 "Hanken Grotesk", Inter, system-ui, sans-serif;
}
.tabs button[aria-selected="true"] { background: var(--ink-strong); color: var(--bg); font-weight: 600; }
.tabs button:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

[role="tabpanel"][hidden] { display: none; }
ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.app {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 14px; align-items: center;
  padding: 14px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  color: inherit; text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
a.app:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
a.app:active { transform: scale(.99); }
.app img { width: 60px; height: 60px; border-radius: 14px; display: block; }
.app h2 { margin: 0; font: 600 18px/1.25 "Hanken Grotesk", Inter, system-ui, sans-serif; color: var(--ink-strong); }
.app .with { display: block; margin-top: 1px; font: italic 500 14px/1.3 "Hanken Grotesk", Inter, sans-serif; color: var(--accent); }
.app p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  background: var(--chip-live); color: var(--chip-live-ink);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.soon { background: var(--chip-soon); color: var(--chip-soon-ink); }
.go { color: var(--fade); font-size: 22px; padding-left: 4px; }

.about p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; }
.about .lead { font: 300 26px/1.25 "Hanken Grotesk", "Helvetica Neue", sans-serif; letter-spacing: -.4px; color: var(--ink-strong); }

.link {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 56px; padding: 0 18px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  color: inherit; text-decoration: none; font-weight: 500;
}
.link span { color: var(--muted); font-weight: 400; font-size: 14px; }

footer { margin-top: 40px; text-align: center; font-size: 13px; color: var(--fade); }