/* ==========================================================================
   Stile "Déco Riviera" – verde profondo, oro e avorio.
   Cornice sottile attorno allo schermo, raggiera e divisori art déco
   (ripresi dal sole di Attico 43 e dalle linee del logo), angoli vivi.
   ========================================================================== */
:root {
  --cream: #f3ecdd;
  --ornament-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 64'%3E%3Cg stroke='%23DDA836' stroke-width='1.1' fill='none'%3E%3Cline x1='115.8' y1='59.8' x2='159.4' y2='53.6'/%3E%3Cline x1='115.4' y1='57.6' x2='142.3' y2='49.9'/%3E%3Cline x1='114.6' y1='55.5' x2='154.8' y2='37.6'/%3E%3Cline x1='113.6' y1='53.5' x2='137.3' y2='38.7'/%3E%3Cline x1='112.3' y1='51.7' x2='146.0' y2='23.4'/%3E%3Cline x1='110.7' y1='50.1' x2='129.4' y2='29.3'/%3E%3Cline x1='108.9' y1='48.7' x2='133.6' y2='12.3'/%3E%3Cline x1='107.0' y1='47.6' x2='119.3' y2='22.5'/%3E%3Cline x1='104.9' y1='46.8' x2='118.5' y2='4.9'/%3E%3Cline x1='102.8' y1='46.2' x2='107.6' y2='18.7'/%3E%3Cline x1='100.6' y1='46.0' x2='102.1' y2='2.0'/%3E%3Cline x1='98.3' y1='46.1' x2='95.4' y2='18.2'/%3E%3Cline x1='96.1' y1='46.5' x2='85.5' y2='3.8'/%3E%3Cline x1='94.0' y1='47.2' x2='83.5' y2='21.2'/%3E%3Cline x1='92.0' y1='48.1' x2='70.0' y2='10.0'/%3E%3Cline x1='90.1' y1='49.4' x2='72.9' y2='27.3'/%3E%3Cline x1='88.5' y1='50.9' x2='56.8' y2='20.3'/%3E%3Cline x1='87.1' y1='52.6' x2='64.4' y2='36.1'/%3E%3Cline x1='85.9' y1='54.5' x2='47.0' y2='33.8'/%3E%3Cline x1='85.0' y1='56.5' x2='58.7' y2='47.0'/%3E%3Cline x1='84.3' y1='58.7' x2='41.3' y2='49.5'/%3E%3Cpath d='M88 62a12 12 0 0 1 24 0'/%3E%3Cline x1='20' y1='62.5' x2='180' y2='62.5'/%3E%3C/g%3E%3C/svg%3E");
  --ornament-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12'%3E%3Cg fill='%23DDA836' stroke='%23DDA836'%3E%3Cline x1='0' y1='6' x2='100' y2='6' stroke-width='1'/%3E%3Cline x1='140' y1='6' x2='240' y2='6' stroke-width='1'/%3E%3Cpath d='M120 0.5 125.5 6 120 11.5 114.5 6Z'/%3E%3Cpath d='M107 3.5 109.5 6 107 8.5 104.5 6Z' fill='none'/%3E%3Cpath d='M133 3.5 135.5 6 133 8.5 130.5 6Z' fill='none'/%3E%3C/g%3E%3C/svg%3E");

  --page-fg: var(--cream);
  --soft-fg: rgba(243, 236, 221, .85);
  --line: rgba(221, 168, 54, .3);
  --muted: rgba(243, 236, 221, .32);
  --muted-hover: rgba(243, 236, 221, .75);
  --dot: transparent;
  --alt-bg: var(--cream);
  --alt-fg: var(--green);
  --zoom-fg: var(--cream);
  --pill-bg: var(--green);
  --pill-fg: var(--cream);
  --pill-icon-bg: transparent;
  --pill-icon-fg: var(--gold);
  --field-bg: rgba(243, 236, 221, .03);
  --field-bg-focus: rgba(243, 236, 221, .07);
  --field-border: rgba(221, 168, 54, .55);
  --field-fg: var(--cream);
  --placeholder: rgba(243, 236, 221, .6);
  --button-bg: var(--gold);
  --button-fg: var(--green);
  --button-border: var(--gold);
  --button-hover: #e9bf5f;
  --watermark: var(--gold);
  --watermark-opacity: .07;
  --arrow-bg: transparent;
  --arrow-hover: rgba(221, 168, 54, .14);
  --arrow-fg: var(--gold);
  --arrow-border: rgba(221, 168, 54, .55);
  --footer-fg: var(--gold);
  --logo-on-dark: var(--cream);
}

/* grana leggera, come carta stampata */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 46; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  opacity: .045;
}

