body.ky{background:var(--sale-ky);color:var(--ink-ky)}
.ky{--hair:rgba(38,35,30,.13)}

.apertura{
  min-height:74vh;
  padding:44px var(--bordo-dx) 72px var(--bordo-sx);
  display:grid;grid-template-rows:auto 1fr;row-gap:40px;
}
.apertura__casa{justify-self:start}
.apertura__blocco{align-self:center;max-width:820px}
.apertura__tag{opacity:var(--o-riposo);margin-bottom:26px}
.marchione{margin:0}
.wm2--porta{font-size:78px}
.wm2--testa{font-size:26px}
a.wm2--testa{display:inline-block;border-radius:0;flex:none}
.marchione--testo{font-weight:800;font-size:96px;line-height:.94;letter-spacing:-.035em;text-transform:uppercase}
.apertura__riga{margin-top:34px;font-weight:100;font-size:19px;line-height:1.55;max-width:420px}
.apertura__scheda{margin-top:44px;justify-content:start}
.apertura__ai{opacity:var(--o-ai);font-size:var(--t-micro);line-height:1.55;margin-top:26px}

.barca{
  position:relative;
  padding:34px var(--bordo-dx) 150px var(--bordo-sx);
  display:grid;grid-template-columns:1fr 310px;column-gap:96px;align-items:center;
}
.barca__num{position:absolute;left:var(--bordo-sx);top:0;opacity:.42}
.nome{font-weight:800;font-size:38px;letter-spacing:-.02em;text-transform:uppercase;line-height:1}
.riga{margin-top:18px;font-weight:100;font-size:17px;line-height:1.5}
.barca__testo .scheda{margin-top:40px}
.barca__testo .gesto{margin-top:44px}
.barca__figura{margin:0}
.barca__figura img{width:100%;height:auto}

.barca--fascia{grid-template-columns:1fr;row-gap:44px;padding-top:34px}
.barca--fascia .barca__num{top:0}
.barca__testo--alto{display:flex;align-items:baseline;gap:56px;flex-wrap:wrap}
.barca__figura--larga img{width:100%}
.scheda--riga{
  display:grid;grid-auto-flow:column;grid-auto-columns:max-content;
  grid-template-columns:none;
  grid-template-rows:auto auto;column-gap:56px;row-gap:9px;
  border-top:1px solid var(--hair);padding-top:22px;
}
.scheda--riga dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.scheda--riga dd{font-size:16px}
.barca__gesto{justify-self:start}

.barca--interno{grid-template-columns:270px 1fr;column-gap:110px}

.ky.porta .barca{
  min-height:100svh;
  align-content:center;
  padding-bottom:0;
}
.ky.porta .barca--fascia{align-content:end;padding-bottom:6svh}
.ky.porta .barca--interno{align-content:start;padding-top:12svh}

