/* =============================================================
   HOME PAGE — PAGE-SPECIFIC STYLES
   Overrides and additions on top of tokens + base + components.
   Scope: index.html only.
   ============================================================= */

/* -------------------------------------------------------------
   ACCESSIBILITY — SKIP LINK
   Visually hidden until focused by keyboard users.
   ------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 10px 20px;
  background-color: var(--color-zinc-900);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  font-weight: 500;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
}

/* -------------------------------------------------------------
   HERO SECTION
   Section padding inherited from .section.
   These classes handle the content-specific spacing.
   ------------------------------------------------------------- */
.hero__heading {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  line-height: 1.1;
  font-weight: 600;
  color: var(--color-zinc-900);
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  line-height: var(--lh-body-base);
  color: var(--color-zinc-600);
  max-width: 480px;
  margin-bottom: 40px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------
   WORK SECTION — SPACING
   ------------------------------------------------------------- */
.work__heading {
  margin-bottom: 32px;
}

/* Project card image area — margin insets from card edges on three sides.
   Height is driven by aspect-ratio in components.css, not min-height. */
.project-card__image {
  margin: 0 20px 20px;
}

/* Card 03 — dark navy bg for the Fanatics card-breaking project */
.project-card__image--navy {
  background-color: #1B2E4A;
}

/* -------------------------------------------------------------
   ABOUT SECTION — SPACING
   ------------------------------------------------------------- */
.about__heading {
  margin-bottom: 28px;
}

.about__subheading {
  margin-top: 48px;
  margin-bottom: 24px;
}

/* -------------------------------------------------------------
   CONTACT SECTION — SPACING
   ------------------------------------------------------------- */
.contact__heading {
  margin-bottom: 20px;
}

/* Visually align the contact links column to the top */
.contact-layout {
  align-items: start;
}