/* Anchor Sprint pitch chrome. Not part of the product — deliberately reads
   as agency furniture so the client can tell what is and is not the website.

   position:static is load-bearing. The prototype's own .nav is fixed; a second
   fixed strip would stack two bars on a 375px viewport and eat ~17% of the
   first screen-height, which attacks the rule that Q1, Q2 and Q4 must be
   answerable within two screen-heights on mobile. This bar scrolls away. */
.pitchbar {
  position: static;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;            /* tap target floor */
  padding: 4px 16px;
  background: #101010;
  color: #F6F7F7;
  font: 500 13px/1.3 'IBM Plex Sans', system-ui, sans-serif;
  border-bottom: 1px solid rgba(246, 247, 247, .14);
}
.pitchbar__who { font-weight: 600; letter-spacing: .02em; }
.pitchbar__who span { color: rgba(246, 247, 247, .55); font-weight: 400; }
.pitchbar__seg { display: flex; margin-left: auto; gap: 2px; }
.pitchbar__seg a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: rgba(246, 247, 247, .62);
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 160ms ease, background-color 160ms ease;
}
.pitchbar__seg a:hover { background: rgba(246, 247, 247, .08); }
/* Gold as button fill with #1A1A1A on top = 7.6:1. The only compliant
   pairing; gold on light measures 2.13:1 and fails AA. */
.pitchbar__seg a[aria-current="page"] {
  background: #DAA22C;
  color: #1A1A1A;
  font-weight: 600;
}
.pitchbar__seg a:focus-visible,
.pitchbar__ctl:focus-within { outline: 2px solid #DAA22C; outline-offset: 2px; }
.pitchbar__ctl {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  cursor: pointer;
  color: rgba(246, 247, 247, .8);
}
@media (max-width: 560px) {
  .pitchbar { gap: 8px; padding: 4px 10px; font-size: 12px; }
  .pitchbar__who span { display: none; }
  .pitchbar__seg a { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pitchbar__seg a { transition: none; }
}

/* --- photo slots (Task 4) ---------------------------------------------
   LQIP sits behind the picture; the decoded image paints over it.
   background-image is not compositable — never animate it. */
.photo { background-size: cover; background-position: center; }
.photo > picture { display: block; width: 100%; height: 100%; }
.photo > picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── narrow screens ────────────────────────────────────────────────────
   At 320px with Android text scaling the switcher pushed the document to
   362px wide and the page scrolled sideways. The bar now wraps, and the
   descriptive half of each label is dropped so "Concept 01 · Midnight"
   becomes "01". */
@media (max-width: 700px) {
  .pitchbar { flex-wrap: wrap; row-gap: 2px; padding: 3px 10px; font-size: 11.5px; }
  .pitchbar__who { flex: 1 1 auto; min-width: 0; }
  .pitchbar__seg { flex: 0 0 auto; margin-left: auto; gap: 1px; }
  .pitchbar__seg a { padding: 0 9px; min-height: 44px; }  /* floor, not 40 */
  .pitchbar__ctl { order: 3; flex: 1 1 100%; min-height: 44px; }
  .pb-long { display: none; }
}