/* Home page sections — linked only from pages/home.html */

.home-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Full-bleed: break out of main’s constrained content width */
.page-home main {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-block: 0 var(--space-2xl);
}

.page-home .hero,
.page-home .home-band {
  width: 100%;
  max-width: none;
}

.home-band__inner,
.hero__inner {
  width: min(100% - 2rem, var(--width-content));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* —— Hero —— */

.page-home .hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(85vh, 42rem);
  margin: 0;
  padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-2xl);
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 70% 30%, rgb(170 24 156 / 35%), transparent 55%),
    linear-gradient(160deg, var(--color-plum-deep) 0%, var(--color-plum) 55%, var(--color-plum-mid) 100%);
  color: #fff;
}

.hero--image {
  background: var(--color-plum-deep);
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 60%);
}

.page-home .hero h1 {
  color: #fff;
  max-width: 20ch;
}

.page-home .hero p {
  margin: 0;
  color: rgb(255 255 255 / 90%);
  font-size: 1.15rem;
  max-width: 36rem;
}

.hero__actions {
  margin-top: var(--space-md);
}

.cta--hero {
  border: 2px solid var(--color-accent);
}

.cta--hero:hover {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

/* —— Bands —— */

.home-band {
  position: relative;
  margin: 0;
  padding: var(--space-2xl) 0;
  overflow: hidden;
}

.home-band--plum {
  color: var(--color-on-plum);
  padding-block: calc(var(--space-2xl) + 2.5rem);
}

.home-band--plum::before {
  content: "";
  position: absolute;
  inset: 3.75rem 0;
  background: var(--color-plum);
  transform: skewY(-3deg);
  z-index: 0;
}

.home-band--plum h2,
.home-band--plum h3 {
  color: #fff;
}

.home-band--plum p,
.home-band--plum .home-section-title p {
  color: rgb(245 234 243 / 85%);
}

.home-band--plum a {
  color: #fff;
}

.home-band--plum a:hover {
  color: #fff;
  text-decoration-color: var(--color-magenta);
}

.home-band--engage {
  background: var(--color-engage);
  color: var(--color-text);
}

.home-band--quiet {
  background: var(--color-surface);
}

.home-section-title {
  text-align: center;
  margin-bottom: var(--space-lg);
  max-width: 40rem;
  margin-inline: auto;
}

.home-section-title h2 {
  position: relative;
  display: inline-block;
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  letter-spacing: 0.04em;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
}

.home-section-title h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3.125rem;
  height: 3px;
  transform: translateX(-50%);
  background: var(--color-magenta);
}

.home-section-title p {
  margin: 0;
}

/* —— About —— */

.home-about__intro {
  max-width: 36rem;
  margin-bottom: var(--space-lg);
}

.home-about__intro h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-md);
}

.home-about__intro p {
  margin: 0;
}

.home-focus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}

.home-focus li {
  min-width: 0;
}

.home-focus h3,
.home-projects h3 {
  font-size: 1.1rem;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 var(--space-xs);
}

.home-focus p,
.home-projects p {
  margin: 0;
}

/* —— Icons —— */

.home-icon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-sm);
  color: var(--color-accent);
  flex-shrink: 0;
}

.home-icon--check {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
}

.home-icon--muted {
  width: 2rem;
  height: 2rem;
  color: var(--color-magenta);
}

/* —— Engage —— */

.home-engage__inner {
  max-width: 40rem;
}

.home-engage h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-plum-deep);
  margin-bottom: var(--space-md);
}

.home-engage__inner > p {
  margin: 0 0 var(--space-md);
  color: var(--color-text-muted);
}

.home-engage__list {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
}

.home-engage__list li {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  color: var(--color-text-muted);
}

.home-engage__list li + li {
  margin-top: 0.65rem;
}

.home-engage__actions {
  margin: 0;
}

.home-engage .cta {
  display: inline-flex;
}

/* —— Showcase tiles —— */

.home-projects {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}

.home-projects--tiles .home-tile {
  background: var(--color-tile);
  padding: var(--space-md);
  border-radius: var(--radius);
  transition: background-color 0.2s ease;
}

.home-projects--tiles .home-tile:hover {
  background: var(--color-plum-mid);
}

.home-projects--tiles .home-tile a {
  text-decoration: none;
}

.home-projects--tiles .home-tile a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-magenta);
}

.home-projects--tiles .home-tile p {
  color: rgb(245 234 243 / 80%);
  font-size: 0.95rem;
}

/* —— Hobby quiet —— */

.home-projects--quiet li {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding-block: var(--space-md);
  border-bottom: 1px solid rgb(58 8 53 / 10%);
}

.home-projects--quiet li:first-child {
  border-top: 1px solid rgb(58 8 53 / 10%);
}

.home-projects--quiet h3 {
  color: var(--color-plum-deep);
}

.home-projects--quiet p {
  color: var(--color-text-muted);
}

.home-band--quiet .home-section-title h2 {
  color: var(--color-plum-deep);
}

.home-band--quiet .home-section-title p {
  color: var(--color-text-muted);
}

/* —— Reveal spacing override (layout.css sets max-width on .reveal) —— */

.page-home .reveal {
  max-width: none;
  margin-top: 0;
}

@media (min-width: 48rem) {
  .home-about .home-band__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-xl);
    align-items: start;
  }

  .home-about__intro {
    margin-bottom: 0;
  }

  .home-focus {
    grid-template-columns: 1fr 1fr;
  }

  .home-projects--tiles {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 63.99rem) {
  .hero .cta,
  .home-engage .cta {
    display: inline-flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-projects--tiles .home-tile {
    transition: none;
  }
}