/* Base: reset, tipografia, primitive condivise (bande, divisori, chip, bottoni, icone). */

  *{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  body{
    margin:0; color:var(--ink);
    font-family:'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight:400; line-height:1.65; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    /* Il gradiente caldo della hero parte dal bordo superiore della pagina, così passa
       anche dietro alla navbar flottante. Più in basso lo copre la prima banda opaca. */
    background:
      /* alone del sole: concentrato quel tanto che basta perché il disco resti leggibile */
      radial-gradient(58% 52% at 83% 14%,
        rgba(var(--sun-rgb),.46) 0%, rgba(var(--sun-rgb),.24) 34%,
        rgba(var(--sun-rgb),.09) 58%, rgba(var(--sun-rgb),0) 80%),
      /* diffusione del calore su tutta la fascia, crema a sinistra -> giallo tenue a destra */
      linear-gradient(102deg,
        var(--dawn-1) 0%, var(--dawn-2) 34%, var(--dawn-3) 64%, var(--dawn-4) 88%, var(--dawn-5) 100%),
      var(--page);
    background-repeat:no-repeat;
    background-size:100% 1400px, 100% 1400px, auto;
  }
  img{ max-width:100%; display:block; }
  a{ color:var(--accent-press); text-decoration-thickness:1px; text-underline-offset:3px; }
  h1,h2,h3{ font-family:'Young Serif', Georgia, 'Hoefler Text', serif; font-weight:400; letter-spacing:-.015em; }
  h2{ font-size:clamp(1.8rem,4.4vw,2.7rem); line-height:1.1; margin:0 0 .5rem; text-wrap:balance; }
  h3{ font-size:1.25rem; line-height:1.2; margin:0 0 .35rem; }
  p{ margin:0 0 1rem; }
  :focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:4px; }

  .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem); }
  .prose{ max-width:64ch; }
  .lead-in{ color:var(--ink-soft); font-size:1.08rem; max-width:60ch; }

  /* ============ Bande + divisori a collina ============ */
  .band{ position:relative; padding-block:clamp(3.2rem,8vw,6rem); }
  .band--cream{ background:var(--band-cream); }
  .band--sand{ background:var(--band-sand); }
  .band--sun{ background:var(--band-sun); }
  .band--paper{ background:var(--band-paper); }
  /* banda suite: sfumatura dal bianco carta alla sabbia (lo "sfondo sfumato" già
     previsto dal design doc §4). La banda più lunga della pagina smette di essere
     un lenzuolo uniforme: in alto resta la parete di galleria per le foto, verso
     il fondo si scalda e consegna alla collina sul fondo page. */
  .band--fade{ background:linear-gradient(180deg, var(--band-paper), var(--band-sand)); }
  .band--deep{ background:var(--band-deep); color:var(--on-deep-body); }
  .band--deep h2,.band--deep h3{ color:var(--on-deep); }
  .band--deep .lead-in{ color:var(--on-deep-soft); }
  .band--deep a{ color:var(--sun); }
  /* sul giallo pieno il grigio-verde tenue scende a 3,6:1 — i testi secondari
     passano al bruno scuro (5,6:1) per restare leggibili */
  .band--sun{ color:var(--ink); }
  .band--sun .lead-in,.band--sun .pillar p,.band--sun .step p{ color:var(--chip-ink); }

  /* Il divisore vive in fondo alla banda che lo precede:
     il suo background è il colore della banda sopra, il fill del path
     è il colore della banda sotto. Così i due blocchi si incastrano. */
  .sep{ display:block; line-height:0; }
  .sep svg{ display:block; width:100%; height:clamp(46px,6.5vw,92px); }
  /* Seam di subpixel sulle giunzioni (stessa cura della pagina root, dove il
     problema si vedeva su mobile): la riga chiara che spezzava le bande scure
     era il fondo pagina che filtrava fra sezione e sep per l'arrotondamento
     a device-pixel. Sopra: il sep sale di 1px sulla sezione precedente e il
     suo sfondo (che è sempre il colore di quella banda) copre la riga.
     Sotto: l'svg entra di 1px nella sezione successiva, che ha lo stesso
     colore della cresta. ATTENZIONE a non usare position:relative qui: un
     sep POSIZIONATO passa sopra le foto che sconfinano (paint order dei
     posizionati = ordine DOM) e inghiotte le creste — successo e corretto
     l'8/08: il fondo del sep deve restare nello strato statico. */
  .sep{ margin-top:-1px; }
  .sep svg{ margin-bottom:-1px; }

  /* ============ Etichetta di sezione: chip giallo, stesso stile dei tag delle suite ============ */
  .chip-label{
    display:inline-block; background:var(--sun); color:var(--chip-ink);
    font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    padding:.3rem .8rem; border-radius:999px; margin:0 0 .9rem;
  }
  /* sulla banda gialla il chip giallo sparirebbe: diventa crema */
  .band--sun .chip-label{ background:var(--card); color:var(--chip-ink); }

  /* ============ Bottoni ============ */
  .btn{
    --btn-bg:var(--accent); --btn-fg:var(--accent-ink);
    appearance:none; border:0; cursor:pointer; font:inherit; font-weight:700; font-size:1rem;
    background:var(--btn-bg); color:var(--btn-fg);
    padding:.85rem 1.5rem; border-radius:8px; line-height:1.1;
    display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
    box-shadow:var(--shadow-sm); transition:background-color .25s var(--ease), transform .25s var(--ease);
  }
  .btn:hover{ background:var(--accent-press); transform:translateY(-2px); }
  .btn--ghost{ --btn-bg:transparent; --btn-fg:var(--accent-press); border:1.6px solid var(--line); box-shadow:none; }
  .btn--ghost:hover{ --btn-bg:color-mix(in srgb, var(--accent) 8%, transparent); border-color:var(--accent); }
  /* su banda scura il pieno si inverte: crema con testo verde scuro.
     `color` va ridichiarato: .band--deep a (link giallo sole) batte .btn per
     specificità e renderebbe il testo del pulsante giallo su crema, 1,4:1. */
  .band--deep .btn{ --btn-bg:var(--card); --btn-fg:var(--ink); color:var(--btn-fg); }
  /* in hover si inverte: fondo verde d'azione e testo bianco. Vanno dichiarati
     background e color, non solo le variabili: .btn:hover imposta background
     direttamente e altrimenti resterebbe verde scuro su verde scuro (1,1:1). */
  .band--deep .btn:hover{ --btn-bg:var(--accent-press); --btn-fg:var(--accent-ink);
    background:var(--btn-bg); color:var(--btn-fg); }
  .band--deep .btn--ghost{ --btn-bg:transparent; --btn-fg:var(--on-deep); border-color:color-mix(in srgb, var(--on-deep) 50%, transparent); }
  .band--deep .btn--ghost:hover{ --btn-bg:color-mix(in srgb, var(--on-deep) 12%, transparent); border-color:var(--on-deep); }

  .icon{ width:1.15em; height:1.15em; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }