/* =========================================================================
   SOGNO TOSCANO · V4 · CHIAVE CHIARA, CHROME SCURO
   Same daylight "il film" direction as V3, but the cream veils are gone
   from photos and video: media stays honest, dark ink scrims carry the
   text instead. Navigation, marquee and footer chrome move from light
   olive to dark green (--green-deep) and noir (--noir). Chapters, huge
   Cormorant titles, word by word reveals, still on cafe sage, cream and
   parchment grounds. Gold is for rules, ornaments and big display details
   only, never for small text on light grounds. WordPress block theme:
   style by CLASS with tolerant selectors, WP wraps sections in
   wp-block-group. Fonts are registered by theme.json fontFace: no
   @font-face here.
   ========================================================================= */

:root{
  --sage:#94a58b; --sage-light:#b6c2ad; --sage-pale:#d5dccc;
  --cream:#FAF5E8; --parchment:#E1D7B8;
  --ink:#1D2414; --ink-soft:rgba(29,36,20,.66); --ink-faint:rgba(29,36,20,.38);
  --olive:#3D5234; --olive-2:#4C6340;
  --green-deep:#2D3A27; --noir:#222C1C;
  --gold:#B89A4E; --gold-2:#8C7436;
  --terra:#A63A1F;
  --serif:"Cormorant",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
  --maxw:1440px; --pad:clamp(22px,5vw,96px);
  --ease:cubic-bezier(.22,.61,.36,1); --eo:cubic-bezier(.16,1,.3,1);

  /* derived helpers (mixes of contract colours, not new tokens) */
  --rule:rgba(184,154,78,.32);      /* gold hairline for rules and ornaments */
  --rule-soft:rgba(184,154,78,.18);
  --hair:rgba(29,36,20,.14);        /* ink hairline on light panels */
  --hair-2:rgba(29,36,20,.08);
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis{scroll-behavior:auto}
body{
  font-family:var(--sans);color:var(--ink);background:var(--cream);
  line-height:1.7;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:1.5px solid var(--gold-2);outline-offset:3px}

/* =========================================================
   FILM LAYER: barely there paper texture instead of dark grain
   ========================================================= */
.film-grain{
  position:fixed;inset:0;z-index:2000;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("../img/texture-carta.jpg");
  background-size:520px;background-repeat:repeat;
}
.vignette{position:fixed;inset:0;z-index:1999;pointer-events:none;
  background:radial-gradient(122% 92% at 50% 42%,transparent 62%,rgba(29,36,20,.10) 100%)}

/* =========================================================
   PRELOADER: cream card, ink counter
   ========================================================= */
.loader{position:fixed;inset:0;z-index:3000;background:var(--cream);display:flex;align-items:center;justify-content:center;
  transition:opacity .9s var(--eo) .1s,visibility 0s 1.1s}
.loader.done{opacity:0;visibility:hidden}
.loader-inner{text-align:center}
.loader-emblem{width:74px;margin:0 auto 26px;opacity:0;animation:fadeBlur 1.1s var(--eo) .15s forwards}
.loader-word{font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.58em;text-transform:uppercase;color:var(--ink-soft);padding-left:.58em;
  opacity:0;animation:fadeBlur 1.1s var(--eo) .35s forwards}
.loader-count{font-family:var(--serif);font-style:italic;font-size:clamp(2.6rem,6vw,4rem);color:var(--ink);margin-top:20px;line-height:1;font-variant-numeric:tabular-nums;
  opacity:0;animation:fadeBlur 1s var(--eo) .5s forwards}
.loader-bar{width:min(300px,56vw);height:1px;background:var(--hair);margin:26px auto 0;position:relative;overflow:hidden}
.loader-bar i{position:absolute;inset:0;background:var(--gold-2);transform-origin:left;transform:scaleX(0);transition:transform .25s linear}

/* =========================================================
   CUSTOM CURSOR (fine pointers only)
   ========================================================= */
.cursor-dot,.cursor-ring{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor-dot{display:block;position:fixed;z-index:4000;width:5px;height:5px;border-radius:50%;background:var(--olive);
    top:0;left:0;pointer-events:none;transform:translate(-50%,-50%)}
  .cursor-ring{display:flex;align-items:center;justify-content:center;position:fixed;z-index:3999;width:38px;height:38px;border-radius:50%;
    border:1px solid rgba(61,82,52,.55);top:0;left:0;pointer-events:none;transform:translate(-50%,-50%);
    transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease)}
  .cursor-ring span{font-size:.52rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);opacity:0;transition:opacity .25s;padding-left:.22em}
  .cursor-ring.grow{width:64px;height:64px;background:rgba(61,82,52,.12);border-color:var(--olive)}
  .cursor-ring.drag{width:84px;height:84px;background:var(--olive);border-color:var(--olive)}
  .cursor-ring.drag span{opacity:1}
}

