/* ============================================================================
   SEZIONI DEL SITO
   ----------------------------------------------------------------------------
   Questo foglio viene dal prototipo statico in pages/, quello che il cliente ha
   gia' visto e approvato. Le regole sono state raccolte dagli style in linea
   delle quattro pagine e deduplicate: la struttura approvata resta quella, cambia
   solo dove vive.

   Le pagine WordPress usano le stesse classi, cosi' il disegno e' lo stesso e i
   testi definitivi entrano senza rifare l'impaginato.
   ============================================================================ */



/* ---------- da pages/home.html ---------- */


/* ---------- Page-specific ---------- */
  body { overflow-x: hidden; }

/* HERO */
  .hero {
    position: relative;
    height: 880px;
    margin-top: -82px; /* under nav */
    overflow: hidden;
    color: oklch(0.96 0.008 80);
  }

.hero-img {
    position: absolute; inset: 0;
    background: url("../assets/photos/02-seaside.jpg") center 35% / cover no-repeat;
    transform: scale(1.04);
  }

.hero-veil {
    position: absolute; inset: 0;
    /* E' un blocco Gutenberg dopo un altro blocco: il layout "flow" gli mette
       un margine sopra (24px) e il velo partiva sotto il bordo del hero,
       lasciando una striscia di foto nuda, celeste, sotto la barra. */
    margin: 0;
    background:
      /* Blu notte #143450 al posto del nero: nel mockup di Lorenzo il hero e'
         blu, non scuro. La foto resta, cambia il velo. */
      linear-gradient(180deg, rgba(24,44,56,0.45) 0%, rgba(24,44,56,0.10) 35%, rgba(24,44,56,0.75) 100%),
      linear-gradient(90deg, rgba(24,44,56,0.35) 0%, rgba(24,44,56,0) 50%);
  }

.hero-inner {
    position: relative;
    height: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 64px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 92px;
  }

.hero-eyebrow {
    font-family: var(--font-mono);
    font-size: clamp(14px, 1.25vw, 18px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: oklch(0.944 0.027 234);   /* bianco azzurrato, come l'occhiello del mockup del 10 settembre */
    opacity: 1;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 16px;
  }

.hero-eyebrow::before {
    content: ""; display: inline-block;
    width: 38px; height: 1px; background: currentColor; opacity: 0.7;
  }

.hero h1 {
    /* Apertura hero ridotta di circa un decimo, richiesta del 3 ottobre. */
    font-size: clamp(56px, 6.75vw, 106px);
    line-height: 0.96;
    letter-spacing: -0.02em;
    margin: 0 0 36px;
    max-width: 1100px;
    font-weight: 400;
  }

.hero h1:has(+ .hero-description) { margin-bottom: 24px; }

.hero .hero-description {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 400;
    max-width: 1100px;
    margin: 0 0 36px;
  }

.hero h1 em,
.hero h1 .up-word,
.hero .hero-description .up-word {
    color: var(--sand);   /* l'oro della parola in evidenza ("MAPS"), come nel mockup */
  }

.hero-meta {
    display: flex;
    gap: 64px;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 1100px;
  }

.hero-sub {
    font-size: 17px;
    line-height: 1.55;
    max-width: 460px;
    opacity: 0.92;
    font-weight: 300;
  }

.hero-ctas { display: flex; gap: 14px; }

.hero .wp-block-button.lp-waitlist-compact .wp-block-button__link {
    padding: 12px 18px;
    min-height: 44px;
    background: var(--ink);
    color: var(--bg);
    font: 13px var(--font-body);
    letter-spacing: normal;
    text-transform: none;
    border: 0;
    border-radius: 28px;
}
.hero .wp-block-button.lp-waitlist-compact .wp-block-button__link:hover { background: var(--deep); }

.hero .btn-primary {
    /* Nel mockup il bottone pieno e' blu notte con testo bianco, non crema. */
    background: var(--ink);
    color: oklch(0.975 0.005 106);
  }

.hero .btn-primary:hover { background: var(--deep); color: oklch(0.975 0.005 106); }

.hero .btn-ghost {
    border-color: oklch(0.96 0.008 80);
    color: oklch(0.96 0.008 80);
  }

.hero .btn-ghost:hover { background: oklch(0.96 0.008 80); color: oklch(0.16 0.014 80); }

.hero-corner {
    position: absolute;
    bottom: 32px;
    right: 64px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
    text-align: right;
    line-height: 1.6;
  }

/* MARQUEE */
  .marquee {
    background: var(--ink);
    color: var(--bg);
    padding: 22px 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

.marquee-track {
    display: flex;
    width: max-content;
    gap: 0;
    align-items: center;
    white-space: nowrap;
    animation: marq 43.47826s linear infinite; /* 7 ottobre: velocità +15%, durata 50 / 1.15 */
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.01em;
  }

.marquee-group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 56px;
    padding-right: 56px;
    min-width: 100vw;
    flex: 0 0 auto;
    box-sizing: border-box;
}
.marquee-track .marquee-item { opacity: 0.85; display: inline-flex; align-items: center; gap: 56px; flex-shrink: 0; }

.marquee-track .marquee-item::after {
    content: "✦";
    font-family: serif;
    opacity: 0.5;
    font-size: 14px;
  }

@keyframes marq {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

/* INTRO MANIFESTO */
  .intro { padding: 140px 0 120px; }

.intro-grid {
    max-width: 1280px; margin: 0 auto; padding: 0 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: start;
  }

.intro-statement {
    font-family: var(--font-display);
    font-size: clamp(40px, 4vw, 58px);
    line-height: 1.04;
    letter-spacing: -0.012em;
    font-weight: 400;
    margin: 0;
    color: var(--ink);
  }

.intro-statement em { color: var(--deep); }

.intro-body {
    padding-top: 14px;
    columns: 2; column-gap: 36px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-2);
  }

.intro-body p { margin: 0 0 18px; break-inside: avoid; }

.intro-body p:first-child::first-letter {
    font-family: var(--font-display);
    font-size: 4em;
    float: left;
    line-height: 0.86;
    margin: 0.06em 0.1em 0 0;
    color: var(--deep);
  }

.intro-sign {
    font-family: var(--font-display);
    font-size: 22px;
    margin-top: 28px;
    color: var(--ink);
  }

.intro-sign small {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 6px;
  }

/* DIVIDER STRIP, three photo trio under intro */
  .trio {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 64px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 20px;
    margin-bottom: 140px;
  }

.trio figure { margin: 0; }

.trio .pho {
    aspect-ratio: 4/5;
    background-size: cover; background-position: center;
    border-radius: 2px;
  }

.trio .pho-short { aspect-ratio: 4/3; }

.trio figcaption {
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: flex; justify-content: space-between;
  }

/* FEATURED ITINERARY */
  .featured {
    background: var(--paper);
    padding: 120px 0 130px;
    position: relative;
  }

.featured-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 64px;
  }

.featured-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 64px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 32px;
  }

.featured-head h2 {
    font-size: clamp(46px, 4.6vw, 72px);
    line-height: 1;
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.012em;
  }

.featured-head h2 em { color: var(--deep); }

.featured-head .right {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-2);
    line-height: 2.2;
  }

.itin-card {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 56px;
    align-items: start;
  }

.itin-photo {
    aspect-ratio: 4/5;
    background: url("../assets/photos/10-big-table.jpg") center / cover no-repeat;
    border-radius: 2px;
    position: relative;
  }

.itin-photo .tag {
    position: absolute;
    bottom: 24px; left: 24px;
    background: var(--bg);
    color: var(--ink);
    padding: 10px 16px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-radius: 2px;
  }

.itin-body { padding-top: 8px; }

