:root{
  --terra:#241912;   /* terra scura */
  --argilla:#3A281C; /* filetti su fondo scuro */
  --rame:#B87645;    /* colore del logo */
  --luce:#F3E3B8;    /* luce tra le foglie */
  --foglia:#9CA94A;  /* verde delle foglie in controluce */
}
*{box-sizing:border-box;margin:0}
html{background:var(--terra);color:var(--luce);-webkit-text-size-adjust:100%}
body{font-family:"Karla",system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;min-height:100svh}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--foglia);outline-offset:4px}

.skip{position:absolute;left:1rem;top:-4rem;background:var(--luce);color:var(--terra);padding:.5rem 1rem;z-index:10}
.skip:focus{top:1rem}

.page{display:grid;grid-template-columns:5fr 7fr;min-height:100svh}

/* foto con i pali che si alzano */
.photo{position:relative;order:2;overflow:hidden;min-height:100svh}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.pali{position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,1fr);pointer-events:none}
.pali i{background:var(--terra);transform-origin:top;animation:alza 1.6s cubic-bezier(.7,0,.2,1) both;animation-delay:calc(var(--n)*90ms + .2s)}
@keyframes alza{to{transform:scaleY(0)}}

.text{display:flex;flex-direction:column;justify-content:space-between;gap:3rem;padding:clamp(2rem,5vw,4.5rem)}
.logo{width:min(300px,70%)}
.indirizzo{font-family:"Gloock",serif;font-weight:400;font-size:clamp(1.9rem,3.3vw,3rem);line-height:1.08;letter-spacing:-.01em;color:var(--luce)}
.indirizzo span{display:block;color:var(--rame)}

.contatti{margin-top:2.25rem;max-width:26rem}
.contatti div{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid var(--argilla)}
.contatti div:last-child{border-bottom:1px solid var(--argilla)}
.contatti dt{color:var(--rame);font-weight:600}
.contatti dd a{text-decoration:none;display:block}
.contatti dd a:hover{color:var(--foglia)}

.partner{font-size:.95rem;color:#C9B995}
.partner ul{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;list-style:none;padding:0;margin-top:.35rem}
.partner a{text-decoration-color:var(--rame);text-underline-offset:.3em}
.partner a:hover{color:var(--foglia)}
.copy{margin-top:1.25rem;font-size:.85rem;color:#8F8167}

@media (max-width:859px){
  .page{grid-template-columns:1fr}
  .photo{order:0;min-height:0;height:52svh}
  .text{gap:2.5rem}
  .logo{width:min(240px,64%)}
}
@media (prefers-reduced-motion:reduce){
  .pali{display:none}
}