@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

:root {
  --pietra: #F4F0EA;
  --sabbia: #E4DACB;
  --sabbia-2: #CDBFAB;
  --castagno: #5C4535;
  --antracite: #2B2926;
  --bronzo: #9A7C55;
  --testo: #3B3733;
  --testo-2: #7A716A;
  --bianco: #FFFFFF;
  --explora: #26464A;
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --max: 1240px;
  --ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 220 L120 170 L190 190 L280 110 L320 140 L360 80 L400 120 L450 100 L520 170 L600 150 L660 70 L700 105 L735 55 L780 110 L840 95 L900 160 L980 130 L1060 180 L1200 150' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2.5' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--testo);
  background: var(--bianco);
}
h1, h2, h3 { font-family: var(--serif); font-weight: 300; line-height: 1.1; margin: 0 0 .45em; color: var(--antracite); }
h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h3 { font-size: 1.75rem; font-weight: 400; }
p { margin: 0 0 1.1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--bronzo); outline-offset: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.stretto { max-width: 760px; margin: 0 auto; text-align: center; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; padding: 8px 12px; z-index: 50; }

/* small spaced label used sparingly for place + section context, as on the reference */
.sopratitolo { font-family: var(--sans); font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--bronzo); margin-bottom: 18px; font-weight: 400; }
.filetto { width: 1px; height: 64px; background: var(--sabbia-2); margin: 0 auto 36px; }