.itin-no {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 18px;
  }

.itin-title {
    font-family: var(--font-display);
    font-size: 64px;
    line-height: 0.98;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
    font-weight: 400;
  }

.itin-title em { color: var(--deep); }

.itin-sub {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--ink-2);
    margin: 0 0 30px;
    line-height: 1.3;
  }

.itin-desc {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-2);
    margin: 0 0 32px;
    max-width: 460px;
  }

.itin-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 0;
    margin: 0 0 40px;
    padding: 22px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

.itin-meta dt, .itin-meta .lp-meta-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
    grid-column: 1;
  }

.itin-meta dd, .itin-meta .lp-meta-value {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    grid-column: 2;
    text-align: right;
  }

.itin-meta dd em { color: var(--deep); }

/* I riquadri mantengono il loro stile, il testo dentro e' un paragrafo
   Gutenberg: modificabile anche nei gruppi con templateLock contentOnly. */
.lp-editable-text > p.lp-inline-copy {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: inherit;
    margin: 0;
    padding: 0;
    max-width: none;
}
.itin-meta .lp-meta-label { margin: 0; }

.itin-days {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 32px 0 40px;
    border-top: 1px solid var(--rule);
  }

.itin-days .day {
    min-width: 0;
    margin: 0;
    padding: 14px 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-right: 1px solid var(--rule);
    color: var(--ink-3);
  }

.itin-days .day:last-child { border-right: 0; }
.itin-days .day:first-child { padding-left: 0; }

.itin-days .day strong {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    font-weight: 400;
    margin-top: 6px;
  }

/* Il grassetto dentro un titolo non crea un'altra riga con margine. */
.itin-days .day strong strong {
    display: inline;
    font: inherit;
    margin: 0;
  }

/* WANDER / STORY */
  .story { padding: 140px 0 80px; }

.story-grid {
    max-width: 1280px; margin: 0 auto; padding: 0 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }

.story-photo {
    aspect-ratio: 3/4;
    background: url("../assets/photos/23-detail.jpg") center / cover no-repeat;
    border-radius: 2px;
  }

.story h2 {
    font-size: clamp(40px, 4vw, 60px);
    line-height: 1.02;
    margin: 0 0 28px;
    font-weight: 400;
    letter-spacing: -0.012em;
  }

.story h2 em { color: var(--deep); }

.story p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-2);
    margin: 0 0 18px;
    max-width: 520px;
  }

.story .quote {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.35;
    color: var(--ink);
    margin: 36px 0 24px;
    padding-left: 22px;
    border-left: 2px solid var(--deep);
    max-width: 480px;
  }

.story .quote .quote-attribution {
    display: block;
    font-size: 0.68em;
    line-height: 1.45;
    margin-top: 24px;
  }

/* FRAGMENTS, irregular gallery */
  .frags {
    padding: 80px 0 140px;
  }

.frags-head {
    max-width: 1280px; margin: 0 auto 56px; padding: 0 64px;
    display: flex; justify-content: space-between; align-items: flex-end;
  }

.frags-head h3 {
    font-size: 38px;
    margin: 0;
    font-weight: 400;
  }

.frags-grid {
    max-width: 1440px; margin: 0 auto; padding: 0 64px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 70px;
    gap: 20px;
  }

.frag {
    background-size: cover; background-position: center;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
  }

.frag-label {
    position: absolute;
    bottom: 14px; left: 14px;
    background: var(--bg);
    color: var(--ink);
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

.f1 { grid-column: 1 / span 5; grid-row: 1 / span 6; background-image: url("../assets/photos/03-lemons.jpg"); }

.f2 { grid-column: 6 / span 4; grid-row: 1 / span 4; background-image: url("../assets/photos/05-finferli.jpg"); }

.f3 { grid-column: 10 / span 3; grid-row: 1 / span 5; background-image: url("../assets/photos/04-donkey-boy.jpg"); }

.f4 { grid-column: 6 / span 3; grid-row: 5 / span 5; background-image: url("../assets/photos/07-coppersmiths.jpg"); }

.f5 { grid-column: 9 / span 4; grid-row: 6 / span 4; background-image: url("../assets/photos/08-porchetta.jpg"); }

.f6 { grid-column: 1 / span 4; grid-row: 7 / span 4; background-image: url("../assets/photos/17-detail.jpg"); }

.f7 { grid-column: 5 / span 4; grid-row: 10 / span 3; background-image: url("../assets/photos/19-detail.jpg"); }

.f8 { grid-column: 9 / span 4; grid-row: 10 / span 3; background-image: url("../assets/photos/22-detail.jpg"); }

.f9 { grid-column: 1 / span 4; grid-row: 11 / span 2; background-image: url("../assets/photos/12-portrait.jpg"); }

/* PROCESS */
  .process { background: var(--ink); color: var(--bg); padding: 140px 0; }

.process-inner { max-width: 1280px; margin: 0 auto; padding: 0 64px; }

.process h3 {
    font-size: clamp(40px, 4vw, 60px);
    margin: 0 0 80px;
    font-weight: 400;
    letter-spacing: -0.01em;
    max-width: 800px;
    line-height: 1.02;
  }

.process h3 em { color: var(--brass); }

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }

.step { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 28px; }
/* WordPress mette un margine (blockGap) fra gruppi fratelli: il secondo e il
   terzo step partivano 24px piu' in basso del primo. Nel prototipo sono pari. */
.steps > .step { margin-top: 0; }

.step-no {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--brass);
    margin-bottom: 36px;
  }

.step h4 {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 400;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
  }

.step h4 em { color: var(--brass); }

.step p {
    font-size: 14.5px;
    line-height: 1.65;
    opacity: 0.78;
    margin: 0;
  }

/* SAILING TEASER */
  .sail {
    position: relative;
    height: 620px;
    overflow: hidden;
    margin: 0;
    color: oklch(0.96 0.008 80);
  }

.sail-img {
    position: absolute; inset: 0;
    background: url("../assets/photos/21-detail.jpg") center 40% / cover no-repeat;
  }

.sail-veil {
    position: absolute; inset: 0;
    margin: 0;   /* stesso margine Gutenberg del velo del hero, stessa striscia */
    background: linear-gradient(90deg, rgba(8,18,32,0.7) 0%, rgba(8,18,32,0.2) 100%);
  }

.sail-inner {
    position: relative;
    max-width: 1280px; margin: 0 auto;
    padding: 100px 64px;
    height: 100%;
    display: flex; flex-direction: column; justify-content: center;
  }

.sail .eyebrow { color: var(--brass); opacity: 1; margin-bottom: 24px; }

.sail h3 {
    font-size: clamp(50px, 5.5vw, 90px);
    margin: 0 0 24px;
    line-height: 0.98;
    font-weight: 400;
    letter-spacing: -0.014em;
    max-width: 900px;
  }

.sail h3 em { color: oklch(0.86 0.04 75); }

.sail p {
    font-family: var(--font-display);
    font-size: 22px;
    max-width: 560px;
    line-height: 1.4;
    margin: 0 0 36px;
    opacity: 0.92;
  }

.sail-cta {
    display: inline-flex; align-items: center; gap: 14px;
    border: 1px solid currentColor;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    align-self: flex-start;
    transition: background .25s, color .25s;
  }

.sail-cta:hover { background: oklch(0.96 0.008 80); color: oklch(0.14 0.01 80); }


/* ---------- da pages/about.html ---------- */


/* HERO */
  .about-hero {
    padding: 96px 0 80px;
    border-bottom: 1px solid var(--rule);
  }

.about-hero-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 64px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
    align-items: end;
  }

.about-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(72px, 7.8vw, 124px);
    line-height: 0.95;
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.02em;
  }

