/* =========================================================
   Home page only. Shared pieces (colors, top bar, icons,
   portrait frame) live in style.css.
   ========================================================= */

/* ---------- Banner ---------- */
.banner {
  border-bottom: 1px solid var(--line);
  /* honeycomb pattern on top of a glow fading down from the top */
  background: var(--hex),
    linear-gradient(180deg, color-mix(in srgb, var(--accent-deep) 45%, transparent), transparent 80%);
}
.banner .wrap {
  display: grid;
  grid-template-columns: 1fr 300px;   /* 220px photo + 80px nudge */
  gap: 48px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 56px;
}
.banner h1 {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.role {
  margin: 0 0 20px;
  color: var(--accent);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.intro { color: var(--muted); font-size: 18px; margin: 0 0 24px; max-width: 56ch; }

/* Nudge the photo in from the right edge */
.banner .portrait { margin-right: 80px; }

/* ---------- Right now ----------
   Four equal cards. Each has a small colored label (.k) and a short
   sentence (.v). Links inside use the accent color. */
.now-strip { padding-top: 64px; padding-bottom: 96px; }
.now-strip .label { margin: 0 0 16px; }
.now-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.now {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: 4px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.now .k {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.now .v { font-size: 17px; line-height: 1.45; }
.now a { color: var(--accent); }

/* ---------- Phones ---------- */
@media (max-width: 900px) {
  .banner .wrap { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; padding-bottom: 32px; }
  .banner .portrait { width: 120px; order: -1; margin-right: 0; }
  .banner h1 { font-size: 32px; }
  .intro { font-size: 16px; }
  .now-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .now-strip { padding-top: 40px; padding-bottom: 64px; }
  .now .v { font-size: 16px; }
}