html {
  scroll-behavior: smooth;
}

body {
  padding-top: 56px;
  font-family: system-ui, -apple-system, sans-serif;
}

section {
  scroll-margin-top: 56px;
}

/* Hero */
#hero {
  padding: 80px 0;
}

.hero-img-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  display: block;
  text-decoration: none;
}

/* Fallback for clients without aspect-ratio support: the media layers
   are absolutely positioned, so they fill the padding box and a 100%
   top padding keeps the hero a square. */
@supports not (aspect-ratio: 1 / 1) {
  .hero-img-wrap {
    height: 0;
    padding-top: 100%;
  }
}

.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.hero-media {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-media.is-active {
  opacity: 1;
}

/* Base image (floating head, transparent PNG, same 512x512 size as the
   media): it always sits ABOVE the media layers. It is on display while
   the first media is loading and through the whole first media 6s slot
   (the media fades in beneath it, visible through the transparent parts
   of the image). */
.hero-media--base {
  opacity: 1;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

/* The first media's slot is over (second media on display): the
   base image no longer displays... */
.hero-img-wrap.is-running .hero-media--base {
  opacity: 0;
}

/* ...and only displays on mouse hover (real hover devices only). */
@media (hover: hover) {
  .hero-img-wrap.is-running:hover .hero-media--base {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media {
    transition: none;
  }
}

/* Hero availability signal (E1) */
.availability {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background-color: #1c1c1e;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
}

.availability-dot {
  width: 0.6rem;
  height: 0.6rem;
  flex: none;
  border-radius: 50%;
  background-color: #35c25e;
  animation: availability-pulse 2.4s ease-in-out infinite;
}

@keyframes availability-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(53, 194, 94, 0.45); }
  50% { box-shadow: 0 0 0 7px rgba(53, 194, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .availability-dot {
    animation: none;
  }
}

/* Portfolio */
#portfolio {
  padding: 80px 0;
}

.portfolio-card {
  border: 0;
  border-radius: 0;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
}

.portfolio-card .card-img-top {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.portfolio-card .card-body {
  padding: 1.25rem;
}

/* h3 tag (valid heading order under the section h2) keeps the old h5 size */
.portfolio-card .card-title {
  font-size: 1.25rem;
}

.portfolio-card .card-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: transparent;
  padding: 0.75rem 1.25rem;
}

/* About */
#about {
  padding: 80px 0;
}

/* Sub-section labels inside About (same look as .section-heading) */
.about-subhead {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* #6f6f6f = 5.02:1 on white (WCAG AA) */
  color: #6f6f6f;
  margin: 0 0 1rem;
}

/* Experience timeline */
.about-timeline {
  border-left: 2px solid #e4e4e7;
  padding-left: 1.25rem;
  display: grid;
  gap: 1.75rem;
}

.about-timeline-item {
  position: relative;
}

/* Dot on the timeline border, aligned with the job title */
.about-timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1.25rem - 5px);
  top: 0.4rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #1c1c1e;
}

.about-timeline-item h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.1rem;
}

.about-timeline-meta {
  font-size: 0.85rem;
  /* #6f6f6f on white = 5.02:1 (WCAG AA) */
  color: #6f6f6f;
  margin-bottom: 0.4rem;
}

/* Portrait + resume link (right column; centered on mobile) */
#about .col-lg-4 {
  text-align: center;
}

.about-photo {
  max-width: 320px;
  width: 100%;
  height: auto;
  margin: 0 auto 1.25rem;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Contact */
#contact {
  padding: 80px 0;
}

/* Footer */
.footer-main {
  background-color: #1c1c1e;
  color: #9a9a9a;
}

.footer-main h2 {
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
}

.footer-social a {
  color: #9a9a9a;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-social .icon {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
}

.card-footer .icon {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.15em;
}

.footer-social a:hover {
  color: #ffffff;
}

.footer-bottom {
  background-color: #111113;
  /* #8a8a8e on #111113 = 5.48:1 (WCAG AA) */
  color: #8a8a8e;
  font-size: 0.8rem;
}

/* Section headings */
.section-heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* #6f6f6f = 5.02:1 on white, 4.77:1 on bg-light (WCAG AA) */
  color: #6f6f6f;
  margin-bottom: 0.4rem;
}

/* WCAG AA: darken the primary badge blue so white text clears 4.5:1
   (6.44:1). Scoped to cards - Bootstrap's theme is left untouched. */
.portfolio-card .badge.text-bg-primary {
  background-color: #0a58ca;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
}