.about-hero h1 em { color: var(--deep); }

.about-hero .meta {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-2);
    line-height: 2;
  }

/* PORTRAIT BLOCK */
  .portrait-block {
    max-width: 1440px; margin: 80px auto; padding: 0 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

.portrait-img {
    aspect-ratio: 4/5;
    background: url("../assets/photos/17-detail.jpg") center / cover no-repeat;
  }

.portrait-text {
    background: var(--paper);
    padding: 72px 72px 72px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

.portrait-text .eyebrow { margin-bottom: 22px; }

.portrait-text h2 {
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1.05;
    margin: 0 0 28px;
    font-weight: 400;
    letter-spacing: -0.012em;
  }

.portrait-text h2 em { color: var(--deep); }

.portrait-text p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-2);
    margin: 0 0 18px;
  }

/* LONGFORM */
  .longform {
    max-width: 760px; margin: 100px auto; padding: 0 32px;
  }

.longform h3 {
    font-family: var(--font-display);
    font-size: 32px;
    margin: 64px 0 22px;
    font-weight: 400;
    color: var(--deep);
  }

.longform p {
    font-size: 17.5px;
    line-height: 1.75;
    color: var(--ink);
    margin: 0 0 22px;
  }

.longform > p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-size: 4.6em;
    float: left;
    line-height: 0.86;
    margin: 0.05em 0.1em 0 0;
    color: var(--deep);
  }

.longform blockquote {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1.4;
    margin: 48px 0;
    padding: 0 0 0 28px;
    border-left: 2px solid var(--deep);
    color: var(--ink);
  }

.longform figure {
    margin: 56px -120px;
  }

.longform figure img,
  .longform figure .ph {
    width: 100%;
    aspect-ratio: 4/3;
    background-size: cover; background-position: center;
    border-radius: 2px;
  }

.longform figcaption {
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: flex; justify-content: space-between;
  }

/* VALUES */
  .values {
    background: var(--paper);
    padding: 130px 0;
  }

.values-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 64px;
  }

.values h3 {
    font-size: clamp(46px, 4.6vw, 72px);
    margin: 0 0 80px;
    font-weight: 400;
    letter-spacing: -0.012em;
    max-width: 800px;
  }

.values h3 em { color: var(--deep); }

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }

.value {
    border-top: 1px solid var(--rule);
    padding-top: 28px;
  }

.value-no {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--deep);
    margin-bottom: 36px;
  }

.value h4 {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 400;
    margin: 0 0 14px;
    letter-spacing: -0.008em;
    line-height: 1.08;
  }

.value h4 em { color: var(--deep); }

.value p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0;
  }

/* CTA */
  .about-cta {
    padding: 140px 0;
    text-align: center;
    max-width: 900px; margin: 0 auto; padding: 140px 64px;
  }

.about-cta h3 {
    font-size: clamp(56px, 5.8vw, 96px);
    line-height: 0.98;
    margin: 0 0 32px;
    font-weight: 400;
    letter-spacing: -0.014em;
  }

.about-cta h3 em { color: var(--deep); }

.about-cta p {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--ink-2);
    line-height: 1.4;
    margin: 0 0 40px;
  }


/* ---------- da pages/itinerary.html ---------- */


/* ITINERARY HEADER */
  .itin-hero {
    padding: 60px 0 80px;
    border-bottom: 1px solid var(--rule);
  }

.itin-hero-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 64px;
  }

.crumbs {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 50px;
    display: flex; gap: 14px; align-items: center;
  }

.crumbs a { color: var(--ink-2); }

.crumbs .sep { opacity: 0.4; }

.crumbs > .lp-inline-copy { display: flex; gap: inherit; align-items: center; flex-wrap: wrap; }

.itin-headline {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 56px;
  }

.itin-headline h1 {
    font-family: var(--font-display);
    font-size: clamp(70px, 7.4vw, 116px);
    line-height: 0.95;
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.02em;
  }

.itin-headline h1 em { color: var(--deep); }

.itin-no-big {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 22px;
  }

.itin-dek {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.3;
    color: var(--ink-2);
    padding-bottom: 14px;
  }

.itin-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--rule);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

.strip-cell {
    background: var(--bg);
    padding: 24px 22px;
  }

/* Le celle sono blocchi fratelli: annulla lo spazio verticale automatico WP. */
.itin-strip > .strip-cell { margin: 0; }

.strip-cell dt, .strip-cell .strip-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 12px;
  }

.strip-cell dd, .strip-cell .strip-value {
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.1;
  }

.strip-cell dd em { color: var(--deep); }

.strip-cell dd small, .strip-cell .strip-detail {
    display: block;
    margin: 4px 0 0;
    font-size: 12px;
    font-family: var(--font-body);
    color: var(--ink-3);
  }

.strip-cell .strip-detail { line-height: 1.1; }

/* COVER IMAGE */
  .itin-cover {
    margin: 80px 0;
    max-width: 1440px; margin-left: auto; margin-right: auto;
    padding: 0 64px;
  }

.itin-cover-img {
    height: 620px;
    background: url("../assets/photos/02-seaside.jpg") center 30% / cover no-repeat;
    border-radius: 2px;
    position: relative;
  }

.itin-cover-cap {
    margin-top: 14px;
    display: flex; justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

/* OVERVIEW */
  .overview {
    max-width: 1280px; margin: 0 auto 110px; padding: 0 64px;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 80px;
  }

.overview-side {
    position: sticky; top: 100px;
    height: fit-content;
  }

.overview-side h2 {
    font-size: 48px;
    line-height: 1.02;
    margin: 0 0 16px;
    font-weight: 400;
    letter-spacing: -0.012em;
  }

.overview-side h2 em { color: var(--deep); }

.overview-side p {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.45;
    color: var(--ink-2);
    margin: 0;
  }

.overview-body p {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--ink-2);
    margin: 0 0 22px;
    max-width: 620px;
  }

.overview-body > p:first-child::first-letter {
    font-family: var(--font-display);
    font-size: 4.4em;
    float: left;
    line-height: 0.86;
    margin: 0.05em 0.1em 0 0;
    color: var(--deep);
    font-weight: 400;
  }

.overview-pull {
    margin: 28px 0;
    padding: 20px 0 20px 24px;
    border-left: 2px solid var(--deep);
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.4;
    color: var(--ink);
  }

/* DAYS */
  .days {
    background: var(--paper);
    padding: 130px 0;
  }

.days-head {
    max-width: 1280px; margin: 0 auto 80px; padding: 0 64px;
    display: flex; justify-content: space-between; align-items: flex-end;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 36px;
  }

.days-head h3 {
    font-size: clamp(46px, 4.6vw, 72px);
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.012em;
  }

.days-head h3 em { color: var(--deep); }

.day-card {
    max-width: 1280px; margin: 0 auto 100px; padding: 0 64px;
    display: grid;
    grid-template-columns: 100px 1fr 1.2fr;
    gap: 56px;
    align-items: start;
  }

.day-card:last-child { margin-bottom: 0; }

.day-num {
    font-family: var(--font-display);
    font-size: 86px;
    line-height: 0.9;
    color: var(--deep);
    font-weight: 400;
  }

.day-num small {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 6px;
  }

.day-text h4 {
    font-family: var(--font-display);
    font-size: 42px;
    line-height: 1.02;
    margin: 0 0 18px;
    font-weight: 400;
    letter-spacing: -0.01em;
  }

.day-text h4 em { color: var(--deep); }

.day-text p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-2);
    margin: 0 0 16px;
  }

.day-tags {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 22px;
  }

.tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg);
    border: 1px solid var(--rule);
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

