/* Home page (index.html): Horizon's online business card. The hero follows the
   brochure cover (blush ground, framed render, the bar wordmark across
   the full width); the rest stays quiet so the download leads. */

.home {
  /* The blush band the hero carries below the fold, before the intro. */
  --theme-hero-band: clamp(64px, 10vw, 160px);

  position: relative;
  z-index: 1;
  font-size: var(--theme-text-md);
  line-height: 1.6;
  overflow-x: clip;
  background: var(--theme-color-background);
  box-shadow: 0 32px 48px -32px color-mix(in srgb, var(--theme-color-primary) 60%, transparent);
}

/* Focus lands here after the header's back-to-top link; no ring on the
   whole page. */
.home:focus {
  outline: none;
}

.home-heading {
  margin: 0 0 var(--theme-space-xs);
  font-size: var(--theme-text-xl);
  font-weight: var(--theme-font-weight-light);
  line-height: 1.1;
  color: var(--theme-color-heading);
  text-wrap: balance;
}

.home-button {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--theme-color-primary);
  border-radius: var(--theme-radius-pill);
  font-weight: var(--theme-font-weight-bold);
  font-size: var(--theme-text-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    background-color 0.2s var(--theme-ease-signature),
    color 0.2s var(--theme-ease-signature);
}

.home-button--primary {
  background: var(--theme-color-primary);
  color: var(--theme-color-inverse-text);
}

.home-button--primary:hover {
  background: transparent;
  color: var(--theme-color-primary);
}

.home-button:focus-visible {
  outline: 2px solid var(--theme-color-secondary);
  outline-offset: 3px;
}

/* Hero */

.home-hero {
  padding: var(--theme-header-height) var(--theme-bleed)
    calc(clamp(24px, 3vw, 40px) + var(--theme-hero-band));
  background: var(--theme-color-highlight);
}

/* The cover's tracked label style, for the specs line (and the
   tagline in the site header). */
.home-hero__specs {
  font-size: 0.75rem;
  font-weight: var(--theme-font-weight-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.home-hero__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(12px, 1.6vw, 20px);
}

.home-hero__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  list-style: none;
  color: var(--theme-color-heading);
}

/* Separators as on the cover, drawn in CSS so screen readers skip them. */
.home-hero__specs li + li::before {
  content: '\00b7';
  padding-inline: 0.9em;
  color: var(--theme-color-secondary);
}

/* Narrow screens wrap the line, so the dots would dangle: spacing only. */
@media (width <= 640px) {
  .home-hero__specs {
    gap: 4px 20px;
  }

  .home-hero__specs li + li::before {
    content: none;
  }
}

/* Render and wordmark step out of the column together, like the cover. */
.home-hero__media,
.home-hero__title {
  margin-inline: calc(-1 * var(--theme-escape));
}

.home-hero__media {
  position: relative;
  margin-block: 0;
}

/* Blush along the photo's bottom edge, the hero's own background
   reaching up into it as the wordmark springs move (main.js). */
.home-hero__horizon {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 80px;
  fill: var(--theme-color-highlight);
  pointer-events: none;
}

.home-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2400 / 1300;
  object-fit: cover;
  object-position: 50% 60%;
}

.home-hero__title {
  margin-top: clamp(12px, 1.6vw, 24px);
  line-height: 0;
}

.home-hero__wordmark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 761.89 / 63.9;

  /* An inline SVG clips to its viewBox by default; the springy shapes
     (main.js) need to move past it. */
  overflow: visible;
  fill: var(--theme-color-primary);
}

/* A bar or letter the pointer touches runs through the brand colours,
   dark to light and back: bordeaux, rose, a light rose between rose and
   blush (blush itself would vanish on the hero), rose, bordeaux.
   main.js marks the part lit and clears it when the run ends, so a
   quick pass plays it in full and a sweep leaves a wave behind. */
.wordmark-part {
  fill: var(--theme-color-primary);
}

/* On the shape inside, so it never touches the part's own load
   animation (motion.css). */
.wordmark-part[data-lit] > * {
  animation: theme-wordmark-colours 2.6s ease-in-out;
}

@keyframes theme-wordmark-colours {
  0%,
  100% {
    fill: var(--theme-color-primary);
  }

  22%,
  78% {
    fill: var(--theme-color-secondary);
  }

  42%,
  58% {
    fill: color-mix(in srgb, var(--theme-color-secondary) 45%, var(--theme-color-highlight));
  }
}

