/* =========================================================================
   SOGNO TOSCANO · V3 · CHIAVE CHIARA
   The daylight remake of "il film": same direction, shot in the light.
   Chapters, huge Cormorant titles, word by word reveals, on cafe sage,
   cream and parchment grounds. Olive is the only dark anchor left (band,
   footer). 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;
  --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 + CHAPTER RAIL
   ========================================================= */
.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)}
.chapter-rail{position:fixed;right:34px;top:50%;transform:translateY(-50%);z-index:900;display:flex;flex-direction:column;gap:20px;align-items:center}
.chapter-rail a{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--ink-faint);position:relative;transition:color .4s,transform .4s var(--ease)}
.chapter-rail a::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;border:1px solid transparent;transition:border-color .4s}
.chapter-rail a.on{color:var(--olive);transform:scale(1.25)}
.chapter-rail a.on::before{border-color:rgba(61,82,52,.4)}
@media(max-width:1100px){.chapter-rail{display:none}}

/* =========================================================
   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: light chrome, solid on scroll
   ========================================================= */
.hdr{position:fixed;inset:0 0 auto 0;z-index:1000;padding:22px 0;transition:transform .6s var(--eo),background .5s,padding .5s,border-color .5s,box-shadow .5s;border-bottom:1px solid transparent}
.hdr::before{content:"";position:absolute;inset:0 0 auto 0;height:190%;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(250,245,232,.6),rgba(250,245,232,0));transition:opacity .5s}
.hdr.hide{transform:translateY(-110%)}
.hdr.solid{background:rgba(250,245,232,.88);backdrop-filter:blur(16px) saturate(1.08);padding:12px 0;border-color:var(--rule);box-shadow:0 10px 40px -28px rgba(29,36,20,.4)}
.hdr.solid::before{opacity:0}
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: the gold PNG is inked down so it reads on sage and cream alike */
.brand{display:inline-flex;align-items:center}
.brand img{height:44px;width:auto;filter:brightness(0);opacity:.88;transition:height .5s var(--ease)}
.hdr.solid .brand img{height:36px}

/* 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(--cream);background:var(--olive);border:1px solid var(--gold-2);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(--olive-2);color:var(--cream)}

/* =========================================================
   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(--ink);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-2);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(--olive);margin-left:.35em}
.hdr .wp-block-navigation__submenu-icon svg{stroke:currentColor}

/* dropdown card, light (top:100% keeps the hover path unbroken) */
.hdr .wp-block-navigation .wp-block-navigation__submenu-container{
  min-width:250px;background:rgba(250,245,232,.98);backdrop-filter:blur(16px);
  border:1px solid var(--rule);border-top:2px solid var(--gold);border-radius:2px;
  padding:8px;box-shadow:0 24px 60px -34px rgba(29,36,20,.55)}
.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:var(--ink-soft);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,.12);color:var(--ink);padding-left:20px}

/* mobile overlay: cream sheet, big serif ink links */
.hdr .wp-block-navigation__responsive-container-open,
.hdr .wp-block-navigation__responsive-container-close{color:var(--ink)}
.hdr .wp-block-navigation__responsive-container.is-menu-open{background:var(--cream);color:var(--ink);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(--ink);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:var(--ink-soft)}

/* =========================================================
   HERO: the opening scene, in daylight (sage ground)
   ========================================================= */
.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-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(250,245,232,.36) 0%,rgba(250,245,232,0) 34%,rgba(213,220,204,.14) 60%,rgba(250,245,232,.92) 100%)}
.hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;opacity:.7;
  background:radial-gradient(42% 52% at 28% 30%,rgba(250,245,232,.65),transparent 62%),radial-gradient(48% 56% at 74% 72%,rgba(184,154,78,.35),transparent 64%);
  animation:glowDrift 20s ease-in-out infinite alternate}