/* =========================================================
   SCROLL PROGRESS
   ========================================================= */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:2500;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold-2),var(--gold));transform-origin:left;transform:scaleX(0)}

/* =========================================================
   TYPE
   ========================================================= */
.kicker{font-weight:500;font-size:.68rem;text-transform:uppercase;letter-spacing:.42em;color:var(--olive);display:inline-flex;align-items:center;gap:1em}
.kicker::before{content:"";width:42px;height:1px;background:var(--gold);flex:none}
.kicker.center{justify-content:center}
.kicker.center::after{content:"";width:42px;height:1px;background:var(--gold);flex:none}
.kicker.bare::before,.kicker.bare::after{display:none}

body h1,body h2,body h3,body h4{font-family:var(--serif);font-weight:400;line-height:.98;letter-spacing:.004em;color:var(--ink)}
.display{font-size:clamp(3.4rem,11vw,10.5rem);font-weight:400}
.display em,.title em{font-style:italic;color:var(--olive);font-weight:400}
h2.title{font-size:clamp(2.6rem,6.4vw,6rem)}
h3.title-s{font-size:clamp(1.9rem,3.4vw,3rem)}
.lede{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.3vw,1.9rem);line-height:1.45;color:var(--ink-soft)}
p.body{font-size:1.02rem;color:var(--ink-soft);max-width:56ch}
p.body strong{color:var(--ink);font-weight:600}
.roman{font-family:var(--serif);font-style:italic;font-size:clamp(4rem,9vw,8rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(140,116,54,.55)}

/* split-text reveal: JS wraps words (title device, NOT the .duo grid) */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;margin-bottom:-.14em;padding-bottom:.14em}
.split .w>i{display:inline-block;font-style:normal;transform:translateY(118%) rotate(.6deg);transition:transform 1.05s var(--eo)}
.split .w>i.gold{font-style:italic;color:var(--olive)}
.split.in .w>i{transform:translateY(0) rotate(0)}

/* generic reveals */
.rv{opacity:0;transform:translateY(46px);transition:opacity 1s var(--eo),transform 1s var(--eo)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.12s}.rv[data-d="2"]{transition-delay:.24s}.rv[data-d="3"]{transition-delay:.36s}.rv[data-d="4"]{transition-delay:.48s}
@keyframes fadeBlur{from{opacity:0;filter:blur(10px);transform:translateY(14px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* =========================================================
   LAYOUT
   ========================================================= */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}
.pad{padding-block:clamp(96px,14vw,210px)}
.pad-s{padding-block:clamp(70px,9vw,130px)}

/* ground tones per the binding background scale */
.sec-sage{background:var(--sage)}
.sec-cream{background:var(--cream)}
.sec-parchment{background:var(--parchment)}
.sec-sage-light{background:var(--sage-light)}
.sec-olive{background:var(--olive);color:var(--cream)}

/* =========================================================
   BUTTONS: olive fill, gold-2 border
   ========================================================= */
.btn{display:inline-flex;align-items:center;gap:.9em;font-weight:500;font-size:.7rem;text-transform:uppercase;letter-spacing:.26em;
  padding:1.25em 2.6em;position:relative;overflow:hidden;border-radius:2px;transition:color .5s var(--ease),border-color .5s var(--ease)}
.btn .arrow{transition:transform .45s var(--ease)}
.btn:hover .arrow{transform:translateX(7px)}
.btn-gold{background:var(--olive);color:var(--cream);border:1px solid var(--gold-2)}
.btn-gold::after{content:"";position:absolute;inset:0;background:var(--olive-2);transform:translateY(101%);transition:transform .5s var(--eo);z-index:0}
.btn-gold:hover::after{transform:translateY(0)}
.btn-gold *{position:relative;z-index:1}
.btn-line{border:1px solid var(--gold-2);color:var(--olive)}
.btn-line::after{content:"";position:absolute;inset:0;background:var(--olive);transform:translateY(101%);transition:transform .5s var(--eo);z-index:0}
.btn-line:hover{color:var(--cream);border-color:var(--olive)}
.btn-line:hover::after{transform:translateY(0)}
.btn-line *{position:relative;z-index:1}
.btn-ghost{padding:1.1em 0;letter-spacing:.3em;color:var(--olive);border-bottom:1px solid var(--gold-2)}
.btn-ghost:hover{color:var(--ink);border-color:var(--gold)}
/* on olive grounds the outline button flips to cream */
.sec-olive .btn-line,.band .btn-line,.ftr .btn-line{border-color:var(--gold);color:var(--cream)}
.sec-olive .btn-line:hover,.band .btn-line:hover,.ftr .btn-line:hover{color:var(--olive);border-color:var(--cream)}
.sec-olive .btn-line::after,.band .btn-line::after,.ftr .btn-line::after{background:var(--cream)}

/* =========================================================
   HEADER: fixed dark green chrome, solid on scroll
   ========================================================= */
.hdr{position:fixed;inset:0 0 auto 0;z-index:1000;padding:16px 0;background:var(--green-deep);
  border-bottom:1px solid rgba(184,154,78,.28);transition:transform .6s var(--eo),padding .5s,box-shadow .5s}
.hdr.hide{transform:translateY(-110%)}
.hdr.solid{padding:10px 0;box-shadow:0 12px 40px -24px rgba(0,0,0,.55)}
body.admin-bar .hdr{top:32px}
.hdr>.wrap,.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;max-width:none;width:100%}
/* logo: lockup oro trasparente, naturale sul verde scuro */
.brand{display:inline-flex;align-items:center}
.brand img{height:42px;width:auto;transition:height .5s var(--ease)}
.hdr.solid .brand img{height:34px}

/* header right cluster: nav + cta */
.hdr .nav-cluster{display:flex;align-items:center;gap:clamp(16px,2vw,34px);flex-wrap:nowrap}

/* CTA Shop Now */
.hdr .cta,.hdr-cta .wp-block-button__link{font-family:var(--sans);font-weight:600;font-size:.67rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);background:var(--gold);border:1px solid var(--gold);padding:.92em 1.7em;border-radius:2px;transition:background .4s,color .4s;line-height:1;white-space:nowrap}
.hdr .cta:hover,.hdr-cta .wp-block-button__link:hover{background:var(--gold-2);color:var(--cream);border-color:var(--gold-2)}