/* Buttons */
.btn { display: inline-block; font-family: var(--sans); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; padding: 16px 34px; text-decoration: none; border: 1px solid currentColor; transition: background .25s, color .25s; cursor: pointer; }
.btn-chiaro { color: #fff; }
.btn-chiaro:hover { background: #fff; color: var(--antracite); }
.btn-scuro { color: var(--antracite); }
.btn-scuro:hover { background: var(--antracite); color: #fff; }
.link-sottile { font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--bronzo); padding-bottom: 4px; }

/* Header */
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 20; color: #fff; }
.top .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 96px; max-width: none; padding: 0 48px; }
.top.solido { position: relative; color: var(--antracite); border-bottom: 1px solid var(--sabbia); background: #fff; }
.nav { display: flex; gap: 30px; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; }
.nav a { text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom: 1px solid currentColor; }
.marchio { text-align: center; text-decoration: none; font-family: var(--serif); font-size: 1.9rem; font-weight: 400; line-height: 1; letter-spacing: .04em; }
.marchio small { display: block; font-family: var(--sans); font-size: .62rem; letter-spacing: .38em; text-transform: uppercase; margin-top: 8px; opacity: .85; }
.top-destra { display: flex; justify-content: flex-end; align-items: center; gap: 26px; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; }
.top-destra a { text-decoration: none; }
.top .btn { padding: 12px 24px; font-size: .74rem; }
.top.solido .btn { color: var(--antracite); }
.top:not(.solido) .btn:hover { background: #fff; color: var(--antracite); }
.top.solido .btn:hover { background: var(--antracite); color: #fff; }

/* Hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden;
  background: linear-gradient(180deg, #4A4038 0%, #6E5A4A 55%, #8E7A68 100%); }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,16,.45) 0%, rgba(20,18,16,.15) 40%, rgba(20,18,16,.45) 100%); }
.hero-testo { position: relative; z-index: 2; padding: 120px 24px 80px; }
.hero h1 { color: #fff; font-size: clamp(3.6rem, 10vw, 8.5rem); font-weight: 300; letter-spacing: .01em; margin-bottom: .2em; }
.hero p { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 300; max-width: 34ch; margin: 0 auto 2.2em; }
.scorri { position: absolute; z-index: 2; bottom: 28px; left: 50%; width: 1px; height: 56px; background: rgba(255,255,255,.6); }

/* Sections */
.sezione { padding: 128px 0; }
.sezione-pietra { background: var(--pietra); }
.intro-testo { font-family: var(--serif); font-size: clamp(1.45rem, 2.3vw, 1.9rem); line-height: 1.5; color: var(--antracite); font-weight: 300; }

/* Split image/text */
.diviso { display: grid; grid-template-columns: 1.15fr 1fr; gap: 96px; align-items: center; }
.diviso.inverso { grid-template-columns: 1fr 1.15fr; }
.diviso.inverso .foto { order: 2; }
.diviso-testo { max-width: 470px; }
.dotazioni { list-style: none; padding: 0; margin: 28px 0 36px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.dotazioni li { padding: 10px 0; border-bottom: 1px solid var(--sabbia); font-size: .98rem; }

/* Photos with graceful fallback */
.foto { margin: 0; position: relative; overflow: hidden; background: linear-gradient(160deg, #D9CDBB 0%, #BFAE97 100%); }
.foto::before { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: var(--ridge) bottom / 100% 100% no-repeat; }
.foto img { position: relative; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.foto figcaption { display: none; }
.foto.vuota figcaption { display: block; position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.foto-alta { aspect-ratio: 4 / 5; }
.foto-larga { aspect-ratio: 16 / 10; }

/* Figures strip */
.cifre { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; border-top: 1px solid var(--sabbia-2); border-bottom: 1px solid var(--sabbia-2); }
.cifre div { padding: 52px 16px; }
.cifre div + div { border-left: 1px solid var(--sabbia-2); }
.cifre strong { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 4.5vw, 3.8rem); line-height: 1; color: var(--antracite); margin-bottom: 14px; }
.cifre span { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-2); }

/* Gallery */
.galleria { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 14px; }
.galleria .foto:first-child { grid-row: span 2; }
.galleria .foto:nth-child(4) { grid-column: span 2; }

/* Seasons tiles */
.stagioni { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stagione { position: relative; display: block; aspect-ratio: 4 / 5; color: #fff; text-decoration: none; overflow: hidden; }
.stagione .foto { position: absolute; inset: 0; }
.stagione .foto.vuota figcaption { display: none; }
.stagione-inverno .foto { background: linear-gradient(170deg, #8A97A3 0%, #5E6B77 100%); }
.stagione-estate .foto { background: linear-gradient(170deg, #8C9A7E 0%, #5D6B52 100%); }
.stagione .foto img { transition: transform 1.2s ease; }
.stagione:hover .foto img { transform: scale(1.04); }
.stagione-testo { position: absolute; z-index: 2; inset: auto 0 0 0; padding: 56px 48px; background: linear-gradient(0deg, rgba(20,18,16,.55), rgba(20,18,16,0)); }
.stagione h3 { color: #fff; font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 300; margin-bottom: .2em; }
.stagione p { max-width: 38ch; margin-bottom: 1.4em; }

/* Reviews */
.citazione { margin: 0 auto; max-width: 860px; text-align: center; }
.citazione p { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.35; color: var(--antracite); font-weight: 300; }
.citazione footer { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-2); }
.recensioni-minori { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: 980px; margin: 80px auto 0; }
.recensioni-minori blockquote { margin: 0; text-align: center; }
.recensioni-minori p { font-family: var(--serif); font-size: 1.35rem; line-height: 1.45; color: var(--antracite); }
.recensioni-minori footer { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-2); }
.voto { text-align: center; margin-top: 72px; font-size: .9rem; color: var(--testo-2); }
.voto strong { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; color: var(--antracite); margin-right: 6px; }

/* Explora booking block */
.prenota { background: var(--explora); color: #fff; }
.prenota-box { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.prenota-box .foto { min-height: 560px; background: linear-gradient(160deg, #3C5F63 0%, #1B3336 100%); }
.prenota-box .foto.vuota figcaption { display: none; }
.prenota-testo { padding: 96px 80px; display: flex; flex-direction: column; justify-content: center; }
.prenota h2 { color: #fff; }
.prenota p { color: rgba(255,255,255,.82); max-width: 44ch; }
.explora-logo { display: inline-flex; align-items: center; gap: 2px; font-family: var(--sans); font-weight: 500; font-size: 1.15rem; letter-spacing: .32em; margin-bottom: 34px; color: #fff; }
.explora-logo svg { width: 1.05em; height: 1.05em; margin: 0 .12em 0 .02em; }
.prenota-vantaggi { list-style: none; padding: 0; margin: 8px 0 40px; }
.prenota-vantaggi li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.18); font-size: .98rem; }
.prenota-azioni { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.btn-explora { background: #fff; color: var(--explora); border-color: #fff; }
.btn-explora:hover { background: transparent; color: #fff; }
.prenota .contatto { font-size: .9rem; color: rgba(255,255,255,.75); margin: 28px 0 0; }
.prenota .contatto a { color: #fff; }

/* Inner pages */
.testata { padding: 150px 0 110px; text-align: center; background: var(--pietra); }
.testata h1 { font-size: clamp(2.6rem, 5.5vw, 4.6rem); max-width: 18ch; margin: 0 auto .4em; }
.testata p { max-width: 60ch; margin: 0 auto; font-family: var(--serif); font-size: 1.4rem; line-height: 1.5; color: var(--testo); }
.guide { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 96px; }
.guida h2, .guida h3 { font-size: 2.1rem; }
.guida .meta { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bronzo); margin-bottom: 1em; }
.domande .guida h3 { font-size: 1.5rem; }

/* Footer */
.piede { background: var(--pietra); padding: 96px 0 48px; text-align: center; font-size: .95rem; }
.piede .marchio { color: var(--antracite); display: inline-block; margin-bottom: 36px; }
.piede p { margin: 0 0 .5em; color: var(--testo); }
.piede a { text-decoration: none; border-bottom: 1px solid var(--sabbia-2); }
.piede-social { display: flex; justify-content: center; gap: 32px; margin: 32px 0 56px; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; }
.piede-note { font-size: .78rem; color: var(--testo-2); border-top: 1px solid var(--sabbia); padding-top: 28px; }

@media (max-width: 1000px) {
  .top .wrap { grid-template-columns: 1fr auto; padding: 0 24px; min-height: 80px; }
  .nav { display: none; }
  .marchio { text-align: left; font-size: 1.55rem; }
  .diviso, .diviso.inverso, .prenota-box, .guide { grid-template-columns: 1fr; gap: 56px; }
  .diviso.inverso .foto { order: 0; }
  .prenota-testo { padding: 72px 28px; }
  .prenota-box .foto { min-height: 320px; }
  .cifre { grid-template-columns: 1fr 1fr; }
  .cifre div:nth-child(3) { border-left: 0; }
  .cifre div:nth-child(n+3) { border-top: 1px solid var(--sabbia-2); }
  .galleria { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 180px 180px; }
  .galleria .foto:first-child { grid-column: span 2; grid-row: auto; }
  .galleria .foto:nth-child(4) { grid-column: auto; }
  .stagioni { grid-template-columns: 1fr; }
  .stagione-testo { padding: 40px 28px; }
  .recensioni-minori { grid-template-columns: 1fr; gap: 48px; }
  .sezione { padding: 88px 0; }
  .wrap { padding: 0 24px; }
}
@media (max-width: 520px) {
  .dotazioni { grid-template-columns: 1fr; }
  .top .btn { padding: 10px 14px; letter-spacing: .12em; }
}

.intro { text-align: center; margin-bottom: 72px; }
.hero .sopratitolo { font-family: var(--sans); font-style: normal; font-size: .78rem; max-width: none; margin: 0 0 22px; color: rgba(255,255,255,.85); }

/* stylised ridge sits behind the name, not behind the button */
.hero h1 { position: relative; }
.hero h1::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; transform: translateX(-50%); top: -20%; height: 150%; background: var(--ridge) center / 100% 100% no-repeat; pointer-events: none; }

/* Combined booking block: Explora + email form */
.prenota { padding: 128px 0 96px; }
.prenota-testa { text-align: center; max-width: 640px; margin: 0 auto 80px; }
.prenota-testa .sopratitolo { color: #C9B48F; }
.prenota-testa p { margin: 0 auto; color: rgba(255,255,255,.78); }
.prenota-due { display: grid; grid-template-columns: 1fr 120px 1.25fr; align-items: stretch; }
.prenota h3 { color: #fff; font-size: 2.2rem; font-weight: 300; margin-bottom: .4em; }
.prenota-explora { padding-right: 8px; }
.prenota-explora .explora-logo { margin-bottom: 28px; }
.prenota-explora .prenota-vantaggi { margin-bottom: 40px; }
.prenota-oppure { position: relative; display: flex; justify-content: center; }
.prenota-oppure::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid rgba(255,255,255,.22); }
.prenota-oppure span { position: relative; align-self: center; background: var(--explora); padding: 14px 0; font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: #C9B48F; }
.prenota-modulo > p { color: rgba(255,255,255,.78); margin-bottom: 30px; }
.prenota .contatto { text-align: center; max-width: none; margin: 72px auto 0; font-size: .92rem; color: rgba(255,255,255,.7); }
.prenota .contatto a { color: #fff; }

.modulo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
.modulo label { display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.65); font-weight: 400; }
.modulo .intero { grid-column: 1 / -1; }
.modulo .facoltativo { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.modulo input, .modulo select, .modulo textarea {
  font: 300 1.02rem var(--sans); color: #fff; letter-spacing: 0; text-transform: none;
  background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); padding: 9px 0; border-radius: 0; width: 100%; display: block; margin-top: 6px;
  color-scheme: dark;
}
.modulo select option { color: var(--antracite); }
.modulo textarea { resize: vertical; min-height: 80px; }
.modulo textarea::placeholder { color: rgba(255,255,255,.4); }
.modulo input:focus, .modulo select:focus, .modulo textarea:focus { outline: none; border-bottom-color: #fff; }
.modulo .spunta { display: flex; align-items: flex-start; gap: 12px; text-transform: none; letter-spacing: 0; font-size: .9rem; color: rgba(255,255,255,.8); }
.modulo .spunta input { width: auto; display: inline-block; flex: none; margin-top: 5px; accent-color: #C9B48F; }
.modulo .spunta a { color: #fff; }
.modulo-azioni { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.modulo button[disabled] { opacity: .5; cursor: wait; }
.esito { margin: 0; font-size: .95rem; color: rgba(255,255,255,.85); }
.esito.ok { color: #BFE0C4; }
.esito.errore { color: #F2B8A8; }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 1000px) {
  .prenota { padding: 88px 0 72px; }
  .prenota-due { grid-template-columns: 1fr; }
  .prenota-oppure { height: 96px; }
  .prenota-oppure::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.22); }
  .prenota-oppure span { padding: 0 18px; }
}
@media (max-width: 520px) { .modulo { grid-template-columns: 1fr; } }

/* Language switch, always visible (also on phones) */
.lingue { display: inline-flex; align-items: center; border: 1px solid currentColor; border-radius: 999px; padding: 2px; font-size: .72rem; letter-spacing: .14em; }
.lingue a, .lingue span { padding: 5px 10px; border-radius: 999px; text-decoration: none; line-height: 1; }
.top:not(.solido) .lingue [aria-current] { color: var(--antracite); background: #fff; }
.top.solido .lingue [aria-current] { color: #fff; background: var(--antracite); }
.lingue a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) { .top-destra { gap: 10px; } .lingue a, .lingue span { padding: 5px 8px; } }
@media (max-width: 520px) { .top .marchio { font-size: 1.25rem; white-space: nowrap; } .top .marchio small { display: none; } .top .btn { padding: 9px 12px; font-size: .68rem; } }