@keyframes glowDrift{from{transform:translate(-2.5%,-2%) scale(1.04)}to{transform:translate(3%,2.5%) scale(1.12)}}
.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 .display{color:var(--ink);text-shadow:0 2px 32px rgba(250,245,232,.7);margin-left:-.04em}
.hero .lede{max-width:46ch;margin-top:clamp(16px,2.6vh,26px);color:var(--ink);opacity:0;animation:fadeUp 1.1s var(--eo) 1.9s forwards}
.hero-cta{display:flex;gap:18px;flex-wrap:wrap;margin-top:clamp(26px,4vh,44px);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:var(--ink-soft)}
.hero-side .est b{color:var(--olive);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:var(--ink-soft);opacity:0;animation:fadeUp 1s var(--eo) 2.6s forwards}
.scroll-cue .ln{width:1px;height:54px;background:linear-gradient(180deg,var(--gold-2),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 parchment
   ========================================================= */
.marq{overflow:hidden;padding:clamp(26px,4vw,44px) 0;border-block:1px solid var(--rule);background:var(--parchment);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(--ink-soft);white-space:nowrap;padding-right:.6em}
.marq span b{color:var(--gold-2);font-weight:400}
.marq span::after{content:"\00B7";color:var(--gold-2);padding-left:.6em}
@keyframes marq{to{transform:translateX(-50%)}}

/* =========================================================
   CHAPTERS: full screen daylight scenes on sage
   ========================================================= */
.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-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(250,245,232,.84) 0%,rgba(250,245,232,.3) 30%,rgba(250,245,232,.36) 70%,rgba(250,245,232,.88) 100%)}
.chapter-shade.left{background:linear-gradient(90deg,rgba(250,245,232,.92) 0%,rgba(250,245,232,.52) 44%,rgba(250,245,232,.1) 100%),linear-gradient(180deg,rgba(250,245,232,.5),transparent 30%,transparent 72%,rgba(250,245,232,.84))}
.chapter-shade.right{background:linear-gradient(270deg,rgba(250,245,232,.92) 0%,rgba(250,245,232,.52) 44%,rgba(250,245,232,.1) 100%),linear-gradient(180deg,rgba(250,245,232,.5),transparent 30%,transparent 72%,rgba(250,245,232,.84))}
.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)}

/* =========================================================
   STATS: sage-light cells, 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(--sage-light);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(--olive);font-variant-numeric:tabular-nums}
.stat .num sup{font-size:.45em;font-style:italic;color:var(--olive)}
.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(--cream)}
.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(--parchment)}
.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 cream caption fade
   ========================================================= */
.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 42%,rgba(250,245,232,.94) 92%)}
.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(--olive);font-weight:600}
.card-b h3{font-size:clamp(1.5rem,2.3vw,2.1rem);margin-top:8px;color:var(--ink)}
.card-b .more{display:inline-flex;align-items:center;gap:.6em;margin-top:12px;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);opacity:0;transform:translateY(8px);transition:all .5s var(--eo)}
.card:hover .more{opacity:1;transform:none;color:var(--olive)}
@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): sage ground
   ========================================================= */
.phero{position:relative;min-height:72svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--sage)}
.phero.tall{min-height:92svh}
.phero-media{position:absolute;inset:0;z-index:0}
.phero-media img,.phero-media video{width:100%;height:100%;object-fit:cover}
.phero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(250,245,232,.4),rgba(250,245,232,.06) 42%,rgba(250,245,232,.92))}
.phero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(150px,20vh,220px) var(--pad) clamp(50px,7vh,80px)}
.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)}

/* =========================================================
   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)}
.fr{position:absolute;inset:14px;border:1px solid var(--rule);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: image fades into cream
   ========================================================= */
.pano{position:relative;height:clamp(320px,52vh,560px);overflow:hidden;background:var(--sage)}
.pano img{width:100%;height:120%;object-fit:cover;will-change:transform}
.pano::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--cream) 0%,transparent 22%,transparent 78%,var(--cream) 100%)}
/* 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, olive anchor with cream text
   ========================================================= */
.ftr{background:var(--olive);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}}

/* =========================================================
   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>*{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}
}