/* ==========================================================================
   Stile "Editoriale" – impaginazione da rivista.
   Foto a tutto schermo dietro i testi (con lento avvicinamento), titoli enormi
   allineati a sinistra, capolettera, citazione su carta, numeri e filetti.
   ========================================================================== */
:root {
  --paper: #efe8dc;
  --alt-bg: var(--paper);
  --alt-fg: var(--green);
  --zoom-fg: var(--paper);
  --venues-bg: var(--paper);
  --pill-bg: transparent;
  --pill-fg: var(--green);
  --pill-icon-bg: transparent;
  --pill-icon-fg: var(--green);
}

/* --- foto dietro i testi -------------------------------------------------- */
.scrolly__step { position: relative; }
.scrolly__bg {
  display: block;
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.scrolly__bg img { width: 100%; height: 100%; object-fit: cover; }
.scrolly__bg::after { content: ""; position: absolute; inset: 0; }
.scrolly__step--title .scrolly__bg::after {
  background: linear-gradient(to top, rgba(13, 35, 30, .95) 0%, rgba(13, 35, 30, .55) 45%, rgba(13, 35, 30, .3) 100%);
}
.scrolly--hero .scrolly__step:not(.scrolly__step--title) .scrolly__bg img { filter: blur(1.5px) saturate(.9); }
.scrolly--hero .scrolly__step:not(.scrolly__step--title) .scrolly__bg::after {
  background: linear-gradient(90deg, rgba(13, 35, 30, .96) 0%, rgba(13, 35, 30, .86) 48%, rgba(13, 35, 30, .42) 100%);
}

/* --- apertura: copertina ---------------------------------------------------- */
.motion .scrolly--hero .scrolly__step--title,
.scrolly--hero .scrolly__step--title {
  justify-content: flex-start; align-items: flex-end;
  text-align: left;
  padding: var(--header-h) 6vw 10vh;
}
.motion .scrolly--hero .scrolly__step > * { max-width: none; }
.hero-title { position: relative; z-index: 1; }
.hero-title__kicker {
  font-family: var(--deco); color: var(--gold);
  font-size: clamp(12px, 1.1vw, 15px); letter-spacing: .38em;
  display: flex; align-items: center; gap: 18px;
}
.hero-title__kicker::before { content: ""; width: 56px; border-top: 1px solid var(--gold); }
.hero-title__main {
  font-size: clamp(54px, 10.6vw, 170px); line-height: .9;
  letter-spacing: 0; margin: .2em 0 .22em;
}
.hero-title__sub { font-size: clamp(20px, 2.3vw, 34px); color: var(--sand); letter-spacing: .05em; }

/* --- testi: colonna a sinistra con numero e capolettera --------------------- */
.scrolly--hero .scrolly__step:not(.scrolly__step--title) { justify-content: flex-start; text-align: left; }
.motion .scrolly--hero .scrolly__step:not(.scrolly__step--title) { padding-left: 8vw; padding-right: 8vw; }
.scrolly--hero .scrolly__block { max-width: 660px; }
.scrolly__num {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 26px;
  font-family: var(--deco); font-size: 13px; letter-spacing: .3em; color: var(--gold);
}
.scrolly__num::before { content: ""; width: 40px; border-top: 1px solid var(--gold); }
.scrolly--hero .prose { font-size: clamp(18px, min(1.75vw, 3.2vh), 27px); line-height: 1.6; }
.scrolly--hero .prose::first-letter {
  float: left; font-size: 3.7em; line-height: .78;
  margin: .07em .12em 0 0; color: var(--gold);
}

/* --- testo dopo la timeline: citazione su carta ----------------------------- */
.scrolly--statement { background: var(--paper); color: var(--green); }
.scrolly--statement .scrolly__block { max-width: 920px; text-align: left; }
.scrolly--statement .scrolly__block::before {
  content: "“"; display: block; height: .5em;
  font-family: Georgia, "Times New Roman", serif; font-size: clamp(120px, 12vw, 190px); line-height: .9;
  color: var(--gold); margin-bottom: .08em;
}
.scrolly--statement .prose { font-size: clamp(20px, min(2.35vw, 3.9vh), 36px); line-height: 1.42; }
.scrolly--statement .prose::first-letter { font-size: 1em; }

/* --- timeline: foto grande e anno gigante ----------------------------------- */
.timeline__track { width: min(1180px, 86vw); aspect-ratio: 1180 / 430; }
.tl-slide { grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 4.5vw, 72px); }
.tl-slide.is-prev, .tl-slide.is-next { opacity: .12; }
.tl-slide__media { border-radius: 0; }
.tl-slide__body { position: relative; z-index: 0; }
.tl-slide__year {
  display: block; position: absolute; z-index: -1;
  top: -.72em; left: -.06em;
  font-size: clamp(110px, 12.5vw, 196px); line-height: 1; letter-spacing: 0;
  color: transparent; -webkit-text-stroke: 1px rgba(221, 168, 54, .42);
  pointer-events: none;
}
.tl-slide__cat { font-family: var(--deco); font-size: clamp(11px, .9vw, 13px); letter-spacing: .32em; }
.tl-slide__name { font-size: clamp(34px, 4.1vw, 62px); }

/* --- ocean service: elenco numerato ---------------------------------------- */
.services__content .services__intro { color: rgba(13, 35, 30, .78); }
.services__list {
  display: grid; grid-template-columns: 1fr; gap: 0;
  width: min(560px, 100%);
  counter-reset: service;
}
.service-pill {
  width: auto; height: auto;
  padding: 15px 4px;
  border-radius: 0; box-shadow: none;
  border-bottom: 1px solid rgba(13, 35, 30, .2);
  counter-increment: service;
}
.service-pill:first-child { border-top: 1px solid rgba(13, 35, 30, .2); }
.service-pill::before {
  content: counter(service, decimal-leading-zero);
  width: 48px; text-align: left;
  font-family: var(--deco); font-size: 13px; letter-spacing: .2em; color: #a8781e;
}
.service-pill:hover { transform: translateX(6px); box-shadow: none; }
.service-pill__icon { order: 3; width: auto; height: auto; }
.service-pill__label { text-align: left; font-size: 18px; letter-spacing: .14em; padding: 0 12px 0 0; }

/* --- our venues --------------------------------------------------------------- */
.venues__title { color: var(--green); }

/* --- contatti: titolo grande a sinistra, modulo a destra ---------------------- */
@media (min-width: 900px) {
  .contact__inner {
    max-width: 1100px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: center;
    text-align: left;
  }
  .contact__title {
    font-family: var(--serif); font-size: clamp(56px, 6.4vw, 100px);
    letter-spacing: 0; line-height: .95; text-shadow: none; margin: 0;
  }
  .contact__title::after {
    content: ""; display: block; width: 72px; margin-top: 28px;
    border-top: 1px solid var(--gold);
  }
}

@media (max-width: 767px) {
  .motion .scrolly--hero .scrolly__step--title { padding: var(--header-h) var(--gutter) 9vh; }
  .motion .scrolly--hero .scrolly__step:not(.scrolly__step--title) { padding-left: var(--gutter); padding-right: var(--gutter); }
  .scrolly--hero .scrolly__step:not(.scrolly__step--title) .scrolly__bg::after { background: rgba(13, 35, 30, .84); }
  .tl-slide { grid-template-columns: 1fr; }
  .tl-slide__year { display: none; }
  .service-pill { width: 100%; }
}