/* Direzione 2: impaginazione editoriale, immagini e tipografia su scala ampia. */
:root {
  --ink:#172630;
  --soft:#52616b;
  --line:#c7cdc8;
  --paper:#edf0e9;
  --blue:#0064a3;
  --green:#95c11f;
  --pink:#e6007e;
}
body { background:#f9f8f3; }
.wrap { width:min(1430px,calc(100% - 104px)); }
.top.wrap { width:100%; max-width:none; padding-inline:clamp(32px,5vw,90px); height:128px; background:#f9f8f3; border-bottom:1px solid var(--ink); }
.top nav { gap:38px; font-size:12px; letter-spacing:.12em; }
.top nav a { border-bottom:2px solid transparent; padding:10px 0; }
.top nav a:hover, .top nav a[aria-current="page"] { color:var(--ink); border-color:var(--pink); }
.logo img { width:141px; }
.eyebrow { letter-spacing:.18em; font-size:11px; }
.arrow-link { border-bottom-width:2px; padding-bottom:13px; }

/* Home: una grande apertura tipografica scura. */
.hero.wrap { width:100%; max-width:none; padding:85px clamp(32px,5vw,90px) 90px; min-height:700px; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(270px,.55fr); gap:5vw; align-items:end; background:var(--ink); color:#fff; position:relative; }
.hero::before { content:"STUDIO CALABIANA / MILANO"; position:absolute; top:45px; right:clamp(32px,5vw,90px); font-size:11px; letter-spacing:.2em; color:#9eadb3; }
.hero h1 { max-width:1070px; font-size:clamp(80px,8.2vw,145px); line-height:.96; letter-spacing:-.085em; font-weight:600; }
.hero h1 span { color:#bed95d; }
.hero .eyebrow { color:#aec0c6; }
.hero-side { max-width:370px; }
.hero-side p { font-size:21px; line-height:1.48; }
.hero .arrow-link { border-color:#fff; }

.work { background:#f9f8f3; padding:114px 0 130px; }
.work .section-top { display:grid; grid-template-columns:1fr 360px; align-items:end; gap:7%; margin-bottom:60px; }
.section-top h2 { max-width:720px; }
.section-note { border-top:1px solid var(--ink); padding-top:17px; font-size:17px; }
.projects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:85px 30px; }
.projects .project { min-width:0; }
.project .image { aspect-ratio:1.45; background:#dbe0dc; }
.project img { filter:saturate(.88); }
.project:hover img { filter:saturate(1); transform:scale(1.04); }
.project-meta { border-color:var(--ink); margin-top:17px; padding-top:16px; }
.project h3 { font-size:clamp(25px,2.8vw,43px); letter-spacing:-.065em; line-height:1.06; }
.project .type { color:var(--soft); font-size:11px; font-weight:600; }
.all-work { margin-top:86px; }

/* La selezione in home diventa una riga di quattro su desktop. */
@media(min-width:981px) {
  .work .projects { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
  .work .project .image { aspect-ratio:1.18; }
  .work .project-meta { display:block; margin-top:14px; padding-top:13px; }
  .work .project h3 { font-size:clamp(20px,1.7vw,27px); line-height:1.12; }
  .work .project .type { display:block; min-width:0; margin-top:8px; text-align:left; white-space:normal; }
}

.about.wrap { width:100%; max-width:none; background:#0064a3; color:#fff; padding:115px clamp(32px,5vw,90px) 125px; grid-template-columns:1.05fr .95fr; gap:8%; }
.about .eyebrow { color:#d1ec87; }
.about h2 { max-width:790px; font-size:clamp(51px,5.5vw,85px); }
.about-copy { padding-top:26px; }
.about-copy p { font-size:21px; }
.about .arrow-link { border-color:#fff; }
.services { border:0; padding:115px 0 130px; }
.services h2 { max-width:800px; }
.services-grid { gap:38px; margin-top:75px; }
.service { border-top-width:8px; padding-top:22px; }
.service h3 { font-size:30px; }
.service p { font-size:17px; }
.contact { background:#d8e79e; color:var(--ink); padding:110px 0 125px; }
.contact h2 { font-size:clamp(55px,6vw,95px); max-width:970px; }
.contact h2 span { color:var(--blue); }
.contact .arrow-link { border-color:var(--ink); }
footer { background:var(--ink); color:#c9d0d1; }

/* Interno: intestazione scura e contenuto su carta chiara. */
.page-intro.wrap { width:100%; max-width:none; border:0; background:var(--ink); color:#fff; padding:89px clamp(32px,5vw,90px) 100px; }
.page-intro .eyebrow { color:#bbd874; }
.page-intro h1 { max-width:1150px; font-size:clamp(70px,8.1vw,135px); line-height:.96; letter-spacing:-.08em; }
.page-intro .lead { color:#c9d3d4; max-width:750px; margin-top:43px; font-size:23px; }
.portfolio-page { padding:90px 0 130px; }
.filterbar { border-bottom:1px solid var(--ink); gap:30px; margin-bottom:62px; }
.filterbar button { border:0; border-bottom:4px solid transparent; padding:0 0 16px; font-size:13px; letter-spacing:.08em; background:none; color:var(--soft); }
.filterbar button:hover, .filterbar button[aria-pressed="true"] { background:transparent; color:var(--ink); border-color:var(--pink); }
.portfolio-page .projects { grid-template-columns:repeat(3,minmax(0,1fr)); gap:72px 24px; }
.portfolio-page .project .image { aspect-ratio:1; }
.portfolio-page .project-meta { display:block; }
.portfolio-page .project h3 { font-size:clamp(22px,2vw,30px); }
.portfolio-page .project .type { display:block; min-width:0; margin-top:9px; text-align:left; white-space:normal; }
.outro { background:#e8ece5; border:0; padding:96px 0 108px; }
.outro h2 { max-width:940px; }
.story { padding:115px 0 125px; grid-template-columns:.52fr 1fr; gap:13%; }
.story aside { border:0; padding-top:0; }
.story .studio-story-portrait { margin:0 0 34px; border-bottom:10px solid var(--pink); }
.story .studio-story-portrait img { display:block; width:75%; max-width:390px; height:auto; }
.story aside strong { font-size:27px; margin-bottom:20px; }
.story .prose p { font-size:clamp(22px,2.15vw,29px); line-height:1.43; }
.statement { background:#d8e79e; padding:112px 0 125px; }
.statement h2 { max-width:1150px; font-size:clamp(55px,6vw,96px); }
.statement .accent { color:var(--blue); }
.facts { padding:100px 0 125px; gap:50px; }
.fact { border-color:var(--ink); }
.fact strong { font-size:58px; font-weight:600; }
.service-list { padding:90px 0 135px; }
.service-row { grid-template-columns:145px .9fr 1fr; gap:40px; border-color:var(--ink); padding:50px 0 65px; }
.service-row .number { font-size:37px; line-height:1; }
.service-row h2 { font-size:clamp(45px,4.5vw,72px); line-height:1; }
.process { background:#e8ece5; padding:110px 0 120px; }
.process-grid { margin-top:75px; gap:45px; }
.process-grid article { border-top-width:7px; }
.process-grid h3 { font-size:37px; }
.pricing { padding:115px 0 135px; }
.pricing h2 { max-width:680px; }
.contact-layout { padding:105px 0 135px; }
.contact-layout h2 { font-size:clamp(55px,5vw,78px); }
.contact-method { border-color:var(--ink); }
.contact-note { background:#e8ece5; }
.detail-hero.wrap { width:100%; max-width:none; background:var(--ink); color:#fff; padding:88px clamp(32px,5vw,90px) 93px; }
.detail-hero .eyebrow { color:#bbd874; }
.detail-hero h1 { max-width:1210px; font-size:clamp(70px,8vw,134px); line-height:.96; }
.detail-hero .lead { max-width:810px; font-size:23px; color:#c9d3d4; }
.detail-meta { border-color:#6f858d; }
.detail-meta strong { color:#a9bbbf; }
.detail-gallery { padding-top:70px; }
.detail-text { font-size:27px; max-width:900px; }
.detail-return { border-color:var(--ink); }

@media(max-width:980px) {
  .wrap { width:calc(100% - 56px); }
  .hero.wrap { min-height:620px; grid-template-columns:1fr; gap:38px; padding-top:105px; }
  .hero h1 { font-size:clamp(73px,10vw,108px); }
  .hero-side { max-width:630px; }
  .work .section-top { grid-template-columns:1fr 290px; }
  .projects { gap:62px 22px; }
  .project h3 { font-size:29px; }
  .portfolio-page .projects { grid-template-columns:repeat(2,minmax(0,1fr)); gap:58px 22px; }
}
@media(max-width:700px) {
  .wrap { width:calc(100% - 38px); }
  .top.wrap { padding-inline:19px; height:auto; min-height:93px; display:grid; grid-template-columns:1fr; gap:9px; padding-block:12px; }
  .top nav { gap:21px; overflow:auto; width:100%; white-space:nowrap; font-size:11px; }
  .top nav a { padding:8px 0; }
  .logo img { width:106px; }
  .hero.wrap { min-height:0; padding:112px 19px 84px; }
  .hero::before { left:19px; right:auto; top:48px; }
  .hero h1 { font-size:clamp(59px,13vw,83px); letter-spacing:-.08em; }
  .hero-side p { font-size:19px; }
  .work { padding:78px 0 85px; }
  .work .section-top { display:block; margin-bottom:41px; }
  .section-note { max-width:500px; margin-top:28px; }
  .projects { display:grid; grid-template-columns:1fr; gap:49px; }
  .projects .project, .projects .project:nth-child(n) { grid-column:auto; }
  .project .image, .projects .project:nth-child(n) .image { aspect-ratio:1.25; }
  .project h3 { font-size:27px; }
  .portfolio-page .projects { grid-template-columns:1fr; gap:49px; }
  .portfolio-page .projects .project .image,
  .portfolio-page .projects .project:nth-child(n) .image { aspect-ratio:1; }
  .about.wrap { padding:78px 19px 90px; grid-template-columns:1fr; gap:30px; }
  .about h2 { font-size:clamp(49px,12vw,70px); }
  .services { padding:80px 0 90px; }
  .services-grid { margin-top:47px; gap:37px; }
  .contact { padding:77px 0 85px; }
  .contact h2 { font-size:clamp(50px,11vw,76px); }
  .page-intro.wrap, .detail-hero.wrap { padding:72px 19px 83px; }
  .page-intro h1, .detail-hero h1 { font-size:clamp(58px,12vw,84px); }
  .page-intro .lead, .detail-hero .lead { font-size:20px; }
  .portfolio-page { padding:58px 0 88px; }
  .filterbar { gap:22px; overflow:auto; flex-wrap:nowrap; white-space:nowrap; margin-bottom:44px; }
  .story { padding:75px 0 85px; grid-template-columns:1fr; gap:45px; }
  .story .studio-story-portrait img { width:min(75%,320px); }
  .statement { padding:78px 0 88px; }
  .statement h2 { font-size:clamp(50px,11vw,73px); }
  .facts { padding:74px 0 85px; gap:27px; }
  .service-list { padding:52px 0 85px; }
  .service-row { grid-template-columns:1fr; gap:15px; padding:40px 0 52px; }
  .service-row>div:last-child { grid-column:auto; }
  .service-row h2 { font-size:clamp(43px,10vw,62px); }
  .process { padding:80px 0 92px; }
  .process-grid { margin-top:48px; }
  .pricing,.contact-layout { padding:80px 0 90px; grid-template-columns:1fr; gap:46px; }
  .detail-gallery { padding-top:30px; }
  .detail-text { font-size:20px; }
}

/* Il logo resta intero: nessuna maschera o traslazione sui bordi del PNG. */
.logo { width:auto; height:auto; overflow:visible; align-self:center; }
.logo img { display:block; width:150px; height:auto; max-width:none; transform:none; }

.detail-gallery .detail-lead-image { margin:0; }
.detail-gallery .detail-lead-image img { display:block; width:100%; height:auto; }
.detail-gallery .gallery-flow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.detail-gallery .gallery-flow figure { min-width:0; margin:0; }
.detail-gallery .gallery-flow a { display:block; overflow:hidden; background:var(--paper); aspect-ratio:1; }
.detail-gallery .gallery-flow img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .3s ease; }
.detail-gallery .gallery-flow a:hover img { transform:scale(1.015); }
/* Se il numero di foto è dispari, l'ultima conserva la stessa misura e si centra. */
.detail-gallery .gallery-flow figure:last-child:nth-child(odd) { grid-column:1 / -1; width:calc((100% - 24px)/2); justify-self:center; }

@media(max-width:700px) {
  .logo { width:auto; height:auto; }
  .logo img { width:130px; height:auto; transform:none; }
  .detail-gallery .pair { grid-template-columns:minmax(0,1fr); gap:18px; }
  .detail-gallery .gallery-flow { grid-template-columns:minmax(0,1fr); gap:18px; margin-top:18px; }
  .detail-gallery .gallery-flow figure:last-child:nth-child(odd) { grid-column:auto; width:100%; justify-self:stretch; }
  .detail-gallery .gallery-flow a { aspect-ratio:auto; }
  .detail-gallery .gallery-flow img { height:auto; }
}

/* Freccia geometrica: il glifo ↗ può essere reso come emoji su mobile. */
.arrow-link > span[aria-hidden="true"] {
  display:inline-block;
  position:relative;
  width:19px;
  height:19px;
  flex:0 0 19px;
  font-size:0;
  line-height:0;
}
.arrow-link > span[aria-hidden="true"]::before {
  content:"";
  position:absolute;
  top:1px;
  right:1px;
  width:11px;
  height:11px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
}
.arrow-link > span[aria-hidden="true"]::after {
  content:"";
  position:absolute;
  left:2px;
  bottom:3px;
  width:20px;
  height:2px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:left center;
}

/* Navigazione sempre raggiungibile e menu mobile nativo. */
:root { --header-height:128px; }
html { scroll-padding-top:calc(var(--header-height) + 18px); }
body { padding-top:var(--header-height); }
.top.wrap {
  position:fixed;
  inset:0 0 auto;
  z-index:1000;
  margin:0;
  height:var(--header-height);
  background:#f9f8f3;
}
.mobile-menu { display:none; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.project-meta h3 { min-width:0; overflow-wrap:break-word; }
footer .wrap { flex-wrap:wrap; }
footer .footer-legal { white-space:nowrap; }
footer .footer-legal a { text-decoration:underline; text-underline-offset:3px; }
footer .footer-legal a:hover { color:#fff; }

.legal-content { max-width:920px; padding:78px 0 115px; }
.legal-content .legal-updated { color:var(--soft); font-size:14px; margin:0 0 55px; }
.legal-content section { border-top:1px solid var(--line); padding:29px 0 36px; }
.legal-content h2 { font-size:clamp(29px,3vw,42px); margin:0 0 20px; }
.legal-content p, .legal-content li { font-size:17px; line-height:1.66; }
.legal-content p { margin:0 0 17px; }
.legal-content ul { padding-left:24px; margin:0 0 18px; }
.legal-content a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }

.cookie-notice {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:1100;
  display:flex;
  align-items:flex-end;
  gap:24px;
  width:min(680px,calc(100% - 48px));
  padding:24px 26px;
  border:1px solid var(--ink);
  background:#f9f8f3;
  box-shadow:0 18px 42px rgba(23,38,48,.23);
}
.cookie-notice[hidden] { display:none; }
.cookie-notice h2 { font-size:20px; line-height:1.2; margin:0 0 8px; letter-spacing:-.035em; }
.cookie-notice p { font-size:15px; line-height:1.5; margin:0; }
.cookie-notice a { text-decoration:underline; text-underline-offset:3px; }
.cookie-notice a:hover { color:var(--blue); }
.cookie-notice button {
  flex:none;
  min-height:46px;
  border:1px solid var(--ink);
  padding:12px 18px;
  background:var(--ink);
  color:#fff;
  cursor:pointer;
  font:600 14px/1 "Jost",Arial,sans-serif;
}
.cookie-notice button:hover { background:var(--blue); border-color:var(--blue); }
.cookie-notice button:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }

@media(max-width:700px) {
  :root { --header-height:94px; }
  .top.wrap {
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:0;
    padding:8px 19px;
    gap:12px;
  }
  .top .logo img { width:102px; height:auto; }
  .top > nav { display:none; }
  .mobile-menu { display:block; position:relative; flex:none; }
  .mobile-menu summary {
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border:1px solid var(--ink);
    border-radius:0;
    cursor:pointer;
    list-style:none;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-menu summary::-webkit-details-marker { display:none; }
  .mobile-menu summary:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
  .menu-dots { display:flex; gap:5px; }
  .menu-dots i { display:block; width:5px; height:5px; border-radius:50%; background:var(--ink); }
  .mobile-menu[open] summary { background:var(--ink); }
  .mobile-menu[open] .menu-dots i { background:#fff; }
  .top .mobile-menu nav {
    position:absolute;
    top:calc(100% + 13px);
    right:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:min(290px,calc(100vw - 38px));
    max-height:calc(100dvh - var(--header-height) - 19px);
    overflow:auto;
    padding:8px 17px;
    border:1px solid var(--ink);
    background:#f9f8f3;
    box-shadow:0 18px 32px rgba(23,38,48,.14);
    white-space:normal;
    font-size:14px;
    letter-spacing:.08em;
  }
  .top .mobile-menu:not([open]) nav { display:none; }
  .top .mobile-menu nav a {
    display:block;
    min-height:48px;
    padding:15px 4px;
    border-bottom:1px solid var(--line);
  }
  .top .mobile-menu nav a:last-child { border-bottom:0; }
  .top .mobile-menu nav a[aria-current="page"] { color:var(--blue); font-weight:700; }
  .hero h1, .page-intro h1, .detail-hero h1 { overflow-wrap:break-word; }
  .project-meta { display:block; }
  .project .type { display:block; min-width:0; margin-top:10px; text-align:left; white-space:normal; }
  .legal-content { padding:55px 0 80px; }
  .legal-content section { padding:25px 0 28px; }
  .cookie-notice { left:12px; right:12px; bottom:12px; width:auto; display:block; padding:18px 19px; }
  .cookie-notice button { margin-top:16px; width:100%; }
}
.cookie-notice[hidden] { display:none; }