/* fonts, tokens, shell, footer */

@font-face{font-family:'DidotEmb';font-style:normal;font-weight:400;font-display:swap;src:url('../font/didot.woff2') format('woff2')}
@font-face{font-family:'DidotEmb';font-style:italic;font-weight:400;font-display:swap;src:url('../font/didot-italic.woff2') format('woff2')}
@font-face{font-family:'GSIntro';font-style:normal;font-display:block;src:url('../font/gs-intro.woff2') format('woff2')}
@font-face{font-family:'GSIntro';font-style:italic;font-display:block;src:url('../font/gs-intro-italic.woff2') format('woff2')}
:root{
  --paper:#F4F1E8;
  --bone:#FBFAF5;
  --ink:#18160F;
  --soft:#65604F;
  --line:#E2DCCD;
  --line2:#CFC7B2;
  --olive:#5B5B3B;
  --spine:#43422E;
  --bronze:#856539;
  --cream:#F4F1E8;
  --serif:"Didot","Bodoni 72","DidotEmb","Hoefler Text",Garamond,serif;
  --sans:"Helvetica Neue","Inter",Arial,sans-serif;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
  --rail:66px;
  --gut:clamp(20px,5vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.curve{line-height:0;background:var(--paper)}
.curve svg{width:100%;height:clamp(28px,6vw,80px);display:block}
.snav{
  position:fixed!important;
  left:clamp(16px,2vw,28px)!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:305!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:clamp(20px,2.8vh,40px)!important;
  font-family:var(--mono)!important;
  font-size:10.5px!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
  color:#fff!important;
  mix-blend-mode:difference!important;
  pointer-events:auto!important;
  opacity:0;
  transition:opacity .7s cubic-bezier(.16,1,.3,1) .05s;
}
html.hdr-in .snav{opacity:1}
.snav a{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:currentColor;
  position:relative;
  padding:2px 3px;
  white-space:nowrap;
  transition:opacity .3s;
}
.snav a::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:-4px;
  width:1px;
  background:currentColor;
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.snav a:hover::after, .snav a.on::after{transform:scaleY(1)}
.snav a:hover{opacity:.65}
.snavtog{display:none}

@media (max-width:900px){
  /* 44px tap target */
  .snavtog{
    display:block!important;
    position:fixed!important;
    top:calc(clamp(18px,2.2vh,24px) - 12px)!important;
    right:calc(clamp(22px,4vw,54px) - 14px)!important;
    z-index:306!important;
    background:none!important;
    border:0!important;
    cursor:pointer!important;
    padding:16px 14px!important;
    font-family:var(--mono)!important;
    font-size:11px!important;
    letter-spacing:.2em!important;
    text-transform:uppercase!important;
    color:#fff!important;
    mix-blend-mode:difference!important;
    opacity:0;
    transition:opacity .7s cubic-bezier(.16,1,.3,1) .05s;
  }
  html.hdr-in .snavtog{opacity:1}
  .snav{
    left:auto!important;
    right:clamp(22px,4vw,54px)!important;
    top:calc(clamp(18px,2.2vh,24px) + 30px)!important;
    transform:none!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    gap:12px!important;
    background:var(--paper)!important;
    color:var(--ink)!important;
    mix-blend-mode:normal!important;
    border:1px solid var(--line)!important;
    padding:16px 18px!important;
    font-size:11px!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .25s ease!important;
  }
  .snav a{writing-mode:horizontal-tb!important;transform:none!important}
  .snav a::after{
    top:auto!important;
    bottom:-2px!important;
    right:0!important;
    left:0!important;
    width:auto!important;
    height:1px!important;
    transform:scaleX(0)!important;
    transform-origin:left!important;
  }
  .snav a:hover::after, .snav a.on::after{transform:scaleX(1)!important}
  html.snav-open .snav{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
}

.curve{margin-bottom:-1px!important}
.curve svg{display:block;margin-bottom:-1px}

@media (hover:hover) and (pointer:fine){
  html.cur-on, html.cur-on *{cursor:none!important}
  .cur{
    position:fixed;
    top:0;
    left:0;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff;
    mix-blend-mode:difference;
    pointer-events:none;
    z-index:2147483000;
    transform:translate3d(-200px,-200px,0) translate(-50%,-50%);
    will-change:transform;
    opacity:0;
    transition:width .3s cubic-bezier(.16,1,.3,1),height .3s cubic-bezier(.16,1,.3,1),opacity .3s ease;
  }
  html.cur-on .cur{opacity:1}
  .cur.big{width:58px;height:58px}
  .cur.sm{width:7px;height:7px}
}

@media (prefers-reduced-motion:reduce){
  .cur{display:none!important}
  html.cur-on, html.cur-on *{cursor:auto!important}
}

button{background:none;border:0;appearance:none;-webkit-appearance:none;font:inherit;color:inherit;cursor:pointer}

@media (max-width:760px){
  .footer .services{max-width:none}
}

/* footer spacing */
.footer{row-gap:clamp(30px,4.2vw,58px)}
.footer .cinvite{margin:0;align-self:start}
.footer .lines{margin:0;align-self:start}
.footer .services{margin:0}
.footer .bigmark{margin:clamp(20px,3vw,42px) 0 clamp(20px,3vw,34px)}

@media (max-width:760px){
  .footer{row-gap:clamp(22px,5vw,34px)}
}

/* keyboard focus ring, site-wide */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--bronze);
  outline-offset:3px;
  border-radius:2px;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.serif{font-family:var(--serif)}
.it{font-style:italic}
/* ---------- INTRO ---------- */
.intro{
  position:fixed;
  inset:0;
  z-index:200;
  background:var(--paper);
  display:grid;
  place-items:center;
  overflow:hidden;
  cursor:pointer;
}
.intro .iwm{
  font-family:var(--serif);
  font-size:clamp(52px,13vw,128px);
  line-height:.86;
  letter-spacing:-.025em;
  color:var(--ink);
  text-align:center;
}
.intro .iwm .it{font-style:italic}
.intro .isub{
  margin-top:22px;
  font-family:var(--mono);
  font-size:clamp(9px,1.4vw,11px);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--soft);
  opacity:0;
  text-align:center;
}
.intro .icount{
  position:absolute;
  bottom:clamp(24px,4vw,42px);
  right:clamp(26px,5vw,52px);
  font-family:var(--mono);
  font-size:clamp(11px,1.5vw,14px);
  letter-spacing:.1em;
  color:var(--soft);
}
.intro .iline{
  position:absolute;
  bottom:clamp(30px,4.4vw,50px);
  left:clamp(26px,5vw,52px);
  width:clamp(80px,20vw,240px);
  height:1px;
  background:var(--line2);
  transform-origin:left;
}
.intro .iline i{display:block;height:100%;background:var(--olive);transform:scaleX(0);transform-origin:left}
.intro .iwm{font-family:GSIntro,Didot,serif}
.intro .iwm .iln{display:block;color:#18160F;font-variation-settings:'opsz' 144,'wght' 100}
.intro .iwm .iln.it{font-style:italic;color:#5B5B3B}
.intro .isub{display:none!important}
.intro .iline{display:none!important}
.intro .icount{left:50%;right:auto;transform:translateX(-50%);text-align:center}
.h2{font-family:var(--serif);font-size:clamp(52px,9vw,112px);line-height:.9;letter-spacing:-.03em;color:var(--ink)}
.h2 .it{font-style:italic;color:var(--olive)}
/* ---------- APERTURA ---------- */
.hero{
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  grid-template-columns:1fr;
  align-content:center;
  gap:clamp(24px,4vw,40px);
  padding-top:clamp(90px,12vh,140px);
}
.hero .eye{
  font-family:var(--mono);
  font-size:clamp(9px,1.1vw,11px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--soft);
}

@media (min-width:1000px){
  .hero{
    grid-template-columns:1fr min(27vw,400px);
    grid-template-areas:"eye photo""wm photo""q photo""foot photo";
    align-items:center;
    column-gap:clamp(30px,4vw,60px);
    padding-right:0;
  }
  .hero .eye{grid-area:eye;align-self:end}
}

.footer .cinvite{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(18px,1.9vw,26px);
  line-height:1.42;
  max-width:32ch;
  color:#F4F1E8;
  opacity:.94;
  margin:20px 0 16px;
}
.footer .services{
  font-family:var(--mono);
  font-size:clamp(9px,1vw,11px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(244,241,232,.62);
  max-width:46ch;
  line-height:2;
  margin-bottom:28px;
}
/* ---------- FOOTER ---------- */
.footer{
  background:var(--spine);
  color:var(--cream);
  padding-top:clamp(60px,8vw,110px);
  padding-bottom:clamp(30px,4vw,44px);
  overflow:hidden;
}
.footer .eyerow{color:rgba(244,241,232,.62)}
.footer .h2{color:var(--cream)}
.footer .h2 .it{color:#C7C49B}
.footer .lines{
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.7;
  color:#EDEAD9;
  margin:clamp(28px,4vw,42px) 0;
}
.footer .lines .k{
  display:inline-block;
  min-width:120px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(244,241,232,.7);
}
.footer .bigmark{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(44px,12.6vw,182px);
  line-height:.82;
  letter-spacing:-.035em;
  color:var(--cream);
  margin:clamp(44px,7vw,90px) 0 clamp(30px,4vw,46px);
  white-space:nowrap;
}
.footer .bigmark .it{font-style:italic;color:#C7C49B}
.footer .fbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(244,241,232,.7);
}

@media (min-width:761px){
  #contatti{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    column-gap:clamp(48px,6vw,100px);
    grid-template-areas:"eye eye" "hh hh" "inv con" "srv con" "big big" "bar bar";
    align-items:start;
  }
  #contatti .eyerow{grid-area:eye}
  #contatti .h2{grid-area:hh}
  #contatti .cinvite{grid-area:inv;margin-top:10px}
  #contatti .services{grid-area:srv;align-self:start;margin-bottom:0;max-width:52ch;text-wrap:balance}
  #contatti .invcol > .ccta:first-child{margin-top:0}
  #contatti .lines{grid-area:con;margin:10px 0 0}
  #contatti .bigmark{grid-area:big}
  #contatti .fbar{grid-area:bar}
}

.footer .fbar a{color:rgba(244,241,232,.7)}

@media (max-width:760px){
  main{margin-left:0;padding-top:52px}
}

/* hide section eyebrows */
.eyerow{display:none!important}
.services .sw{white-space:nowrap}
.services .sw:not(:last-child)::after{content:" \00B7";color:rgba(244,241,232,.34)}
.footer .lines{font-family:var(--mono);font-size:clamp(12px,1.15vw,14px);letter-spacing:.04em;line-height:2.9}

@media (min-width:1600px){
  main{margin-left:calc((100vw - 1560px) / 2 + var(--rail));margin-right:calc((100vw - 1560px) / 2)}
}

main{
  margin-left:0!important;
  margin-right:0!important;
  max-width:1560px!important;
  margin-inline:auto!important;
  padding-top:0!important;
}
.gs{
  position:fixed!important;
  top:clamp(20px,2.4vh,27px)!important;
  left:clamp(22px,4vw,54px)!important;
  z-index:305!important;
  font-family:var(--serif)!important;
  font-size:clamp(22px,2vw,28px)!important;
  line-height:1!important;
  color:#fff!important;
  mix-blend-mode:difference!important;
  pointer-events:auto!important;
}
.gs i{font-style:italic}
.gs{opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1) .05s}
html.hdr-in .gs{opacity:1}
html.nav-open .gs{opacity:0!important;pointer-events:none!important}
.rprog2{
  position:fixed;
  top:0;
  left:0;
  height:2px;
  width:0;
  background:var(--bronze);
  z-index:310;
  transition:width .12s linear;
  box-shadow:0 0 8px rgba(133,101,57,.5);
}

@media (prefers-reduced-motion:reduce){
  .rprog2{transition:none}
}

html:not(.js) .intro{display:none!important}
/* explicit line breaks on desktop */
.footer .cinvite{max-width:none}

@media (max-width:900px){
  .footer .cinvite{max-width:38ch}
  .cinvite br.bo{display:none}
}

@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtout .42s cubic-bezier(.4,0,.2,1) both}
  ::view-transition-new(root){animation:vtin .5s cubic-bezier(.16,1,.3,1) both}
  @keyframes vtout{
    to{opacity:0}
  }
  @keyframes vtin{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:none}
  }
  a.gs{view-transition-name:gsmark}
  ::view-transition-group(gsmark){animation-duration:.5s}
}