/* =========================================================
   NAVIGATION: core wp-block-navigation inside .hdr
   ========================================================= */
.hdr .wp-block-navigation{font-family:var(--sans)}
.hdr .wp-block-navigation .wp-block-navigation__container{gap:clamp(14px,1.8vw,32px);align-items:center}
.hdr .wp-block-navigation-item__content{font-weight:500;font-size:.67rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cream);opacity:.92;
  position:relative;padding:8px 0;transition:opacity .3s}
.hdr .wp-block-navigation-item__content::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;background:var(--gold);transition:width .45s var(--eo)}
.hdr .wp-block-navigation-item:hover>.wp-block-navigation-item__content{opacity:1}
.hdr .wp-block-navigation-item:hover>.wp-block-navigation-item__content::after{width:100%}
.hdr .wp-block-navigation__submenu-icon{color:var(--sage-pale);margin-left:.35em}
.hdr .wp-block-navigation__submenu-icon svg{stroke:currentColor}

/* dropdown card, dark green (top:100% keeps the hover path unbroken) */
.hdr .wp-block-navigation .wp-block-navigation__submenu-container{
  min-width:250px;background:var(--green-deep);
  border:1px solid rgba(184,154,78,.35);border-top:2px solid var(--gold);border-radius:2px;
  padding:8px;box-shadow:0 24px 60px -30px rgba(0,0,0,.65)}
.hdr .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  display:block;padding:11px 14px;font-size:.8rem;letter-spacing:.02em;text-transform:none;font-weight:500;color:rgba(250,245,232,.82);border-radius:2px;
  transition:background .25s,color .25s,padding-left .25s}
.hdr .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after{display:none}
.hdr .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{background:rgba(184,154,78,.16);color:var(--cream);padding-left:20px}

/* mobile overlay: dark green sheet, big serif cream links */
.hdr .wp-block-navigation__responsive-container-open,
.hdr .wp-block-navigation__responsive-container-close{color:var(--cream)}
.hdr .wp-block-navigation__responsive-container.is-menu-open{background:var(--green-deep);color:var(--cream);padding:clamp(28px,8vw,72px)}
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  font-family:var(--serif);font-size:clamp(1.5rem,5.6vw,2.3rem);text-transform:none;letter-spacing:.01em;font-weight:400;color:var(--cream);opacity:1}
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after{display:none}
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  background:none;border:none;box-shadow:none;backdrop-filter:none;min-width:0;padding:0}
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  font-family:var(--sans);font-size:.95rem;color:rgba(250,245,232,.72)}

/* =========================================================
   HERO: the opening scene, honest video, dark scrim at the base
   ========================================================= */
