/* Caratteri ospitati sul sito (SIL Open Font License) */
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cinzel-400.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cinzel-500.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cinzel-600.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader.woff2) format("woff2-variations"),url(fonts/newsreader.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-italic.woff2) format("woff2-variations"),url(fonts/newsreader-italic.woff2) format("woff2")}
:root{
  --paper:#FFF7E6;
  --paper-2:#FCEBC2;
  --ink:#3B0A14;
  --ink-2:#5B1A26;
  --mute:#8E1B2E;
  --rule:#EDCB8C;
  --night:#8E1B2E;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --roman:"Cinzel","Trajan Pro","Times New Roman",serif;
  --wrap:1180px;
  --gut:clamp(16px,4vw,48px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--paper);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand svg{width:40px;height:46px;flex:none}
.brand-txt{font-family:var(--roman);line-height:1.15;letter-spacing:.06em}
.brand-txt small{display:block;font-size:10px;letter-spacing:.24em;color:var(--mute)}
.brand-txt span{font-size:15px;font-weight:600}
nav.menu{display:flex;gap:4px 22px;flex-wrap:wrap}
nav.menu a{font-family:var(--roman);font-size:12px;letter-spacing:.18em;text-decoration:none;padding-block:6px;border-bottom:1px solid transparent;color:var(--ink-2)}
nav.menu a:hover{border-bottom-color:var(--ink)}
nav.menu a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

/* Type */
.eyebrow{font-family:var(--roman);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin:0 0 18px}
h1,h2,h3{font-weight:400;text-wrap:balance;margin:0}
h1{font-family:var(--roman);font-size:clamp(34px,5.4vw,66px);line-height:1.05;letter-spacing:.02em}
h2{font-size:clamp(30px,3.6vw,46px);line-height:1.12;letter-spacing:-.01em}
h3{font-size:24px;line-height:1.25}
p{margin:0}
.lede{font-size:clamp(20px,2vw,24px);line-height:1.5;color:var(--ink-2);max-width:34em}
.prose{max-width:36em;display:grid;gap:1em;color:var(--ink-2)}
em.it{font-style:italic}

/* Sections */
section{padding-block:clamp(56px,8vw,112px)}
section.tight{padding-block:clamp(40px,5vw,72px)}
.rule{border-top:1px solid var(--rule)}
.dark{background:var(--night);color:#FFF3D6}
.dark .eyebrow{color:#F2B632}
.dark .prose,.dark .lede{color:#FBE0C4}

/* Hero (home) */
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:end}
.hero figure{margin:0}
.hero img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.hero-txt{display:grid;gap:26px;padding-bottom:8px}
.title-roman{font-family:var(--roman);font-size:13px;letter-spacing:.28em;color:var(--mute)}
.hero .sub{font-size:20px;color:var(--ink-2);max-width:26em}
.anno{font-family:var(--roman);font-size:15px;letter-spacing:.4em}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{font-family:var(--roman);font-size:12px;letter-spacing:.2em;text-decoration:none;padding:14px 22px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:background .2s,color .2s}
.btn.ghost{background:transparent;color:var(--ink)}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.dark .btn{background:#FFF3D6;color:var(--night);border-color:#FFF3D6}
.dark .btn:hover{background:transparent;color:#FFF3D6}

/* Quote */
.quote{font-size:clamp(30px,4.4vw,58px);line-height:1.12;font-style:italic;max-width:18em;text-wrap:balance}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:end;margin-top:40px}

/* Three lenses */
.lenses{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #B24A58;margin-top:48px}
.lens{padding:28px 28px 8px 0;display:grid;gap:12px;align-content:start}
.lens + .lens{border-left:1px solid #B24A58;padding-left:28px}
.lens .k{font-family:var(--roman);font-size:13px;letter-spacing:.22em;color:#F2B632}
.lens h3{color:#FFF3D6}
.lens p{color:#FBE0C4;font-size:17px}
.ref{font-family:var(--roman);font-size:11px;letter-spacing:.14em;color:#F2B632}
.case{font-size:clamp(24px,3vw,36px);font-style:italic;line-height:1.25;max-width:22em}

/* Cufflinks */
.cuffs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,24px)}
.cuffs figure{margin:0;position:relative}
.cuffs img{width:100%;aspect-ratio:1/1;object-fit:cover}
.cuffs figcaption{position:absolute;left:0;bottom:0;background:var(--paper);padding:10px 16px;font-family:var(--roman);font-size:13px;letter-spacing:.24em}

/* Area cards (home) */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:44px}
.area{display:grid;grid-template-columns:1fr;gap:20px;align-content:start;text-decoration:none;align-items:stretch;border-top:1px solid var(--ink);padding-top:24px}
.area img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%}
.area div{display:grid;gap:12px;align-content:start}
.area p{color:var(--ink-2);font-size:17px}
.more{font-family:var(--roman);font-size:12px;letter-spacing:.2em;margin-top:6px}
.area:hover .more{text-decoration:underline}

/* Page head */
.phead{padding-block:clamp(48px,7vw,96px) 0}
.phead .wrap{display:grid;gap:22px}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start}
.split.rev{grid-template-columns:1.1fr .9fr}
.split figure{margin:0}
.split img{width:100%;object-fit:cover}
.sticky{position:sticky;top:110px}

/* Lists of competence */
.items{display:grid;border-top:1px solid var(--rule)}
.item{display:grid;grid-template-columns:5.5em 1fr;gap:20px;padding-block:22px;border-bottom:1px solid var(--rule)}
.item .n{font-family:var(--roman);font-size:13px;letter-spacing:.18em;color:var(--mute);padding-top:6px}
.item div{display:grid;gap:8px}
.item p{color:var(--ink-2);font-size:17px}

.creds{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--rule)}
.cred{padding:22px 24px 22px 0;border-bottom:1px solid var(--rule);display:grid;gap:6px}
.cred:nth-child(even){padding-left:24px;border-left:1px solid var(--rule)}
.cred .k{font-family:var(--roman);font-size:11px;letter-spacing:.2em;color:var(--mute)}

.band{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}

/* Contacts */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
.cl{display:grid;border-top:1px solid var(--ink)}
.cl .row{display:grid;grid-template-columns:8em 1fr auto;gap:16px;align-items:baseline;padding-block:18px;border-bottom:1px solid var(--rule)}
.cl .k{font-family:var(--roman);font-size:11px;letter-spacing:.2em;color:var(--mute)}
.cl .v{font-size:19px;overflow-wrap:anywhere;user-select:all}
.copy{font-family:var(--roman);font-size:10px;letter-spacing:.18em;background:none;border:1px solid var(--rule);padding:6px 10px;cursor:pointer;color:var(--ink-2)}
.copy:hover{border-color:var(--ink);color:var(--ink)}
.note{font-size:15px;color:var(--mute);max-width:34em}

/* Footer */
footer{background:var(--night);color:#FBE0C4;padding-block:56px 40px;font-size:15px}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
footer .brand-txt span{color:#FFF3D6}
footer .k{font-family:var(--roman);font-size:11px;letter-spacing:.2em;color:#F2B632;margin-bottom:10px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
footer .legal{grid-column:1/-1;border-top:1px solid #B24A58;padding-top:22px;font-size:13px;color:#F2B632;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}

/* Load motion */
@media (prefers-reduced-motion:no-preference){
  .hero img,.phead h1{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero-txt>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero-txt>*:nth-child(2){animation-delay:.08s}
  .hero-txt>*:nth-child(3){animation-delay:.16s}
  .hero-txt>*:nth-child(4){animation-delay:.24s}
  .hero-txt>*:nth-child(5){animation-delay:.32s}
  @keyframes rise{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* Responsive */
@media (max-width:900px){
  .hero .wrap,.quote-grid,.split,.split.rev,.contact,.areas{grid-template-columns:1fr}
  .lenses{grid-template-columns:1fr}
  .lens + .lens{border-left:0;padding-left:0;border-top:1px solid #B24A58}
  .sticky{position:static}
  footer .wrap{grid-template-columns:1fr 1fr}
  footer .wrap>div:first-child{grid-column:1/-1}
  .band{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:17px}
  .top .wrap{gap:10px}
  nav.menu{gap:2px 16px}
  nav.menu a{font-size:11px;letter-spacing:.12em}
  .area{grid-template-columns:1fr}
  .area img{aspect-ratio:3/2}
  .creds{grid-template-columns:1fr}
  .cred:nth-child(even){padding-left:0;border-left:0}
  .item{grid-template-columns:1fr;gap:6px}
  .cl .row{grid-template-columns:1fr auto}
  .cl .k{grid-column:1/-1}
  footer .wrap{grid-template-columns:1fr}
  .cuffs figcaption{font-size:11px;padding:8px 10px}
}

/* Scudo */
.brand .shield{height:52px;width:auto;flex:none}
@media (max-width:600px){.brand .shield{height:44px}}
.creds.one{grid-template-columns:1fr}.creds.one .cred{padding-inline:0;border-left:0}

/* Giallorosso */
.top{background:#8E1B2E;border-bottom:5px solid #F2B632}
.top .brand-txt span{color:#FFF3D6}
.top .brand-txt small{color:#F2B632}
nav.menu a{color:#FBE0C4}
nav.menu a:hover{border-bottom-color:#F2B632;color:#FFF3D6}
nav.menu a[aria-current="page"]{color:#F2B632;border-bottom-color:#F2B632}
a:focus-visible,button:focus-visible{outline-color:#F2B632}
.btn{background:#F2B632;border-color:#F2B632;color:#3B0A14}
.btn:hover{background:#8E1B2E;border-color:#8E1B2E;color:#FFF3D6}
.btn.ghost{background:transparent;border-color:#8E1B2E;color:#8E1B2E}
.btn.ghost:hover{background:#8E1B2E;color:#FFF3D6}
.dark .btn{background:#F2B632;border-color:#F2B632;color:#3B0A14}
.dark .btn:hover{background:transparent;color:#F2B632}
.dark .case,.quote{color:inherit}
.quote{color:#8E1B2E}
h1{color:#8E1B2E}
.anno{color:#8E1B2E}
.area{border-top:4px solid #F2B632}
.area:hover h3{color:#8E1B2E}
.item .n{color:#8E1B2E;font-weight:600}
.cuffs figcaption{background:#F2B632;color:#3B0A14}
.cl{border-top:4px solid #F2B632}
footer{border-top:5px solid #F2B632}
footer .legal{border-top-color:#B24A58}

/* Pagine area: layout comune */
.area-body{padding-top:clamp(36px,5vw,64px)}
.area-fig{margin:0;position:sticky;top:110px}
.area-fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.area-col{display:grid;gap:22px;align-content:start}
.area-col .creds{margin-top:18px}
.band .case{font-size:clamp(22px,2.6vw,32px)}
.dark .btn.ghost{background:transparent;color:#FFF3D6;border-color:#FFF3D6}
.dark .btn.ghost:hover{background:#FFF3D6;color:#8E1B2E}
@media (max-width:900px){
  .area-fig{position:static}
  .area-fig img{aspect-ratio:4/3}
}
.area-note{margin-top:8px}
.dark .quote{color:#FFF3D6}

.cl .v a{text-decoration:none}
.cl .v a:hover{text-decoration:underline}

/* Fascia superiore: telefono e lingua */
.util{background:#6E1424;color:#FBE0C4;font-family:var(--roman);font-size:11px;letter-spacing:.16em}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px}
.util a{color:inherit;text-decoration:none}
.util span a:hover{color:#F2B632}
.lang{display:flex;align-items:center;gap:6px}
.lang a{display:block;line-height:0;padding:2px;border-radius:50%;border:1px solid transparent;transition:border-color .2s}
.lang img{width:18px;height:18px;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(255,243,214,.5);transition:filter .2s,opacity .2s}
.lang a:not([aria-current]) img{filter:saturate(.35);opacity:.75}
.lang a:hover img,.lang a:focus-visible img{filter:none;opacity:1}
.lang a[aria-current]{border-color:#F2B632}
.lang a:hover{border-color:rgba(242,182,50,.6)}

footer .legal a{color:inherit}
.legal-page h2{font-family:var(--roman);font-size:clamp(16px,1.6vw,19px);letter-spacing:.12em;color:#8E1B2E;margin:1.6em 0 .2em}
.legal-page ul{margin:0;padding-left:1.2em;display:grid;gap:.4em}
.legal-page a{color:#8E1B2E}