/* Paragrafi Gutenberg distinti: si modifica ogni etichetta senza codice. */
.day-tags p.tag {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 9.5px;
    line-height: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Lo spazio dell'ultima foto ospita ora un titolo editabile. */
.day-hero .day-hero-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(36px, 4.5vw, 64px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--deep);
    overflow-wrap: anywhere;
}

.day-photo {
    aspect-ratio: 5/6;
    background-size: cover; background-position: center;
    border-radius: 2px;
  }

/* HOSTS */
  .hosts {
    padding: 130px 0;
  }

.hosts-head {
    max-width: 1280px; margin: 0 auto 64px; padding: 0 64px;
    display: flex; justify-content: space-between; align-items: flex-end;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 36px;
  }

.hosts-head h3 {
    font-size: clamp(46px, 4.6vw, 72px); margin: 0; font-weight: 400; letter-spacing: -0.012em;
  }

.hosts-head h3 em { color: var(--deep); }

.hosts-grid {
    max-width: 1280px; margin: 0 auto; padding: 0 64px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

.host {
    border-top: 1px solid var(--rule);
    padding-top: 22px;
  }

.host .ph {
    aspect-ratio: 4/5;
    background-size: cover; background-position: center;
    border-radius: 2px;
    margin-bottom: 22px;
  }

.host h5 {
    font-family: var(--font-display);
    font-size: 26px;
    margin: 0 0 4px;
    font-weight: 400;
  }

.host h5 em { color: var(--deep); }

.host .role {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 14px;
  }

.host p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0;
  }

/* INCLUDED */
  .incl-wrap {
    background: var(--ink);
    color: var(--bg);
    padding: 130px 0;
  }

.incl-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }

.incl-inner h3 {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--brass);
    margin: 0 0 28px;
  }

.incl-list { list-style: none; margin: 0; padding: 0; }

.incl-list li {
    border-top: 1px solid rgba(255,255,255,0.16);
    padding: 18px 0;
    font-family: var(--font-display);
    font-size: 20px;
    display: flex; gap: 14px;
    line-height: 1.4;
  }

.incl-list li::before {
    content: "+";
    color: var(--brass);
    font-family: var(--font-mono);
    font-size: 16px;
    flex: 0 0 18px;
  }

.incl-list.out li::before { content: "−"; color: rgba(255,255,255,0.45); }

/* PRICE / CTA */
  .booking {
    padding: 130px 0;
    background: var(--paper);
  }

.booking-inner {
    max-width: 1100px; margin: 0 auto; padding: 0 64px;
    text-align: center;
  }

.booking h3 {
    font-size: clamp(54px, 5.6vw, 90px);
    margin: 0 0 28px;
    line-height: 0.98;
    font-weight: 400;
    letter-spacing: -0.014em;
  }

.booking h3 em { color: var(--deep); }

.booking p {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--ink-2);
    margin: 0 auto 48px;
    max-width: 600px;
    line-height: 1.4;
  }

.booking-bar {
    display: inline-flex;
    align-items: center;
    gap: 48px;
    background: var(--bg);
    border-radius: 999px;
    padding: 14px 14px 14px 32px;
    border: 1px solid var(--rule);
  }

.booking-bar .price {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 1;
  }

.booking-bar .price small {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 4px;
  }

.booking-bar .deposit {
    font-size: 13px;
    color: var(--ink-2);
  }

.booking-bar .deposit strong { color: var(--ink); font-weight: 500; }

.booking-bar .btn {
    margin-left: 8px;
  }

.powered {
    margin-top: 28px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
  }


/* ---------- da pages/inquiry.html ---------- */


.inq-hero {
    padding: 80px 0 60px;
    border-bottom: 1px solid var(--rule);
  }

.inq-hero-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 64px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
    align-items: end;
  }

.inq-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(64px, 6.8vw, 104px);
    line-height: 0.96;
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.018em;
  }

.inq-hero h1 em { color: var(--deep); }

.inq-hero .dek {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.4;
    color: var(--ink-2);
  }

.form-shell {
    max-width: 1280px; margin: 80px auto 140px; padding: 0 64px;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 80px;
    align-items: start;
  }

/* SIDEBAR */
  .side {
    position: sticky; top: 100px;
    background: var(--paper);
    padding: 40px;
    border-radius: 2px;
  }

.side .eyebrow { margin-bottom: 22px; }

.side h3 {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 1.1;
    margin: 0 0 28px;
    font-weight: 400;
    letter-spacing: -0.008em;
  }

.side h3 em { color: var(--deep); }

.side-steps { margin: 0; padding: 0; list-style: none; }

.side-steps li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--rule);
  }

.side-steps li:last-child { padding-bottom: 0; }

.side-steps .nm {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--deep);
    letter-spacing: 0.18em;
  }

.side-steps h5 {
    font-family: var(--font-display);
    font-size: 18px;
    margin: 0 0 6px;
    font-weight: 400;
  }

.side-steps h5 em { color: var(--deep); }

.side-steps p {
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0;
  }

.side-tip {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.5;
  }

.side-tip strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
    font-weight: 500;
  }

/* FORM */
  form .sect {
    margin-bottom: 64px;
    padding-bottom: 64px;
    border-bottom: 1px solid var(--rule);
  }

form .sect:last-of-type { border-bottom: 0; }

form .sect-no {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--deep);
    margin-bottom: 18px;
  }

form .sect h3 {
    font-family: var(--font-display);
    font-size: 42px;
    line-height: 1.04;
    margin: 0 0 32px;
    font-weight: 400;
    letter-spacing: -0.01em;
  }

form .sect h3 em { color: var(--deep); }

.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 28px;
  }

.row.one { grid-template-columns: 1fr; }

.row.three { grid-template-columns: 1fr 1fr 1fr; }

label.field {
    display: block;
    position: relative;
  }

label.field .lbl {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 10px;
  }

label.field .lbl em { color: var(--deep); }

label.field input[type="text"],
  label.field input[type="email"],
  label.field input[type="tel"],
  label.field input[type="number"],
  label.field input[type="date"],
  label.field select,
  label.field textarea {
    width: 100%;
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ink-2);
    padding: 10px 0 12px;
    outline: none;
    transition: border-color .2s;
    font-weight: 400;
  }

label.field input::placeholder,
  label.field textarea::placeholder {
    color: var(--ink-3);
  }

label.field input:focus,
  label.field textarea:focus,
  label.field select:focus {
    border-color: var(--deep);
  }

label.field textarea {
    resize: none;
    min-height: 150px;
    line-height: 1.45;
    border-bottom: 1px solid var(--ink-2);
  }

label.field select {
    appearance: none;
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.4'/></svg>") right 0 center / 12px no-repeat;
    padding-right: 24px;
  }

.help {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ink-3);
  }

/* RADIO / CHIP */
  .chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 8px;
  }

.chip {
    display: inline-flex; align-items: center;
    padding: 10px 16px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
    color: var(--ink-2);
    background: transparent;
  }

.chip:hover { border-color: var(--ink-2); color: var(--ink); }

.chip input { display: none; }

.chip.on,
  .chip:has(input:checked) {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }

/* SLIDER */
  .group-size {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 12px;
  }

.gs-btn {
    aspect-ratio: 1;
    border: 1px solid var(--rule);
    background: transparent;
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--ink-2);
    border-radius: 2px;
    transition: all .2s;
  }

.gs-btn:hover { border-color: var(--ink-2); color: var(--ink); }

.gs-btn.on { background: var(--deep); color: var(--bg); border-color: var(--deep); }

.gs-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    text-decoration: line-through;
  }

/* SUBMIT BAR */
  .submit-bar {
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }

.submit-note {
    font-size: 13px;
    color: var(--ink-2);
    max-width: 360px;
    line-height: 1.55;
  }