.hero{position:relative;height:100svh;min-height:660px;display:flex;align-items:flex-end;overflow:hidden;background:var(--sage)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.06)}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 42%,rgba(29,36,20,.18) 64%,rgba(29,36,20,.66) 100%)}
.letterbox{position:absolute;left:0;right:0;z-index:5;background:var(--olive);height:11vh;transition:transform 1.6s var(--eo) .2s}
.letterbox.top{top:0;transform-origin:top}
.letterbox.bot{bottom:0;transform-origin:bottom}
body.lit .letterbox.top{transform:translateY(-101%)}
body.lit .letterbox.bot{transform:translateY(101%)}
.hero-content{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(60px,9vh,110px)}
.hero .kicker{margin-bottom:clamp(18px,3vh,30px);opacity:0;animation:fadeUp 1s var(--eo) 1.15s forwards}
.hero .kicker{color:var(--cream)}
.hero .display{color:var(--cream);text-shadow:0 2px 26px rgba(29,36,20,.45);margin-left:-.04em}
.hero .lede{max-width:46ch;margin-top:clamp(16px,2.6vh,26px);color:rgba(250,245,232,.92);opacity:0;animation:fadeUp 1.1s var(--eo) 1.75s forwards}
.hero-path{margin-top:clamp(22px,3.5vh,36px);opacity:0;animation:fadeUp 1s var(--eo) 2s forwards}
.hero-path .path-lab{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;font-weight:500;color:rgba(250,245,232,.88)}
.hero .btn-line{border-color:var(--gold);color:var(--cream)}
.hero .btn-line::after{background:var(--cream)}
.hero .btn-line:hover{color:var(--olive);border-color:var(--cream)}
.hero-cta{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;opacity:0;animation:fadeUp 1.1s var(--eo) 2.15s forwards}
.hero-side{position:absolute;right:var(--pad);bottom:clamp(60px,9vh,110px);z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  opacity:0;animation:fadeUp 1s var(--eo) 2.3s forwards}
.hero-side .est{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:rgba(250,245,232,.85)}
.hero-side .est b{color:var(--gold);font-weight:400}
@media(max-width:760px){.hero-side{display:none}}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.56rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(250,245,232,.8);opacity:0;animation:fadeUp 1s var(--eo) 2.6s forwards}
.scroll-cue .ln{width:1px;height:54px;background:linear-gradient(180deg,var(--gold),transparent);animation:cue 2.2s var(--eo) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:760px){.scroll-cue{display:none}}

/* =========================================================
   MARQUEE: italic credits on dark green
   ========================================================= */
.marq{overflow:hidden;padding:clamp(26px,4vw,44px) 0;border-block:1px solid var(--rule);background:var(--green-deep);position:relative;z-index:2}
.marq .tk{display:flex;gap:0;width:max-content;animation:marq 46s linear infinite;will-change:transform}
.marq span{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.2vw,2.7rem);color:var(--gold);white-space:nowrap;padding-right:.6em}
.marq span b{color:var(--cream);font-weight:400}
.marq span::after{content:"\00B7";color:var(--terra);padding-left:.6em}
@keyframes marq{to{transform:translateX(-50%)}}

/* =========================================================
   CHAPTERS: full screen scenes on sage, dark-scene variant with scrim
   ========================================================= */
.chapter{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--sage)}
.chapter-media{position:absolute;inset:0;z-index:0}
.chapter-media video,.chapter-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.chapter-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(29,36,20,.24),rgba(29,36,20,.42) 55%,rgba(29,36,20,.64))}
.chapter.dark-scene h2.title,.chapter.dark-scene .lede,.chapter.dark-scene p.body,.chapter.dark-scene blockquote{color:var(--cream)}
.chapter.dark-scene .chapter-plate .cap,.chapter.dark-scene .kicker{color:var(--sage-pale)}
.chapter.dark-scene .kicker::before,.chapter.dark-scene .kicker::after{background:var(--gold)}
.chapter.dark-scene .roman{-webkit-text-stroke:1px rgba(184,154,78,.7)}
.chapter.dark-scene .quote-block cite{color:var(--gold)}
.chapter.dark-scene .split .w>i.gold{color:var(--gold)}
.chapter-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(120px,16vh,180px) var(--pad)}
.chapter-inner.push-r{display:flex;justify-content:flex-end}
.chapter-inner.push-r>div{max-width:640px}
.chapter-inner.push-l>div{max-width:640px}
.chapter-plate{display:flex;align-items:baseline;gap:22px;margin-bottom:clamp(20px,3.5vh,38px)}
.chapter-plate .roman{font-size:clamp(3rem,6vw,5.4rem)}
.chapter-plate .cap{font-size:.66rem;letter-spacing:.44em;text-transform:uppercase;color:var(--olive);font-weight:600}
.chapter h2.title{margin-bottom:clamp(18px,3vh,30px)}
.chapter p.body{color:var(--ink);margin-bottom:1.2em}
.chapter .lede{color:var(--ink)}
.chapter .act{margin-top:clamp(24px,4vh,40px);display:flex;gap:16px;flex-wrap:wrap}

