/* =========================================================
   index.css — homepage-specific styles
   ========================================================= */

/* ------------- Hero — shader dark version ------------- */

.hero-centered {
  background: #0a0809;
  border-bottom-color: transparent;
  overflow: hidden;
  /* Pull up behind the sticky transparent header so there is no gap.
     Header inner is 58px + 1px transparent border-bottom = 59px total flow height. */
  margin-top: -59px;
  /* Full-screen */
  min-height: 100vh;
  padding: 0; /* override main.css 140px 0 120px */
  /* Centre content vertically */
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* GPU layer hint — smoother compositing */
  transform: translateZ(0);
}

/* Ensure text sits above the canvas */
.hero-centered .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 80px;    /* always clear the transparent header */
  padding-bottom: 56px;
}

/* Flip all text to light */
.hero-centered__eyebrow {
  color: rgba(255, 255, 255, 0.32);
  margin-bottom: 40px; /* tighter than the default 56px */
}

.hero-centered__title {
  color: #fff;
  font-size: clamp(48px, 6.5vw, 96px); /* larger for full-screen hero */
  max-width: none;       /* remove main.css 12ch constraint */
  text-wrap: unset;      /* remove balance — explicit <br> handles the split */
  margin-bottom: 40px;   /* breathing room before the epigraph */
}

/* Accent dot: oxblood red, consistent with site-wide accent usage */
.hero-centered__title .accent {
  color: #c44;
}

.hero-centered__epigraph {
  color: rgba(255, 255, 255, 0.60);
}

/* Decorative rule */
.hero-centered__rule {
  background: rgba(255, 255, 255, 0.18);
}
.hero-centered__rule::before,
.hero-centered__rule::after {
  background: rgba(255, 255, 255, 0.25);
}

/* CTA: solid white → outline on hover */
.hero-centered .btn--ghost {
  background: #fff;
  border: 2px solid #fff;
  color: #0a0809;
  font-size: 13px;
  font-weight: 700;
}
.hero-centered .btn--ghost:hover {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
}

.hero-centered__actions { margin-top: 52px; }

/* Capitalise first letter of the rotating typewriter word */
#hero-word { text-transform: capitalize; }

/* ------------- Featured section ------------- */

.featured__heading {
  margin-bottom: 48px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.feature-grid__footer {
  text-align: center;
  margin-top: 72px;
}

/* ------------- Subjects section ------------- */

.subjects-section { padding-top: 0; }

.subjects__heading {
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}