.due{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - var(--barra-fondo,98px))}
.lato{
  position:relative;display:grid;place-items:center;
  min-height:calc(100svh - var(--barra-fondo,98px));overflow:hidden;color:inherit;
  -webkit-touch-callout:none;user-select:none;
}
.lato__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lato::after{
  content:"";position:absolute;inset:0;background:#000;
  opacity:.70;pointer-events:auto;transition:opacity var(--d-breve) var(--c-esce);   
}
.lato__parola{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;min-height:var(--tocco-min);
  padding:.10em .26em .14em;border-radius:var(--raggio);
  color:#fff;background:transparent;
  font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;
  font-size:78px;line-height:1;text-transform:uppercase;letter-spacing:.01em;
  transition:opacity var(--d-breve) var(--c-esce);
}
.lato:active::after,.lato:focus-visible::after{opacity:0;transition-duration:var(--d-tocco)}
.lato:active .lato__parola,.lato:focus-visible .lato__parola{opacity:0}
@media (hover:hover) and (pointer:fine){
  .lato:hover::after{opacity:0}
  .lato:hover .lato__parola{opacity:0}
}
.lato:focus-visible{outline:2px solid #fff;outline-offset:-10px;border-radius:0}
@media (prefers-reduced-motion:reduce){
  .lato::after,.lato__parola{transition:none}
}

.bivio__testa{
  position:absolute;left:var(--bordo-sx);top:40px;z-index:2;
  pointer-events:none;color:#fff;
  background:transparent;border-radius:0;padding:0;
}
.bivio__ai{opacity:var(--o-ai);font-size:var(--t-micro);letter-spacing:.01em;line-height:1.55;margin-top:8px;max-width:52ch}

.indice-capitolo{display:block}
.barca__capitolo{
  margin-left:1.6em;font-weight:400;font-size:var(--t-micro);
  letter-spacing:.2em;text-transform:uppercase;
}

a.barca{display:grid;color:inherit}
@media (hover:hover) and (pointer:fine){
  a.barca:hover .gesto{opacity:.6}
  a.barca:hover .nome{opacity:.72}
}
a.barca:focus-visible{outline:2px solid currentColor;outline-offset:8px;border-radius:var(--raggio)}
a.barca:focus-visible .gesto{opacity:.6}
a.barca:focus-visible .nome{opacity:.72}

.testa-barca{
  padding:40px var(--bordo-dx) 0 var(--bordo-sx);
  display:flex;justify-content:space-between;align-items:center;gap:40px;
}
.logo-porta{width:180px}
.apertura--barca{min-height:auto;padding-top:56px;padding-bottom:96px;grid-template-rows:1fr}

.lastra{padding:30px var(--bordo-dx) 132px var(--bordo-sx);position:relative}
.lastra__num{position:absolute;left:var(--bordo-sx);top:0;opacity:.42}
.lastra__figura{margin:0}
.lastra__figura img{width:100%;height:auto}
.lastra--coppia{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-items:start}
.lastra--coppia .didascalia{grid-column:1/-1}
.didascalia{
  margin-top:20px;font-weight:100;font-size:16px;line-height:1.5;opacity:.72;
}

.salone{padding:30px var(--bordo-dx) 120px var(--bordo-sx);position:relative}
.nome--salone{margin-top:0}
.riga--salone{margin-top:16px;max-width:420px}
.salone__grande{margin:46px 0 0}
.salone__grande img{width:100%;height:auto}
.salone__coppia{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;margin-top:28px}
.salone .scheda--riga{margin-top:52px}
.salone--rovescio .salone__coppia{margin-top:46px}
.salone--rovescio .salone__grande{margin-top:28px}
.salone__coppia--uno{grid-template-columns:1fr 1fr}

.piede-ky{
  padding:40px var(--bordo-dx) calc(84px + env(safe-area-inset-bottom)) var(--bordo-sx);
  border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;align-items:baseline;gap:32px;flex-wrap:wrap;
}
.piede-ky .dove,
.piede .dove{font-weight:400;font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.55}

@media (max-width:768px){
  .apertura{min-height:auto;padding:30px var(--bordo-dx) 56px var(--bordo-sx);row-gap:52px}
  .apertura__tag{margin-bottom:18px}
  .wm2--porta{font-size:38px}
  .wm2--testa{font-size:19px}
  .marchione--testo{font-size:36px;letter-spacing:-.025em}
  .apertura__scheda{margin-top:30px}
  .apertura__riga{margin-top:24px;font-size:16px;max-width:none}
  .apertura__ai{font-size:var(--t-micro);letter-spacing:.01em}

  .barca,
  .barca--fascia,
  .barca--interno{
    grid-template-columns:1fr;row-gap:26px;
    padding:0 var(--bordo-dx) 78px var(--bordo-sx);
  }
  .ky.porta .barca{padding:4svh var(--bordo-dx) 4svh var(--bordo-sx)}
  .ky.porta .barca--fascia{padding-top:2svh;padding-bottom:9svh}
  .ky.porta .barca--interno{padding-top:11svh;padding-bottom:2svh}
  .due{grid-template-columns:1fr;min-height:100svh}
  .lato{min-height:50svh}
  .lato__parola{font-size:34px}
  .bivio__testa{top:22px;padding:12px 14px 13px;max-width:calc(100vw - 2 * var(--bordo-sx))}
  .barca__capitolo{margin-left:1.2em}
  .barca__num{position:static;display:block;opacity:.42;margin-bottom:14px}
  .barca--fascia .barca__num{margin-bottom:0}
  .nome{font-size:27px}
  .riga{font-size:16px;margin-top:14px}
  .barca__testo .scheda{margin-top:26px}
  .barca__testo .gesto{margin-top:28px}
  .barca__testo--alto{display:block}
  .barca__testo--alto .riga{margin-top:14px;max-width:none}
  .scheda--riga{
    grid-auto-flow:row;grid-template-rows:none;
    grid-template-columns:auto 1fr;justify-content:start;
    gap:12px 26px;padding-top:18px;
  }
  .piede-ky{
    padding:32px var(--bordo-dx) calc(48px + env(safe-area-inset-bottom)) var(--bordo-sx);
    flex-direction:column;gap:18px;align-items:flex-start;
  }

  .testa-barca{padding:26px var(--bordo-dx) 0 var(--bordo-sx);gap:18px}
  .logo-porta{width:112px}
  .apertura--barca{padding-top:40px;padding-bottom:62px}
  .lastra{padding:0 var(--bordo-dx) 68px var(--bordo-sx)}
  .salone{padding-top:0}
  .lastra__num{position:static;display:block;margin-bottom:14px}
  .lastra--coppia{grid-template-columns:1fr;row-gap:16px}
  .didascalia{margin-top:14px;font-size:16px}
  .salone{padding:0 var(--bordo-dx) 66px var(--bordo-sx)}
  .salone__grande{margin-top:28px}
  .salone__coppia{grid-template-columns:1fr;row-gap:16px;margin-top:16px}
  .salone .scheda--riga{margin-top:32px}
}