/* editorial caption, bottom corner of a chapter */
.scene-cap{position:absolute;z-index:2;bottom:30px;left:var(--pad);display:flex;gap:12px;align-items:center;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft)}
.scene-cap::before{content:"";width:30px;height:1px;background:var(--gold-2)}
.scene-cap.right{left:auto;right:var(--pad)}

/* nel phero a copertina la caption scorre sotto al titolo, mai sopra il testo */
.phero .scene-cap{position:static;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 26px;justify-content:flex-end}

/* =========================================================
   STATS: cream cells, dark gold numbers, gold hairline grid
   ========================================================= */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
.stat{background:var(--cream);padding:clamp(40px,5vw,72px) 20px;text-align:center}
.stat .num{font-family:var(--serif);font-size:clamp(2.8rem,5.6vw,5rem);line-height:1;color:var(--gold-2);font-variant-numeric:tabular-nums}
.stat .num sup{font-size:.45em;font-style:italic;color:var(--gold-2)}
.stat .lab{margin-top:12px;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
@media(max-width:860px){.stats{grid-template-columns:1fr 1fr}}

/* =========================================================
   HORIZONTAL GALLERY (cafés): pinned scroll on desktop
   ========================================================= */
.hscroll{position:relative;background:var(--parchment)}
.hscroll-head{padding:clamp(90px,12vw,150px) var(--pad) clamp(40px,5vw,70px);max-width:var(--maxw);margin:0 auto}
.hscroll-stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.hscroll-track{display:flex;gap:clamp(20px,3vw,46px);padding:0 var(--pad);will-change:transform}
.hcard{position:relative;flex:none;width:clamp(300px,34vw,480px);aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--sage-light)}
.hcard img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--eo),filter .8s}
.hcard:hover img{transform:scale(1.09)}
.hcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,36,20,.05),transparent 34%,transparent 52%,rgba(29,36,20,.74))}
.hcard-b{position:absolute;inset:auto 0 0 0;z-index:2;padding:26px}
.hcard-b .city{font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--parchment);font-weight:600}
.hcard-b h3{font-size:clamp(1.7rem,2.6vw,2.4rem);margin-top:8px;color:var(--cream)}
.hcard-b .go{display:inline-flex;align-items:center;gap:.6em;margin-top:12px;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(250,245,232,.84);transition:color .4s}
.hcard:hover .go{color:var(--cream)}
.hcard-n{position:absolute;top:18px;left:22px;z-index:2;font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--cream);text-shadow:0 1px 14px rgba(29,36,20,.4)}
.hcard.more-card{display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid var(--rule);background:var(--cream)}
.hcard.more-card::after{display:none}
.hcard.more-card .mc{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,2.4vw,2.2rem);color:var(--olive);padding:30px;line-height:1.3}
.hcard.more-card .mc small{display:block;font-family:var(--sans);font-style:normal;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);margin-top:14px}
.hscroll-bar{height:1px;background:var(--hair);margin:clamp(36px,5vw,60px) var(--pad) 0;position:relative}
.hscroll-bar i{position:absolute;inset:0;background:var(--gold-2);transform-origin:left;transform:scaleX(0)}
.hscroll-foot{padding:clamp(28px,3.5vw,44px) var(--pad) clamp(90px,12vw,150px);display:flex;justify-content:space-between;align-items:center;max-width:var(--maxw);margin:0 auto;gap:20px;flex-wrap:wrap}
@media(max-width:900px){
  .hscroll-stage{position:static;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-block:10px}
  .hscroll-track{transform:none!important}
  .hcard{scroll-snap-align:center;width:min(78vw,420px)}
  .hscroll-bar{display:none}
}

/* =========================================================
   CARDS (pantry categories): photo tiles with dark scrim caption
   ========================================================= */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px)}
.card{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:2px;background:var(--sage-light);display:block}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--eo),filter 1s}
.card:hover img{transform:scale(1.08)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(29,36,20,.16) 62%,rgba(29,36,20,.78) 96%)}
.card-b{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(20px,2.4vw,32px)}
.card-b .n{font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:600}
.card-b h3{font-size:clamp(1.5rem,2.3vw,2.1rem);margin-top:8px;color:var(--cream)}
.card-b .more{display:inline-flex;align-items:center;gap:.6em;margin-top:12px;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(250,245,232,.8);opacity:0;transform:translateY(8px);transition:all .5s var(--eo)}
.card:hover .more{opacity:1;transform:none;color:var(--cream)}
@media(max-width:860px){.cards{grid-template-columns:1fr}.card{aspect-ratio:16/10}}

/* =========================================================
   QUOTE / FINALE
   ========================================================= */
