/* ==========================================================================
   Yosemite Lanes — page styles: about.html
   Loads AFTER css/site.css. Extends tokens only — no new palette hexes.
   ========================================================================== */

/* --- Era strip: 1961 → today timeline ----------------------------------- */
.era-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.era-strip::before {   /* the lane line the eras sit on */
  content: "";
  position: absolute;
  top: 7px;
  left: 4px;
  right: 4px;
  height: 2px;
  background: var(--amber);
}
.era-strip__item {
  position: relative;
  padding-top: var(--space-5);
}
.era-strip__item::before {  /* pin dot on the line */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--neon-red);
  box-shadow: 0 0 0 3px var(--scoresheet), 0 0 0 5px var(--amber);
}
.era-strip__year {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--felt);
  margin-bottom: var(--space-2);
}
.era-strip__item h3 { margin-bottom: 0.35em; }
.era-strip__item p { margin-bottom: 0; }

@media (max-width: 820px) {
  .era-strip { grid-template-columns: 1fr; }
  .era-strip::before {  /* line goes vertical */
    top: 4px;
    bottom: 4px;
    left: 7px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .era-strip__item { padding-top: 0; padding-left: var(--space-6); }
  .era-strip__item::before { top: 4px; }
}

/* --- Around-the-house venue tiles ---------------------------------------- */
.venue h3 { margin-top: var(--space-4); margin-bottom: 0.3em; }
.venue__hours {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  color: var(--felt);
  margin: 0 0 var(--space-2);
}
.venue p:last-of-type { margin-bottom: var(--space-2); }

/* --- Meet the House portraits --------------------------------------------- */
.house-portraits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: var(--space-7);
  justify-content: center;
}
@media (max-width: 640px) {
  .house-portraits { grid-template-columns: minmax(0, 280px); }
}
.house-portraits .figure figcaption {
  text-align: center;
  font-weight: 600;
  font-size: 1.0625rem;
  opacity: 1;
  margin-top: var(--space-3);
}

/* .pullquote now lives in css/site.css (about uses the .pullquote--center variant) */

/* --- Visit CTA ------------------------------------------------------------ */
.visit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
.visit-signoff { margin-top: var(--space-6); margin-inline: auto; }