.submit-bar .btn-primary { padding: 18px 32px; font-size: 14px; }

/* date range visual */
  .date-range {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: end;
  }

.date-range .sep {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--ink-3);
    padding-bottom: 12px;
  }

/* ============================================================================
   ADATTAMENTO PER WORDPRESS
   ----------------------------------------------------------------------------
   Nel prototipo le fotografie erano sfondi CSS con un percorso fisso dentro il
   foglio di stile. Va benissimo per un mockup e non va bene per un sito: il
   cliente non puo' sostituire una foto scritta dentro il CSS.

   Qui ogni contenitore che prima era uno sfondo accetta un'immagine vera. Il
   disegno non cambia di un pixel, cambia chi puo' toccarla.
   ============================================================================ */

.hero-img, .itin-photo, .story-photo, .frag, .sail-img, .pho, .day-photo, .host-photo, .portrait-img {
  background-image: none;
  overflow: hidden;
}

/* La specificita' conta: .entry-content figure img (0,1,2) batteva .hero-img img
   (0,1,1), e il max-height generico di 68vh tagliava le foto delle sezioni a
   meta'. Lo stesso prefisso rimette le due regole sullo stesso piano, e l'ordine
   fa il resto. */
.entry-content .hero-img figure, .entry-content .itin-photo figure,
.entry-content .story-photo figure, .entry-content .frag figure,
.entry-content .sail-img figure, .entry-content .pho figure,
.entry-content .day-photo figure, .entry-content .host-photo figure,
.entry-content .portrait-img figure {
  margin: 0;
  width: 100%;
  height: 100%;
}

.entry-content .hero-img img, .entry-content .itin-photo img,
.entry-content .story-photo img, .entry-content .frag img,
.entry-content .sail-img img, .entry-content .pho img,
.entry-content .day-photo img, .entry-content .host-photo img,
.entry-content .portrait-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  max-height: none;
}

/* I gruppi di Gutenberg portano una classe in piu': le nostre regole di
   impaginazione stanno sulla classe nostra, quindi il wrapper deve sparire. */
.wp-block-group.hero, .wp-block-group.intro, .wp-block-group.featured,
.wp-block-group.story, .wp-block-group.frags, .wp-block-group.process,
.wp-block-group.sail, .wp-block-group.trio, .wp-block-group.marquee {
  margin: 0;
}

/* Le sezioni a tutta pagina devono uscire dal contenitore del contenuto.
   Attenzione al livello: il contenuto e' avvolto in .pagina-bloccata (il gruppo
   con templateLock), quindi le sezioni NON sono figlie dirette di .entry-content.
   Un selettore > .hero appeso a .entry-content non matcha niente. */
.pagina-bloccata > .hero,
.pagina-bloccata > .marquee,
.pagina-bloccata > .sail,
.pagina-bloccata > .frags,
.pagina-bloccata > .trio,
.pagina-bloccata > .itin-hero,
.pagina-bloccata > .strip,
.pagina-bloccata > .process,
.pagina-bloccata > .featured,
.pagina-bloccata > .story,
.pagina-bloccata > .days,
.pagina-bloccata > .hosts {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* L'involucro bloccato non deve aggiungere nessun vincolo suo. */
.pagina-bloccata { max-width: none; margin: 0; padding: 0; }

/* Le sezioni che restano nel testo tengono la colonna leggibile. */
.pagina-bloccata > .about-hero,
.pagina-bloccata > .pagina-testata,
.pagina-bloccata > .values,
.pagina-bloccata > .about-cta,
.pagina-bloccata > .overview,
.pagina-bloccata > .incl-wrap,
.pagina-bloccata > .blocco-coming-soon,
.pagina-bloccata > .itin-card,
.pagina-bloccata > h2,
.pagina-bloccata > p,
.pagina-bloccata > figure {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 64px;
  padding-right: 64px;
}
@media (max-width: 767px) {
  .pagina-bloccata > .about-hero,
  .pagina-bloccata > .pagina-testata,
  .pagina-bloccata > .values,
  .pagina-bloccata > .about-cta,
  .pagina-bloccata > .overview,
  .pagina-bloccata > .incl-wrap,
  .pagina-bloccata > .blocco-coming-soon,
  .pagina-bloccata > .itin-card,
  .pagina-bloccata > h2,
  .pagina-bloccata > p,
  .pagina-bloccata > figure { padding-left: 24px; padding-right: 24px; }
}

/* Dentro le sezioni portate dal prototipo il testo non va ristretto a 68ch:
   quella regola serve ai paragrafi liberi, non alle colonne gia' impaginate. */
.hero p, .intro p, .featured p, .story p, .frags p, .process p, .sail p,
.itin-card p, .step p, .values p, .about-cta p { max-width: none; }

/* ============================================================================
   SEGNAPOSTO CHE NON DISTRUGGONO L'IMPAGINATO
   ----------------------------------------------------------------------------
   Un segnaposto deve essere impossibile da scambiare per testo definitivo, ma
   non deve appiattire il disegno: se dove c'e' un titolo di sessanta pixel
   metto una scatoletta monospaziata di dodici, la pagina perde la sua forma e
   il cliente non riconosce piu' il sito che ha approvato.

   Quindi: il segnaposto tiene la tipografia del suo slot, e si dichiara con il
   bordo tratteggiato e un occhiello sopra.
   ============================================================================ */

.entry-content .segnaposto-titolo,
.entry-content .segnaposto-lead {
  font-family: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: color-mix(in oklch, var(--sand) 8%, transparent);
  border: 1px dashed color-mix(in oklch, currentColor 35%, transparent);
  border-radius: 3px;
  padding: 16px 20px;
  max-width: none;
}

.entry-content .segnaposto-titolo::before,
.entry-content .segnaposto-lead::before {
  content: "DA LORENZO";
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1;
  opacity: 0.55;
  margin-bottom: 12px;
}

/* Nell'apertura e nelle sezioni scure il segnaposto vive su una fotografia:
   serve un fondo che lo stacchi, altrimenti non si legge. */
.hero .segnaposto, .hero .segnaposto-titolo, .hero .segnaposto-lead,
.itin-hero .segnaposto, .itin-hero .segnaposto-titolo, .itin-hero .segnaposto-lead,
.sail .segnaposto, .sail .segnaposto-titolo, .sail .segnaposto-lead {
  background: color-mix(in oklch, oklch(0.14 0.01 80) 55%, transparent);
  border-color: color-mix(in oklch, white 40%, transparent);
  color: oklch(0.96 0.008 80);
  backdrop-filter: blur(3px);
}

/* Il titolo dell'apertura deve avere il corpo dell'apertura, non quello di un h1
   qualunque: e' la prima cosa che si guarda. */
.hero .segnaposto-titolo { font-size: clamp(40px, 5.4vw, 82px); line-height: 1.04; }
.itin-hero .segnaposto-titolo { font-size: clamp(36px, 4.6vw, 68px); line-height: 1.05; }
.intro .segnaposto-titolo { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.12; }

/* Il nastro scorrevole: le voci sono didascalie che mancano, ma il nastro deve
   esistere lo stesso, altrimenti sparisce una fascia del disegno. */
.marquee .segnaposto {
  display: inline-block;
  margin: 0 28px 0 0;
  padding: 6px 14px;
  background: transparent;
  border: 1px dashed color-mix(in oklch, currentColor 30%, transparent);
}


/* La posizione del ritaglio contava: il prototipo diceva "center 35%", non
   "center". Ritagliando a meta' l'apertura mostrava la foschia invece delle
   scogliere. object-position replica esattamente quello che faceva
   background-position. */
.entry-content .hero-img img { object-position: center 35%; }
.entry-content .itin-photo img { object-position: center; }
.entry-content .story-photo img { object-position: center; }
.entry-content .sail-img img { object-position: center 40%; }
.entry-content .portrait-img img { object-position: center; }
.entry-content .itin-cover-img img { object-position: center 30%; }

/* I contenitori e le misure dei pulsanti sono gestiti dal foglio comune actions.css. */
.entry-content .wp-block-button__link { white-space: nowrap; }

/* I colori. Il foglio di WordPress (global styles) arriva dopo il tema e
   vince a parita' di specificita': i bottoni Gutenberg restavano grigio
   #32373C ovunque, anche nel hero. Due classi battono una. Come nel mockup
   di Lorenzo: pieno blu notte, contorno sottile; sul blu del hero il
   contorno e il testo sono bianchi. */
.entry-content .wp-block-button__link {
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
}
.entry-content .wp-block-button__link:hover { background: var(--deep); border-color: var(--deep); transform: translateY(-1px); }
.entry-content .is-style-outline .wp-block-button__link {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.entry-content .is-style-outline .wp-block-button__link:hover { background: var(--ink); color: var(--bg); }
.entry-content .hero-ctas .wp-block-button__link { color: oklch(0.975 0.005 106); }
.entry-content .hero-ctas .is-style-outline .wp-block-button__link {
  color: oklch(0.975 0.005 106); border-color: oklch(0.975 0.005 106);
}
.entry-content .hero-ctas .is-style-outline .wp-block-button__link:hover {
  background: oklch(0.975 0.005 106); color: var(--ink);
}

/* ============================================================================
   MODULO RICHIESTE
   Il disegno viene dal prototipo; qui i campi sono veri e hanno un nome.
   ============================================================================ */
.inq-grid {
  display: grid; grid-template-columns: 1fr 340px; gap: 80px;
  max-width: 1280px; margin: 0 auto; padding: 96px 64px 120px;
}
.inq-main h1 { font-size: clamp(44px, 5.2vw, 78px); line-height: 1.03; margin: 12px 0 24px; }
.inq-sub { font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 52ch; margin: 0 0 56px; }

.inq-form .sect { border-top: 1px solid var(--rule); padding: 40px 0 8px; }
.inq-form .step {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px;
}
.inq-form .sect h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; margin: 0 0 32px; }

.inq-form .field { display: block; margin: 0 0 26px; }
.inq-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.inq-form .lbl {
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px;
}
.inq-form .req { color: var(--brass); }
.inq-form input[type=text], .inq-form input[type=email], .inq-form input[type=tel],
.inq-form select, .inq-form textarea {
  width: 100%; font-family: var(--font-body); font-size: 17px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink-2);
  padding: 10px 0 12px; outline: none; border-radius: 0;
}
.inq-form textarea { border: 1px solid var(--rule); padding: 14px; border-radius: 3px; resize: vertical; }
.inq-form input:focus, .inq-form select:focus, .inq-form textarea:focus { border-color: var(--deep); }
.inq-form small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.inq-form fieldset { border: 0; padding: 0; margin: 0 0 26px; }