.quote-block blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1.25;color:var(--ink);max-width:24ch;margin-inline:auto}
.quote-block blockquote::before{content:"\201C";color:var(--gold-2)}
.quote-block blockquote::after{content:"\201D";color:var(--gold-2)}
.quote-block cite{display:block;margin-top:30px;font-style:normal;font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;color:var(--olive)}

/* =========================================================
   BAND: cta ribbon, olive anchor with cream text
   ========================================================= */
.band{position:relative;overflow:hidden;background:var(--olive);color:var(--cream);border-block:1px solid var(--gold-2)}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-block:clamp(50px,7vw,90px)}
.band h3{font-size:clamp(1.9rem,3.6vw,3.2rem);max-width:22ch;color:var(--cream)}
.band h3 em,.band .title em,.band .split .w>i.gold{color:var(--gold)}
.band .kicker{color:var(--sage-pale)}
.band .kicker::before,.band .kicker::after{background:var(--gold)}
.band p{color:rgba(250,245,232,.84);max-width:52ch;margin-top:10px}

/* =========================================================
   PAGE HERO (subpages): cover, media on top, title below on cream
   ========================================================= */
.phero{position:relative;background:var(--cream);padding-top:clamp(86px,12vh,128px)}
.phero-media{position:relative;height:clamp(340px,58vh,640px);overflow:hidden}
.phero.tall .phero-media{height:clamp(420px,74vh,800px)}
.phero-media img,.phero-media video{width:100%;height:100%;object-fit:cover}
.phero-inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:clamp(44px,6vh,76px) var(--pad) clamp(28px,4vh,48px)}
.phero .kicker{margin-bottom:20px}
.phero h1{font-size:clamp(3rem,8.4vw,7.6rem);margin-left:-.03em;color:var(--ink)}
.phero h1 em{color:var(--olive)}
.phero .lede{max-width:52ch;margin-top:18px;color:var(--ink-soft)}

/* =========================================================
   EDITORIAL SPLITS (.duo, the 2 column grid): reading on cream
   ========================================================= */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,110px);align-items:center}
.duo.rev>.s-media,.duo.rev .s-media{order:2}
.s-media{position:relative}
.s-media .ph{overflow:hidden;border-radius:2px;position:relative}
.s-media .ph img{transition:transform 1.4s var(--eo)}
.s-media:hover .ph img{transform:scale(1.05)}
.s-media .cap{position:absolute;top:-2.4em;left:0;font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:var(--olive)}
.s-media .ph{position:relative;z-index:1}
.fr{position:absolute;left:16px;top:16px;width:100%;height:100%;border:1px solid var(--gold);z-index:0;pointer-events:none;border-radius:1px}
.s-text .kicker,.s-copy .kicker{margin-bottom:20px}
.s-text h2,.s-copy h2{margin-bottom:22px}
.s-text p.body,.s-copy p.body{margin-bottom:1.1em}
.s-text .act,.s-copy .act{margin-top:26px}
@media(max-width:900px){.duo{grid-template-columns:1fr}.duo.rev>.s-media,.duo.rev .s-media{order:0}}

/* =========================================================
   LISTS / DETAIL ROWS (villas, careers, contact)
   ========================================================= */
.rows{border-top:1px solid var(--hair)}
.row{display:grid;grid-template-columns:1fr 2fr auto;gap:26px;align-items:center;padding:clamp(26px,3.4vw,44px) 0;border-bottom:1px solid var(--hair);transition:padding .4s var(--eo)}
a.row:hover{padding-left:14px}
.row .r-k{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.2vw,1.9rem);color:var(--olive)}
.row .r-t h3{font-size:clamp(1.3rem,2vw,1.8rem)}
.row .r-t p{color:var(--ink-soft);font-size:.95rem;margin-top:6px;max-width:60ch}
.row .r-a{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft)}
a.row:hover .r-a{color:var(--olive)}
@media(max-width:760px){.row{grid-template-columns:1fr;gap:10px}}

/* facts strip (cafe pages): cream cells, ink hairline grid */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:2px;overflow:hidden}
/* facts annidati in una colonna .duo (~600px): minmax(200px) collassa a 2 tracce
   con cella orfana (limite latente anche in V2, stesso sizing, che a 1440px ci
   passava per un soffio). Minimo ridotto: 3 celle corte restano su una riga. */
.duo .facts{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.fact{background:var(--cream);padding:26px}
.fact .k{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--olive);margin-bottom:8px}
.fact .v{font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
.fact .v a{border-bottom:1px solid var(--gold-2)}
.fact .v a:hover{color:var(--olive)}

/* photo mosaic (cafe/villa pages): sage-light wrap tone */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);background:var(--sage-light);padding:clamp(12px,1.6vw,22px);border-radius:2px}
.mosaic .m{overflow:hidden;border-radius:2px;aspect-ratio:4/5}
.mosaic .m.wide{grid-column:span 2;aspect-ratio:auto}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--eo)}
.mosaic .m:hover img{transform:scale(1.07)}
@media(max-width:760px){.mosaic{grid-template-columns:1fr}.mosaic .m.wide{grid-column:auto}.mosaic .m{aspect-ratio:16/10}}