/* ---------- LEDE CASCADE ---------- */
.lead.l2 span{display:block}
.lead.l2 .l2b{margin-left:clamp(22px,4vw,80px)}
.lead.l2 .l2c{margin-left:clamp(44px,8vw,160px)}

@media (max-width:760px){
  .lead.l2 .l2b{margin-left:clamp(14px,4vw,32px)}
  .lead.l2 .l2c{margin-left:clamp(28px,8vw,64px)}
}

.ptable{list-style:none;margin:0;padding:0}
.prow{transition:background .3s ease}
.prow:hover{background:var(--bone)}
/* ---------- CONTACT CTA ---------- */
#contatti .invcol{grid-area:inv}
#contatti .ccta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin:clamp(22px,3vw,34px) 0 clamp(26px,3.4vw,40px);
  padding:clamp(6px,.8vw,10px) 0;
  font-family:var(--mono);
  font-size:clamp(10px,1vw,11.5px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cream);
  text-decoration:none;
  transition:color .3s ease,border-color .3s ease;
}
#contatti .ccta span{flex:0 0 auto}
#contatti .ccta .arr{flex:1 1 auto;position:relative;height:1px;background:currentColor;opacity:.85;transform-origin:left center;transition:opacity .3s ease}
#contatti .ccta .arr::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);transition:transform .4s cubic-bezier(.16,1,.3,1)}
#contatti .ccta:hover{color:#C9A664}
#contatti .ccta:hover .arr{opacity:1}
#contatti .ccta:hover .arr::after{transform:translateX(6px) rotate(45deg)}

@media (max-width:760px){
  .services .sw{display:block}
  .services .sw:not(:last-child)::after{content:none}
}

@media print{
  .intro, .curve, .viewer{display:none!important}
  main{margin-left:0!important}
  html.js .rvf, html.js .rv{opacity:1!important;transform:none!important}
  .rvl .word, .rvl .char, .mlc b, .ml b{transform:none!important;opacity:1!important}
  section{break-inside:avoid;padding:18pt 0}
  .footer, .foot{background:none!important;color:#18160F!important}
  .footer a, .foot a{color:#18160F!important}
  img{max-width:100%!important;page-break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#736E5F}
}

/* max width 1560px */
.curve, .footer{margin-inline:min(0px, calc((1560px - 100vw) / 2))}
.footer{padding-inline:calc(var(--gut) + max(0px, (100vw - 1560px) / 2))}