.inq-form .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.inq-form .chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.inq-form .chip span {
  display: inline-block; padding: 10px 18px; border: 1px solid var(--rule);
  border-radius: 999px; font-size: 14px; cursor: pointer; transition: all .15s;
}
.inq-form .chip input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.inq-form .chip input:focus-visible + span { outline: 2px solid var(--deep); outline-offset: 2px; }

/* La trappola per i robot: fuori dallo schermo, non display:none, che alcuni
   riempitori automatici sanno riconoscere. */
.lp-esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.inq-esito { padding: 28px 32px; border-radius: 4px; margin: 0 0 40px; }
.inq-esito h3 { margin: 0 0 8px; font-size: 28px; }
.inq-esito p { margin: 0; }
.inq-ok { background: color-mix(in oklch, var(--sage) 22%, transparent); border: 1px solid var(--sage); }
.inq-ko { background: color-mix(in oklch, var(--brass) 16%, transparent); border: 1px solid var(--brass); }

.side { border-left: 1px solid var(--rule); padding-left: 40px; }
.side h3 { font-size: 28px; line-height: 1.15; margin: 0 0 28px; }
.side-steps { list-style: none; counter-reset: passo; padding: 0; margin: 0; }
.side-steps li { counter-increment: passo; margin: 0 0 28px; }
.side-steps h5 { margin: 0 0 6px; font-size: 19px; font-family: var(--font-display); font-weight: 400; }
.side-steps h5::before {
  content: counter(passo, decimal-leading-zero); display: block;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  color: var(--ink-3); margin-bottom: 6px;
}
.side-steps p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.6; }

@media (max-width: 900px) {
  .inq-grid { grid-template-columns: 1fr; gap: 48px; padding: 64px 24px 80px; }
  .inq-form .field-row { grid-template-columns: 1fr; }
  .side { border-left: 0; border-top: 1px solid var(--rule); padding: 32px 0 0; }
}

/* ============================================================================
   CALENDARIO DELL'INTERVALLO DI DATE
   ----------------------------------------------------------------------------
   Stessi token del resto del sito: Newsreader per il nome del mese, JetBrains
   Mono per le iniziali dei giorni, il blu del marchio per la selezione.
   ============================================================================ */

.lp-cal {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 60;
  min-width: 620px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 18px 50px -12px rgba(8, 18, 32, 0.28);
  padding: 22px 24px 18px;
}
.lp-cal[hidden] { display: none; }

.lp-cal-testata {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 18px;
}
.lp-cal-istruzione {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2);
}
.lp-cal-nav {
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--rule); background: transparent;
  color: var(--ink); font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.lp-cal-nav:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.lp-cal-mesi { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }

.lp-cal-titolo {
  font-family: var(--font-display);
  font-size: 21px; line-height: 1; margin: 0 0 14px; text-align: center;
}

.lp-cal-griglia {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}

.lp-cal-dow {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.12em;
  color: var(--ink-3); text-align: center; padding: 0 0 8px;
}

.lp-cal-vuota { aspect-ratio: 1; }