/* =========================================================
   FORMS: editorial minimal on light
   ========================================================= */
.form{display:grid;gap:0}
.field{position:relative;border-bottom:1px solid var(--hair);padding:26px 0 14px;transition:border-color .4s}
.field:focus-within{border-color:var(--gold-2)}
.field label{position:absolute;top:26px;left:0;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);transition:all .35s var(--eo);pointer-events:none}
.field.filled label,.field:focus-within label{top:4px;font-size:.52rem;color:var(--olive)}
.field input,.field textarea,.field select{width:100%;background:none;border:none;color:var(--ink);font-family:var(--serif);font-size:1.4rem;padding:4px 0;outline:none}
.field textarea{resize:vertical;min-height:90px;line-height:1.5}
.field select{appearance:none;cursor:pointer}
.field select option{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:1rem}
.form .act{margin-top:40px}
.form-note{font-size:.8rem;color:var(--ink-soft);margin-top:18px}
/* come V2 (wholesale, inline): link della nota in gold-2 con sottolineatura leggera */
.form-note a{color:var(--gold-2);border-bottom:1px solid rgba(140,116,54,.35)}
.form-note a:hover{color:var(--olive)}
.form-ok{padding:30px;border:1px solid var(--rule);border-radius:2px;background:rgba(184,154,78,.08)}
.form-ok h3{color:var(--olive);font-size:1.6rem;margin-bottom:8px}
.form-ok p{color:var(--ink-soft)}

/* =========================================================
   WPFORMS (Task 12): i 3 form veri girano sul markup nativo
   del plugin, non su .form/.field sopra. Il plugin espone il
   proprio look via CSS custom properties su :root (vedi
   wpforms-modern-full-inline-css, caricato PRIMA di questo
   file): le ridichiariamo qui, stessa specificita' ma ultime
   nel cascade, per portarlo a tema (crema/ink/oro/olive)
   senza combattere i selettori interni del plugin.
   ========================================================= */
.wpforms-container{
  --wpforms-field-border-radius:2px;
  --wpforms-field-border-style:solid;
  --wpforms-field-border-size:1px;
  --wpforms-field-background-color:var(--cream);
  --wpforms-field-border-color:var(--hair);
  --wpforms-field-border-color-spare:var(--hair);
  --wpforms-field-text-color:var(--ink);
  --wpforms-field-menu-color:var(--cream);
  --wpforms-label-color:var(--ink-soft);
  --wpforms-label-sublabel-color:var(--ink-faint);
  --wpforms-label-error-color:var(--terra);
  --wpforms-button-border-radius:2px;
  --wpforms-button-border-style:solid;
  --wpforms-button-background-color:var(--olive);
  --wpforms-button-border-color:var(--gold-2);
  --wpforms-button-text-color:var(--cream);
  --wpforms-page-break-color:var(--olive);
  --wpforms-container-border-style:none;
  --wpforms-container-shadow-size-box-shadow:none;
}
.wpforms-container .wpforms-field-label{font-family:var(--sans);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem}
.wpforms-container .wpforms-required-label{color:var(--terra)}
.wpforms-container input[type=text],.wpforms-container input[type=email],.wpforms-container textarea,.wpforms-container select{font-family:var(--serif);font-size:1.15rem;transition:border-color .35s,background-color .35s}
.wpforms-container input[type=text]:focus,.wpforms-container input[type=email]:focus,.wpforms-container textarea:focus,.wpforms-container select:focus{border-color:var(--gold-2)!important;box-shadow:none!important}
.wpforms-container textarea{line-height:1.5}
.wpforms-container button[type=submit],.wpforms-container .wpforms-submit{font-family:var(--sans);font-weight:500;letter-spacing:.2em;text-transform:uppercase;transition:background-color .35s}
.wpforms-container button[type=submit]:hover,.wpforms-container .wpforms-submit:hover{background-color:var(--olive-2)!important}
.wpforms-container .wpforms-field-description,.wpforms-container .wpforms-description{color:var(--ink-soft)}

/* =========================================================
   PANORAMA divider: taglio netto, filetti oro sopra e sotto
   ========================================================= */
.pano{position:relative;height:clamp(320px,52vh,560px);overflow:hidden;background:var(--sage);border-block:1px solid var(--rule)}
.pano img{width:100%;height:120%;object-fit:cover;will-change:transform}
/* plan-mandated: the pano caption band sits on parchment */
.pano .scene-cap{z-index:3;background:var(--parchment);color:var(--ink);padding:10px 16px;border-radius:2px}
.pano .scene-cap::before{background:var(--gold-2)}