/* cornice attorno allo schermo, aperta in alto dove sta il logo */
.frame {
  display: block; position: fixed; inset: 14px; z-index: 55; pointer-events: none;
  border: 1px solid var(--line); border-top: 0;
}
.frame span { position: absolute; top: 0; width: calc(50% - 105px); border-top: 1px solid var(--line); }
.frame span:first-child { left: 0; }
.frame span:last-child { right: 0; }
.frame span::after {
  content: ""; position: absolute; top: -4px; width: 7px; height: 7px;
  background: var(--gold); transform: rotate(45deg); opacity: .7;
}
.frame span:first-child::after { right: -3px; }
.frame span:last-child::after { left: -3px; }
.js .frame { opacity: 0; transition: opacity 1.2s ease; }
.js .is-ready .frame { opacity: 1; }

.intro__logo { background-color: var(--gold); }

/* --- apertura ------------------------------------------------------------ */
.hero-title::before {
  content: ""; display: block;
  width: clamp(130px, 13vw, 190px); aspect-ratio: 200 / 64;
  margin: 0 auto clamp(18px, 3vh, 30px);
  background: var(--ornament-sun) center / contain no-repeat;
}
.hero-title::after {
  content: ""; display: block;
  width: clamp(160px, 16vw, 240px); aspect-ratio: 240 / 12;
  margin: clamp(20px, 3.4vh, 34px) auto 0;
  background: var(--ornament-divider) center / contain no-repeat;
}
.hero-title__kicker {
  font-family: var(--deco); color: var(--gold);
  font-size: clamp(13px, 1.25vw, 18px); letter-spacing: .45em; padding-left: .45em;
  margin-bottom: .9em;
}
.hero-title__main { font-size: clamp(46px, 8.4vw, 124px); }
.hero-title__sub {
  font-family: var(--deco);
  font-size: clamp(12px, 1.2vw, 17px); letter-spacing: .4em; padding-left: .4em;
  color: var(--soft-fg); margin-top: 1.2em;
}

.prose::first-letter { color: var(--gold); font-size: 1.7em; }
.scrolly__block::after {
  content: ""; display: block;
  width: 150px; aspect-ratio: 240 / 12;
  margin: clamp(22px, 3.5vh, 36px) auto 0;
  background: var(--ornament-divider) center / contain no-repeat;
}

/* --- timeline ------------------------------------------------------------ */
.tl-slide__media {
  border-radius: 0; overflow: hidden;
  outline: 1px solid rgba(221, 168, 54, .55); outline-offset: 10px;
}
.tl-slide__cat { font-family: var(--deco); font-size: clamp(11px, .95vw, 13px); letter-spacing: .32em; }
.tl-slide__period { font-family: var(--deco); font-size: clamp(12px, 1vw, 14px); letter-spacing: .24em; margin-top: .8em; }
.tl-year__dot {
  width: 10px; height: 10px; border-radius: 0;
  border: 1px solid rgba(221, 168, 54, .6); background: var(--page-bg);
  transform: rotate(45deg);
}
.tl-year.is-active .tl-year__dot { background: var(--gold); border-color: var(--gold); transform: rotate(45deg) scale(1.35); }
.timeline__years::before { border-top-style: solid; border-top-width: 1px; top: 51px; }

/* --- ocean service ------------------------------------------------------- */
.services__content .services__word--top {
  display: flex; align-items: center; justify-content: center; gap: .35em;
}
.services__content .services__word--top::before,
.services__content .services__word--top::after {
  content: ""; width: 1.2em; border-top: 1px solid var(--gold);
}
.services__content .services__intro { color: rgba(13, 35, 30, .8); }
.service-pill {
  border-radius: 0; box-shadow: none;
  border: 1px solid rgba(221, 168, 54, .55);
}
.service-pill:hover { box-shadow: none; background: var(--green-2); }
.service-pill__icon { border-right: 1px solid rgba(221, 168, 54, .4); }
.service-pill__label { font-size: 15px; letter-spacing: .16em; }

/* --- our venues ------------------------------------------------------------ */
.venues__title { color: var(--green); }
.venues__title::after {
  content: ""; display: block;
  width: 180px; aspect-ratio: 240 / 12;
  margin: 22px auto 0;
  background: var(--ornament-divider) center / contain no-repeat;
}

/* --- contatti -------------------------------------------------------------- */
.contact__title { text-shadow: none; }
.contact__title::after {
  content: ""; display: block;
  width: 150px; aspect-ratio: 240 / 12;
  margin: 18px auto 0;
  background: var(--ornament-divider) center / contain no-repeat;
}
.field input, .field textarea { border-radius: 0; }
.button { border-radius: 0; }
.button:hover { color: var(--green); }
.checkbox__box { border-radius: 0; }

/* --- footer ---------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); }

@media (max-width: 767px) {
  .frame { inset: 8px; }
  .frame span { width: calc(50% - 80px); }
  .service-pill { border-radius: 0; }
}