.lp-cal-g {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: 3px;
  font-family: var(--font-body); font-size: 13px; color: var(--ink);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.lp-cal-g:hover:not(:disabled) { background: var(--paper); }
.lp-cal-g:focus-visible { outline: 2px solid var(--deep); outline-offset: -2px; }

/* Un giorno passato non si sceglie, e si vede che non si sceglie. */
.lp-cal-g.e-passato,
.lp-cal-g:disabled { color: var(--ink-3); opacity: 0.35; cursor: default; }

.lp-cal-g.e-dentro { background: color-mix(in oklch, var(--deep) 12%, transparent); border-radius: 0; }
.lp-cal-g.e-inizio,
.lp-cal-g.e-fine { background: var(--deep); color: var(--paper); font-weight: 500; }
.lp-cal-g.e-inizio { border-radius: 3px 0 0 3px; }
.lp-cal-g.e-fine   { border-radius: 0 3px 3px 0; }
.lp-cal-g.e-inizio.e-fine { border-radius: 3px; }

.lp-cal-pie {
  display: flex; justify-content: space-between; align-items: center;
  margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule);
}
.lp-cal-pulisci, .lp-cal-chiudi {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.lp-cal-pulisci { color: var(--ink-3); }
.lp-cal-pulisci:hover { color: var(--ink); }
.lp-cal-chiudi {
  color: var(--bg); background: var(--ink);
  padding: 10px 20px; border-radius: 999px;
}
.lp-cal-chiudi:hover { background: var(--deep); }

/* I campi diventano evidentemente cliccabili. */
.inq-form input[name="da"], .inq-form input[name="a"] { cursor: pointer; }

@media (max-width: 767px) {
  .lp-cal { min-width: 0; width: 100%; padding: 18px 16px 14px; }
  .lp-cal-mesi { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================================
   BANNER COOKIE E POP-UP NEWSLETTER
   ============================================================================ */

/* Un valore che Lorenzo non ha ancora confermato si vede che non e' confermato. */
.da-confermare {
  background: color-mix(in oklch, var(--brass) 18%, transparent);
  border-bottom: 1px dashed var(--brass);
  padding: 1px 4px;
  border-radius: 2px;
}

.lp-cookie {
  position: fixed; left: 24px; bottom: 24px; z-index: 90;
  max-width: 420px; padding: 24px 26px;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 18px 46px -14px rgba(8,18,32,0.3);
}
.lp-cookie-testo { margin: 0 0 12px; font-size: 14px; line-height: 1.6; }
.lp-cookie-link { margin: 0 0 18px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; }
.lp-cookie-link a { color: var(--ink-2); margin-right: 16px; border-bottom: 1px solid var(--rule); }
.lp-cookie-link a:hover { color: var(--ink); }
.lp-cookie-scelte { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-cookie-scelte .btn { font-size: 11px; padding: 11px 18px; }

.lp-news { position: fixed; inset: 0; z-index: 100;
  background: color-mix(in oklch, oklch(0.14 0.01 80) 55%, transparent);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(3px); }
.lp-news[hidden] { display: none; }
.lp-news-scatola { position: relative; background: var(--bg); border-radius: 4px;
  max-width: 500px; width: 100%; padding: 48px 46px 40px; }
.lp-news-chiudi { position: absolute; top: 14px; right: 18px; border: 0;
  background: transparent; font-size: 26px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.lp-news-chiudi:hover { color: var(--ink); }
.lp-news-scatola h3 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; margin: 10px 0 14px; }
.lp-news-testo { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0 0 28px; }
.lp-news-campo { display: block; margin: 0 0 18px; }
.lp-news-campo input { width: 100%; font-family: var(--font-body); font-size: 17px;
  background: transparent; border: 0; border-bottom: 1px solid var(--ink-2);
  padding: 10px 0 12px; outline: none; color: var(--ink); }
.lp-news-campo input:focus { border-color: var(--deep); }
.lp-news-consenso { display: flex; gap: 11px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 24px; cursor: pointer; }
.lp-news-consenso input { margin-top: 3px; accent-color: var(--deep); flex: 0 0 auto; }
.lp-news-consenso a { border-bottom: 1px solid var(--rule); }
.lp-news-esito { margin: 14px 0 0; font-size: 13px; min-height: 1.2em; }
.lp-news-esito.e-ok { color: var(--olive); }
.lp-news-esito.e-errore { color: var(--brass); }

@media (max-width: 767px) {
  .lp-cookie { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 20px; }
  .lp-news-scatola { padding: 40px 24px 32px; }
}

/* ---------- Pagine legali ---------- */
.legale { max-width: 780px; margin: 0 auto; padding: 88px 64px 110px; }
.legale h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.12; margin: 52px 0 16px; }
.legale h3 { font-size: 20px; margin: 32px 0 10px; font-family: var(--font-display); font-weight: 400; }
.legale p, .legale li { font-size: 15.5px; line-height: 1.72; color: var(--ink-2); max-width: none; }
.legale p strong { color: var(--ink); }
.legale ul { margin: 0 0 18px 20px; }
.legale a { border-bottom: 1px solid var(--rule); }
.legale-data { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 14px; }
.legale-avviso { background: color-mix(in oklch, var(--brass) 14%, transparent);
  border-left: 3px solid var(--brass); padding: 18px 22px; margin: 36px 0 0;
  font-size: 14px; line-height: 1.6; }
.legale-tabella { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14px; }
.legale-tabella th { text-align: left; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid var(--rule); padding: 0 14px 10px 0; }
.legale-tabella td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule);
  vertical-align: top; color: var(--ink-2); }
.legale-foro { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-3); }
.lp-privacy-policy .pagina-testata h1 { font-size: clamp(40px, 6vw, 72px); }
.lp-privacy-policy :is(p, li, a) { overflow-wrap: anywhere; }
.lp-privacy-policy .lp-privacy-table { max-width: 100%; overflow-x: auto; }
.lp-privacy-policy .lp-privacy-table table { width: 100%; min-width: 560px; border-collapse: collapse; }
.lp-privacy-policy .lp-privacy-table :is(th, td) { overflow-wrap: anywhere; }
.lp-cookie-policy .lp-privacy-table table { min-width: 760px; }
@media (max-width: 767px) { .legale { padding: 56px 24px 72px; } }
@media (max-width: 767px) {
  .wrap-pagina > article > .entry-content.lp-privacy-policy { padding: 56px 24px 72px; }
}

.foot-legale { max-width: 1280px; margin: 40px auto 0; padding-top: 22px;
  border-top: 1px solid var(--rule); display: flex; gap: 24px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; }
.foot-legale a { color: var(--ink-3); }
.foot-legale a:hover { color: var(--ink); }

/* ============================================================================
   LA PALETTE ALTERNATIVA
   ----------------------------------------------------------------------------
   Petrolio #123C45 con crema #E8DFCC e salvia #A4ABA1, dal set del 13 agosto.
   Ridefinisce solo i token: nessuna regola di impaginazione sa che esiste, e
   il giorno che una delle due vince si cancella l'altra e basta.
   ============================================================================ */

:root[data-palette="petrolio"] {
  --bg:       oklch(0.945 0.018 92);    /* #E8DFCC, la crema del set petrolio */
  --paper:    oklch(0.912 0.024 92);
  --ink:      oklch(0.20 0.024 200);
  --ink-2:    oklch(0.44 0.022 200);
  --ink-3:    oklch(0.62 0.016 100);
  --rule:     oklch(0.83 0.018 95);
  --deep:     oklch(0.318 0.048 213);   /* #123C45, il petrolio del marchio */
  --deep-ink: oklch(0.24 0.038 213);
  --olive:    oklch(0.46 0.052 140);
  --sage:     oklch(0.702 0.020 140);   /* #A4ABA1 */
  --sand:     oklch(0.68 0.052 82);
  --brass:    oklch(0.60 0.072 78);
}

