:root {
  --bg: #050812;
  --gold: #d4c08a;
  --cream: #f3ead6;
  --muted: #b7b1a3;
  --display: "Cinzel", Palatino, serif;
  --serif: "Cormorant Garamond", Palatino, Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--serif);
}

a { color: inherit; text-decoration: none; }

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: var(--bg);
  padding: 0.6rem 1rem;
  z-index: 20;
}

.skip:focus { left: 1rem; top: 1rem; }

.hub-header {
  position: absolute;
  z-index: 5;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 5vw;
}

.hub-header .brand {
  font-family: var(--display);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--gold);
}

.hub-header span {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.banners {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.banner {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4.5rem 1.4rem 3.2rem;
  overflow: hidden;
  min-height: 50vh;
}

.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 8, 18, 0.35) 0%, rgba(5, 8, 18, 0.55) 100%),
    var(--banner-image) center / cover no-repeat;
  transition: transform 0.8s ease;
}

.banner:hover::before { transform: scale(1.04); }

.banner.figlie {
  --banner-image: url("../images/primaimmagine.jpg");
}

.banner.farfalla {
  --banner-image: url("../images/farfalla/copertina.webp");
}

.banner.farfalla::before {
  background:
    linear-gradient(180deg, rgba(8, 18, 22, 0.45) 0%, rgba(8, 18, 22, 0.7) 100%),
    var(--banner-image) center 30% / cover no-repeat;
}

.banner-inner {
  position: relative;
  z-index: 1;
  max-width: 44rem;
}

.kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}

.banner h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 3.4rem);
  letter-spacing: 0.08em;
  line-height: 1.1;
  margin: 0 0 0.8rem;
}

.banner h1 span {
  display: block;
  font-size: 0.45em;
  letter-spacing: 0.38em;
  margin: 0.25em 0;
  font-weight: 400;
}

.lede {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-style: italic;
  color: var(--cream);
  margin: 0 0 1.6rem;
  opacity: 0.92;
}

.cta {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.9rem 1.4rem;
  border: 1px solid var(--gold);
  color: var(--gold);
}

.banner:hover .cta,
.cta:hover {
  background: var(--gold);
  color: var(--bg);
}

.hub-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0.8rem 5vw;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}

@media (max-width: 760px) {
  .banners { grid-template-rows: 1fr 1fr; }
  .banner { min-height: 50vh; padding: 5.5rem 1.1rem 2.4rem; }
  .hub-header span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .banner::before { transition: none; }
  .banner:hover::before { transform: none; }
}