.home-hero__place {
  font-weight: var(--theme-font-weight-light);
  color: var(--theme-color-text);
}

/* Intro and facts */

/* The copy sits centered in the left column, the render fills the
   right one. On desktop the section is at least a screen tall. */
.home-intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--theme-space-lg);
  align-items: center;
  padding: var(--theme-section-space) var(--theme-bleed);
}

.home-intro__text {
  justify-self: center;
  width: 100%;
  max-width: 38rem;
}

@media (width > 800px) {
  .home-intro {
    min-height: 100svh;
  }
}

.home-intro__text > p + p {
  margin-top: 1em;
}

.home-intro__lead {
  font-size: var(--theme-text-lg);
  font-weight: var(--theme-font-weight-light);
  line-height: 1.45;
  color: var(--theme-color-heading);
}

/* The render fills its column from the hero's blush band down to the
   bottom of the section, and off the right edge of the viewport. The
   frame is a window onto a fixed photo, like a fixed background: the
   photo holds still under the header while the frame scrolls over it.
   clip-path clips the fixed photo to the frame, container units size it
   to the frame's width, and the frame's named view timeline drives the
   parallax (motion.css). */
.home-intro__media {
  align-self: stretch;
  margin: calc(-1 * var(--theme-section-space)) calc(-1 * var(--theme-bleed))
    calc(-1 * var(--theme-section-space)) 0;
  clip-path: inset(0);
  container-type: inline-size;
  view-timeline: --theme-intro-media block;
}

.home-intro__media img {
  position: fixed;
  top: var(--theme-header-height);
  display: block;
  width: 100cqw;
  height: calc(100svh - var(--theme-header-height));
  object-fit: cover;
}

/* Follows the brochure's specification table: a rose rule over each row. */
.home-facts {
  container-type: inline-size;
  margin-top: var(--theme-space-md);
}

.home-facts__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding-block: 14px;
  border-top: 1px solid var(--theme-color-rule);
}

.home-facts__row:last-child {
  border-bottom: 1px solid var(--theme-color-rule);
}

@container (width >= 30rem) {
  .home-facts__row {
    grid-template-columns: 11rem 1fr;
    gap: 24px;
  }
}

.home-facts__term {
  font-size: var(--theme-text-sm);
  font-weight: var(--theme-font-weight-bold);
  color: var(--theme-color-heading);
}

.home-facts__value {
  margin: 0;
}

/* Brochure download: one quiet moment on the brochure's blush, with a
   lot of room around it, centered on the band. */

.home-brochure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--theme-space-lg);
  padding: clamp(96px, 12vw, 220px) var(--theme-bleed);
  text-align: center;
  background: var(--theme-color-highlight);
}

.home-brochure__cover {
  display: block;
  width: min(40rem, 100%);
}

.home-brochure__cover img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--theme-color-primary) 45%, transparent);
}

.home-brochure__text {
  max-width: 30rem;
}

.home-brochure__text p {
  margin-bottom: var(--theme-space-sm);
}

/* Side by side from tablet width up: cover on the left, text and button
   on the right, the pair centered on the band. */
@media (width > 800px) {
  .home-brochure {
    flex-direction: row;
    justify-content: center;
    gap: clamp(48px, 7vw, 140px);
    text-align: start;
  }

  .home-brochure__cover {
    flex: 0 1 40rem;
  }

  .home-brochure__text {
    flex: 0 1 26rem;
  }
}

/* The hero is exactly one screen tall on every screen, header included
   (the header lies over its top padding), plus the blush band below.
   The render takes whatever height is left after the wordmark and the
   specs line, and crops to fit. */
.home-hero {
  display: flex;
  flex-direction: column;
  height: calc(100svh + var(--theme-hero-band));
  min-height: calc(30rem + var(--theme-hero-band));
}

.home-hero__media {
  flex: 1 1 auto;
  min-height: 0;
}

.home-hero__media img {
  height: 100%;
  aspect-ratio: auto;
}

.home-hero__title,
.home-hero__bottom {
  flex: none;
}

@media (width <= 800px) {
  .home-intro {
    grid-template-columns: 1fr;
  }

  /* Edge to edge on small screens, flush to the bottom of the section,
     as a plain image. */
  .home-intro__media {
    margin: 0 calc(-1 * var(--theme-bleed)) calc(-1 * var(--theme-section-space));
  }

  .home-intro__media img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
  }
}

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