/* ---------- Il pannello. Esiste solo sull'anteprima. ---------- */
.lp-palette {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 120; display: flex; align-items: center;
  font-family: var(--font-body);
}
.lp-palette-linguetta {
  order: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--ink); color: var(--bg);
  border: 0; cursor: pointer;
  padding: 18px 10px; border-radius: 4px 0 0 4px;
  box-shadow: -4px 0 18px -6px rgba(8,18,32,0.3);
}
.lp-palette-etichetta {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.lp-palette-pallini { display: flex; flex-direction: column; gap: 3px; }
.lp-palette-pallini i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.lp-palette-pallini i:first-child { background: #1C5084; }
.lp-palette-pallini i:last-child  { background: #123C45; }

.lp-palette-pannello {
  order: 0;
  width: 290px; padding: 24px 24px 18px;
  background: var(--bg); border: 1px solid var(--rule); border-right: 0;
  border-radius: 4px 0 0 4px;
  box-shadow: -10px 0 40px -12px rgba(8,18,32,0.28);
}
.lp-palette-pannello[hidden] { display: none; }
.lp-palette-titolo {
  font-family: var(--font-display); font-size: 21px; margin: 0 0 6px; color: var(--ink);
}
.lp-palette-nota { font-size: 12px; line-height: 1.55; color: var(--ink-2); margin: 0 0 18px; }
.lp-palette-scelte { display: flex; flex-direction: column; gap: 8px; }
.lp-palette-scelta {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; background: transparent; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 3px; text-align: left;
  transition: border-color .15s, background .15s;
}
.lp-palette-scelta:hover { border-color: var(--ink-2); }
.lp-palette-scelta.e-scelta { border-color: var(--ink); background: var(--paper); }
.lp-palette-campione {
  width: 34px; height: 34px; border-radius: 3px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--a) 0 60%, var(--b) 60% 100%);
  border: 1px solid rgba(0,0,0,0.12);
}
.lp-palette-nome {
  font-size: 14px; color: var(--ink); display: flex; flex-direction: column; line-height: 1.3;
}
.lp-palette-nome small {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 3px;
}
.lp-palette-coda {
  margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
@media (max-width: 767px) {
  .lp-palette { top: auto; bottom: 90px; transform: none; }
  .lp-palette-pannello { width: 250px; padding: 18px; }
}

/* ============================================================================
   MOBILE, PASSAGGIO DELIBERATO
   ----------------------------------------------------------------------------
   Il prototipo approvato non ha nemmeno una media query: e' un disegno solo
   desktop. Su un telefono le griglie a colonne fisse allargavano il layout
   fino a 580px (home), 674px (Sardegna), 864px (Story) su un viewport di 375:
   il browser zooma fuori e tutto il sito si legge al 43-65% della sua misura.

   Questo blocco adatta, non ridisegna: stesse sezioni, stesso ordine, colonne
   che diventano una, misure che scalano. Sopra i 767px non cambia niente.
   ============================================================================ */
@media (max-width: 767px) {
  /* Le griglie multi colonna del prototipo, una alla volta e per nome: una
     regola generica su tutti i grid prenderebbe anche calendario e moduli. */
  .intro-grid, .story-grid, .itin-card, .about-hero-inner,
  .itin-headline, .itin-cover-cap, .portrait-block,
  .values-grid, .hosts-grid, .day-card, .incl-inner, .overview {
    grid-template-columns: 1fr;
  }
  .overview { gap: 40px; }
  .overview-side { position: static; }
  .steps { grid-template-columns: 1fr; gap: 32px; }

  /* Una colonna di griglia non scende mai sotto la larghezza intrinseca di
     una fotografia (min-width: auto): la Story restava larga 457px per colpa
     del ritratto. I figli delle griglie compresse devono poter stringersi. */
  .intro-grid > *, .story-grid > *, .itin-card > *, .about-hero-inner > *,
  .itin-headline > *, .itin-cover-cap > *, .portrait-block > *,
  .values-grid > *, .hosts-grid > *, .day-card > *, .steps > *,
  .incl-inner > *, .overview > * {
    min-width: 0;
  }
  .itin-strip { grid-template-columns: 1fr 1fr; }
  .itin-meta { grid-template-columns: 1fr 1fr; }

  /* I canali laterali da 64px diventano 24: su 375px lasciavano al testo
     meno di 250px di colonna. */
  .hero-inner, .intro-grid, .story-grid, .frags-grid, .trio,
  .portrait-block, .process-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* I respiri verticali del prototipo scalati con la stessa proporzione,
     non azzerati: il disegno resta arioso, smette di essere vuoto. */
  .intro { padding: 72px 0 64px; }
  .featured { padding: 64px 0 72px; }
  .story { padding: 72px 0 48px; }
  .frags { padding: 48px 0 72px; }
  .process { padding: 72px 0; }

  /* Apertura: altezza dal contenuto, non 880px fissi. */
  .hero { height: auto; min-height: 560px; }
  .hero h1 { font-size: clamp(34px, 9.9vw, 49px); }
  .hero .hero-description { font-size: clamp(24px, 6.4vw, 30px); }
  .hero-inner { padding-top: 120px; padding-bottom: 56px; }
  .hero-ctas { flex-wrap: wrap; }
  .hero .segnaposto-titolo { font-size: clamp(30px, 8.5vw, 44px); }

  /* Le fotografie della Story sporgono di 120px dalla colonna del testo:
     sul telefono sporgono fino al bordo dello schermo e basta. */
  .longform figure { margin-left: -24px; margin-right: -24px; }

  /* I titoli di sezione del prototipo non scendono sotto i 40px (clamp col
     minimo alto), e il trattamento maiuscolo con la spaziatura larga rende
     una parola come OCCASIONALLY piu' larga dello schermo intero: era questo
     a tenere la Story a 433px. Sul telefono i titoli scalano davvero e la
     spaziatura si stringe di un terzo. */
  .pagina-bloccata h2 { font-size: clamp(28px, 8vw, 34px); }
  .pagina-bloccata h3 { font-size: clamp(24px, 7vw, 30px); }
  .pagina-bloccata .up-word { letter-spacing: 0.08em; }

  /* Il filo d'Arianna della testata itinerario andava a capo. */
  .crumbs { flex-wrap: wrap; }

  /* Testate delle pagine interne. */
  .about-hero h1, .inq-hero h1, .itin-headline h1 { font-size: clamp(34px, 9vw, 46px); }
  .portrait-text { padding: 40px 24px; }

  /* Il collage delle nove fotografie era un mosaico su dodici colonne con le
     celle piazzate a mano: su una colonna da 375 le coordinate non hanno piu'
     senso. Due colonne, celle uguali, la prima foto doppia per gerarchia. */
  .frags-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
  .frags-grid > .frag { grid-column: auto; grid-row: auto; }
  .frags-grid > .frag:first-of-type { grid-column: span 2; }

  /* La pillola di prenotazione era un inline-flex da 486px: prezzo e bottone
     vanno uno sopra l'altro, non fianco a fianco. */
  .booking-bar { display: flex; flex-wrap: wrap; gap: 16px; border-radius: 20px; padding: 20px; }

  /* La striscia dei quattro giorni: due per riga invece di quattro schiacciati. */
  .itin-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .itin-days .day:nth-child(odd) { padding-left: 0; }
  .itin-days .day:nth-child(even) { border-right: 0; }
  .itin-days .day:nth-child(n+3) { border-top: 1px solid var(--rule); }

  /* Barra di navigazione: meno canale, link con aria di tocco vera. */
  .nav { padding: 14px 20px; }
  .nav-links { gap: 4px; }
  .nav-links a { padding: 12px 10px; display: inline-block; }
}

.lp-palette-sezione + .lp-palette-sezione { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }

/* Nei gruppi fotografici la distanza è gestita dalla griglia, non dai margini di flusso Gutenberg. */
:is(.entry-content, .editor-styles-wrapper) :is(.trio, .frags-grid) > .wp-block-group {
  margin-block: 0;
}

/* Il credito condivide esattamente il bordo destro della fotografia. */
:is(.entry-content, .editor-styles-wrapper) .lp-photo-credit,
:is(.entry-content, .editor-styles-wrapper) .lp-credited-image > .wp-element-caption {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 10px 0 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: right;
  color: var(--ink-2);
}
:is(.entry-content, .editor-styles-wrapper) .lp-credited-image > .wp-element-caption {
  display: block;
  margin: 10px 0 0;
}

/* Nel mosaico il credito occupa spazio sotto la foto, senza sovrapporsi alla riga successiva. */
:is(.entry-content, .editor-styles-wrapper) .frag figure.lp-credited-image {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
:is(.entry-content, .editor-styles-wrapper) .frag figure.lp-credited-image img {
  flex: 1;
  min-height: 0;
  height: 0;
  border-radius: 2px;
}
:is(.entry-content, .editor-styles-wrapper) .frag figure.lp-credited-image > .wp-element-caption {
  flex-shrink: 0;
  margin: 0;
}