/* Landing «lido»: stabilimento balneare del Sud, saline rosa, pranzo lungo.
   Un solo elemento forte: il tendalino a strisce col bordo smerlato. Il resto sta zitto. */

:root {
  --sale: #f3f5f4;          /* fondo: il bianco delle saline, non crema */
  --fenicottero: #e77f97;   /* strisce del tendalino */
  --fenicottero-ink: #b8435f; /* lo stesso rosa, leggibile come testo */
  --adriatico: #123a5a;     /* testo e cartello */
  --ocra: #e9a93a;          /* numeri degli articoli, sole */
  --salicornia: #2f6b5c;    /* link */
  --carta: #ffffff;

  --display: "Shrikhand", "Georgia", serif;
  --text: "Bricolage Grotesque", system-ui, sans-serif;

  --measure: 34rem;
  --gutter: clamp(16px, 5vw, 32px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.lido {
  margin: 0;
  background: var(--sale);
  color: var(--adriatico);
  font: 400 1.0625rem/1.6 var(--text);
  font-optical-sizing: auto;
}
.lido a { color: var(--salicornia); text-underline-offset: .18em; }
.lido a:focus-visible, .lido summary:focus-visible, .lido .button:focus-visible {
  outline: 3px solid var(--ocra);
  outline-offset: 3px;
  border-radius: 4px;
}
:where(.lido) :is(h1, h2, h3) { margin: 0; }
:where(.lido) p { margin: 0; }

/* ---------------------------------------------------------------- tendalino */
.awning {
  height: clamp(84px, 16vw, 140px);
  background: repeating-linear-gradient(90deg, var(--fenicottero) 0 44px, var(--carta) 44px 88px);
  /* smerlo: un semicerchio per ogni striscia */
  --r: 22px;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--r)) no-repeat,
    radial-gradient(circle var(--r) at 50% 0, #000 98%, transparent) bottom / calc(2 * var(--r)) var(--r) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--r)) no-repeat,
    radial-gradient(circle var(--r) at 50% 0, #000 98%, transparent) bottom / calc(2 * var(--r)) var(--r) repeat-x;
  filter: drop-shadow(0 6px 0 rgba(18, 58, 90, .08));
  transform-origin: top;
  animation: unroll .9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes unroll {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* ---------------------------------------------------------------- titolo */
.hero {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) var(--gutter) clamp(40px, 8vw, 72px);
  text-align: center;
}
.kicker { font-size: 1.05rem; font-weight: 600; color: var(--fenicottero-ink); }
.names {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.1rem, 13vw, 6.4rem);
  line-height: .95;
  letter-spacing: -.01em;
  margin: .2em 0 .25em;
  text-wrap: balance;
}
.when { display: flex; flex-direction: column; gap: 2px; font-size: 1.2rem; font-weight: 600; }
.when .where { font-weight: 400; }
.lede { max-width: var(--measure); margin: 22px auto 0; font-size: 1.15rem; text-wrap: pretty; }
.countdown {
  display: inline-block;
  margin-top: 26px;
  padding: 10px 18px;
  background: var(--carta);
  border: 2px solid var(--adriatico);
  border-radius: 999px;
  font-size: .98rem;
}
.countdown strong { font-weight: 800; }

/* ---------------------------------------------------------------- sezioni */
main > section {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(36px, 7vw, 60px) var(--gutter);
}
main > section > h2, .board h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 2.6rem);
  line-height: 1.05;
  margin-bottom: 22px;
}

/* la giornata: è davvero una sequenza, gli orari fanno da indice */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 2px dashed rgba(18, 58, 90, .18);
}
.timeline li:first-child { border-top: 0; padding-top: 0; }
.hour {
  font-family: var(--display);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--fenicottero-ink);
  font-variant-numeric: tabular-nums;
}
.timeline h3 { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.timeline .place { margin-top: 2px; }
.timeline .note { margin-top: 6px; color: rgba(18, 58, 90, .82); }
.fineprint { margin-top: 18px; font-size: .95rem; font-style: italic; }

/* dopo il pranzo: una fascia di sole */
main > .after {
  background: var(--ocra);
  border-radius: 28px;
  max-width: min(46rem, calc(100% - 2 * var(--gutter)));
  padding: clamp(28px, 6vw, 44px) clamp(22px, 5vw, 48px);
  margin: 8px auto;
}
main > .after > h2 { margin-bottom: 10px; }
.after p { font-size: 1.15rem; max-width: var(--measure); }

/* regolamento del lido: il cartello smaltato all'ingresso */
main > .rules { max-width: calc(40rem + 2 * var(--gutter)); }
.board {
  position: relative;
  background: var(--adriatico);
  color: var(--carta);
  border-radius: 18px;
  padding: clamp(28px, 6vw, 48px) clamp(22px, 5vw, 44px);
  box-shadow: inset 0 0 0 6px var(--adriatico), inset 0 0 0 8px rgba(255, 255, 255, .55);
}
/* le quattro viti del cartello */
.board::before {
  content: "";
  position: absolute;
  inset: 16px;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 0, #cfd8df 3px, transparent 4px) top left / 8px 8px no-repeat,
    radial-gradient(circle at 100% 0, #cfd8df 3px, transparent 4px) top right / 8px 8px no-repeat,
    radial-gradient(circle at 0 100%, #cfd8df 3px, transparent 4px) bottom left / 8px 8px no-repeat,
    radial-gradient(circle at 100% 100%, #cfd8df 3px, transparent 4px) bottom right / 8px 8px no-repeat;
}
.board h2 { margin-bottom: 4px; }
.board-sub { opacity: .8; margin-bottom: 22px; }
.board ol { list-style: none; margin: 0; padding: 0; }
.board li {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.board .art { font-weight: 800; color: var(--ocra); padding-top: 1px; }
.board h3 { font-size: 1.12rem; font-weight: 800; line-height: 1.25; }
.board li p { margin-top: 4px; opacity: .88; }
.board-sign { margin-top: 18px; text-align: right; font-family: var(--display); font-size: 1.35rem; color: var(--fenicottero); }

/* domande */
.faq details { border-top: 2px solid var(--adriatico); }
.faq details:last-of-type { border-bottom: 2px solid var(--adriatico); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 40px 16px 0;
  position: relative;
  font-weight: 800;
  font-size: 1.12rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--display);
  font-size: 1.7rem;
  color: var(--fenicottero-ink);
  transition: rotate .2s;
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 0 18px; }

/* dove */
.place-card .venue { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; margin-bottom: 6px; }
.lido .button {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--adriatico);
  color: var(--carta);
  text-decoration: none;
  font-weight: 600;
}
.lido .button:hover { background: var(--salicornia); }

/* invito personale: un biglietto d'ingresso con le tacche */
main > .ticket {
  background: var(--carta);
  border: 2px solid var(--adriatico);
  border-radius: 16px;
  max-width: min(36rem, calc(100% - 2 * var(--gutter)));
  padding: clamp(24px, 5vw, 36px);
  margin: 24px auto 0;
  position: relative;
  -webkit-mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
main > .ticket > h2 { font-size: clamp(1.6rem, 6vw, 2rem); margin-bottom: 10px; }

.foot { text-align: center; padding: 56px var(--gutter) 64px; }
.foot p:first-child { font-family: var(--display); font-size: 1.6rem; }
.foot-sub { margin-top: 6px; font-size: .95rem; opacity: .8; }

@media (min-width: 720px) {
  .timeline li { grid-template-columns: 6.5rem 1fr; }
  .hour { font-size: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .awning { animation: none; }
  .faq summary::after { transition: none; }
}