/* =========================================================
   FOOTER: end credits, noir anchor with cream text
   ========================================================= */
.ftr{background:var(--noir);color:var(--cream);border-top:1px solid var(--gold-2);position:relative;z-index:2}
.ftr .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.ftr-top{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:clamp(30px,5vw,70px);padding:clamp(70px,9vw,120px) 0 clamp(40px,5vw,70px)}
.ftr-brand img{height:50px;width:auto;filter:brightness(0) invert(1);opacity:.96;margin-bottom:22px}
.ftr-brand p{color:rgba(250,245,232,.74);font-size:.92rem;max-width:38ch}
.ftr h4{font-size:.6rem;letter-spacing:.36em;text-transform:uppercase;color:var(--sage-pale);margin-bottom:20px;font-family:var(--sans);font-weight:600}
.ftr-col a{display:block;color:rgba(250,245,232,.84);font-size:.92rem;padding:5px 0;transition:color .3s,padding-left .3s}
.ftr-col a:hover{color:var(--gold);padding-left:6px}
.ftr-bot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:26px 0;border-top:1px solid rgba(250,245,232,.16)}
.ftr-bot small{color:rgba(250,245,232,.62);font-size:.74rem}
.fsoc{display:flex;gap:10px}
.fsoc a{width:38px;height:38px;border:1px solid rgba(250,245,232,.32);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6rem;letter-spacing:.08em;color:rgba(250,245,232,.84);transition:all .35s}
.fsoc a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.vv{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(250,245,232,.36)}
.ftr-fin{text-align:center;padding:0 0 30px}
.ftr-fin .fin{font-family:var(--serif);font-style:italic;font-size:1rem;color:rgba(250,245,232,.62)}
.ftr-fin .fin .accent{color:var(--gold)}
@media(max-width:900px){.ftr-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-top{grid-template-columns:1fr}}

/* =========================================================
   PROMO BANNER (e-commerce): fascia snella editabile dal team
   ========================================================= */
.promo{background:var(--cream);border-block:1px solid var(--rule)}
.promo .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;padding-block:clamp(30px,4vw,48px)}
.promo .p-copy .kicker{margin-bottom:10px}
.promo .p-copy h3{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.promo .p-copy h3 em{font-style:italic;color:var(--olive)}
.promo .p-copy p{color:var(--ink-soft);max-width:60ch;margin-top:6px}

/* =========================================================
   VETRINA STORE: tre riquadri mensili, aggiornati dall'editor
   ========================================================= */
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px)}
.shc{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:2px;background:var(--cream);overflow:hidden}
.shc .ph{display:block;aspect-ratio:4/3;overflow:hidden}
.shc .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--eo)}
.shc:hover .ph img{transform:scale(1.06)}
.shc-b{padding:clamp(18px,2vw,28px)}
.shc-b .n{font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-2);font-weight:600}
.shc-b h3{font-size:clamp(1.4rem,2.2vw,1.9rem);margin-top:8px}
.shc-b p{color:var(--ink-soft);font-size:.95rem;margin-top:8px}
.shc-b .more{display:inline-flex;align-items:center;gap:.6em;margin-top:14px;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);transition:color .4s}
.shc:hover .more{color:var(--olive)}
@media(max-width:860px){.showcase{grid-template-columns:1fr}}

/* =========================================================
   WORDPRESS BLOCK ADAPTATIONS
   Tolerant by class: WP wraps sections in wp-block-group and adds
   alignfull, never rely on rigid child hierarchies.
   ========================================================= */
.wp-block-group.alignfull{max-width:none}
/* il blockGap del layout flow di WP mette margin-block-start:24px tra i figli dei
   group: dentro le griglie hairline (facts, stats) e le griglie foto apre bande
   del colore del gap sopra le celle 2+. Le geometrie interne di questi device
   sono interamente della grid/dei bordi: margini flow azzerati (V2: reset globale). */
.facts>*,.stats>*,.mosaic>*,.cards>*,.rows>*,.showcase>*,.shc>*{margin-block-start:0}
/* fallback pages with no immersive opener stay clear of the fixed header */
main.wp-block-group:not(:has(.hero,.phero,.chapter,.pano)){padding-top:clamp(96px,14vh,150px);padding-bottom:clamp(60px,8vh,110px)}
/* full bleed section devices span the viewport even inside constrained mains */
.hero,.chapter,.phero,.pano,.band,.stats,.marq,.hscroll{width:100%}

/* =========================================================
   MOTION SAFETY
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  .rv,.split .w>i{opacity:1!important;transform:none!important}
  .loader{display:none}
  body.lit .letterbox{display:none}
}