/* ==========================================================================
   Home page composition. Shared primitives live in the two stylesheets above.
   ========================================================================== */

/* --- Hero: ink slab, typographic panel left, kunanyi photograph bleeding right --- */
.hero { position: relative; background: var(--band); color: var(--band-text); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .28;  /* lighter touch on the light band, lifted again in dark */
  background:
    repeating-radial-gradient(ellipse 960px 440px at 4% 84%, rgba(131,41,138,.5) 0 1px, transparent 1px 30px),
    repeating-radial-gradient(ellipse 720px 350px at 26% 104%, rgba(42,42,134,.42) 0 1px, transparent 1px 26px);
  /* Fades out to the right on the same axis as the panel dissolving into the
     photograph, so both edges resolve together. */
  -webkit-mask-image: linear-gradient(90deg,
      #000 0%, #000 36%, rgba(0,0,0,.6) 54%, rgba(0,0,0,.18) 66%, transparent 75%);
          mask-image: linear-gradient(90deg,
      #000 0%, #000 36%, rgba(0,0,0,.6) 54%, rgba(0,0,0,.18) 66%, transparent 75%);
}
.hero__grid { position: relative; display: grid; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.06fr .94fr; align-items: stretch; } }

.hero__panel {
  display: grid; align-content: center; gap: var(--s5);
  padding-block: clamp(2.75rem, 5.5vw, 5rem);
  padding-inline: var(--gutter);
  padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
}
@media (min-width: 940px) { .hero__panel { padding-right: clamp(1.5rem, 3.5vw, 3.25rem); } }

.hero__title { font-size: var(--step-5); font-stretch: 124%; font-weight: 800; line-height: .95; max-width: 12ch; }
.hero__theme { font-size: var(--step-2); line-height: 1.32; max-width: 24ch; color: var(--band-soft); }
.hero__theme .grad { font-family: var(--font-display); font-weight: 700; font-stretch: 110%; letter-spacing: -.015em; }
.hero__meta { display: grid; gap: .3rem; color: var(--band-text); }
.hero__meta .util { color: var(--band-mute); }
.hero__meta strong { font-family: var(--font-display); font-weight: 600; font-stretch: 108%; font-size: var(--step-1); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .6rem; padding-top: .4rem; }

.hero__media { position: relative; min-height: 300px; }
@media (min-width: 940px) { .hero__media { min-height: 100%; } }
.hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 56% 42%;
  transition: filter var(--dur) var(--ease);
}
/* The photograph carries the theme too: bright and open in light, sunk and
   cooler in dark, so switching is unmistakable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__media img { filter: brightness(.72) saturate(.85) contrast(1.05); }
  :root:not([data-theme="light"]) .hero::before { opacity: .85; }
}
:root[data-theme="dark"] .hero__media img { filter: brightness(.72) saturate(.85) contrast(1.05); }
:root[data-theme="dark"] .hero::before { opacity: .85; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--band) 0%, color-mix(in srgb, var(--band) 0%, transparent) 34%);
}
@media (min-width: 940px) {
  .hero__media::after { background: linear-gradient(90deg, var(--band) 0%, color-mix(in srgb, var(--band) 0%, transparent) 38%); }
}
.hero__credit {
  position: absolute; right: var(--s4); bottom: var(--s3); z-index: 2;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.5); font-size: var(--step--2); font-family: var(--font-util);
  letter-spacing: .06em; text-transform: uppercase;
}
.hero__facts { position: relative; background: var(--band); padding-block: clamp(var(--s5), 3vw, var(--s6)); }

/* --- Theme statement --- */
.theme-grid { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 900px) { .theme-grid { grid-template-columns: minmax(0, 1.5fr) minmax(240px, .85fr); column-gap: var(--s9); } }
.theme-mark { display: grid; gap: var(--s4); justify-items: start; }
.theme-mark .logo-plate { max-width: 340px; }
.theme-mark img { width: 100%; }
.theme-mark .rule { width: 68px; }