/* ============================================================
   NIINstudio — Home / chrome (menubar, rail, hero, sezioni front-page)
   Estratto dal blocco <style> inline del mockup index.html
   ============================================================ */

/* Sulla home strippiamo gli asset Elementor: eventuale markup di popup
   del Theme Builder, privato del suo CSS, va tenuto nascosto. */
[data-elementor-type="popup"] { display: none !important; }

/* Freccia diagonale a tratto (sostituisce il glyph ↗). Dimensione relativa al testo. */
svg.arr {
  width: 0.78em;
  height: 0.78em;
  vertical-align: -0.04em;
  flex: none;
}
:root {
  --rail-w: 460px;
  --menu-h: clamp(67px, 7.4vw, 94px);
}

body.has-rail {
  padding-right: var(--rail-w);
}

/* Card immagine colonna destra: ritaglio QUADRATO + patina monocromatica navy
   (grayscale dell'immagine + tinta navy in blend "color" sopra). */
.rail__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(245, 241, 232, 0.20);
}

.rail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.03);
  transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
}

.rail__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  mix-blend-mode: color;
  pointer-events: none;
}

.rail__ac:hover .rail__media img {
  filter: grayscale(1) brightness(1.1) contrast(1.03);
  transform: scale(1.03);
}

/* Corpo della card: titolo + descrizione + link alla pagina (stile groth) */
.rail__desc {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  line-height: 1.46;
  color: rgba(245, 241, 232, 0.72);
  max-width: 34ch;
}

.rail__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--champagne);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: gap 0.3s var(--ease), border-color 0.3s var(--ease);
}

.rail__ac:hover .rail__cta {
  gap: 0.8em;
  border-bottom-color: currentColor;
}

.rail__cta .arrow {
  transition: transform 0.3s var(--ease);
}

.rail__ac:hover .rail__cta .arrow {
  transform: translateX(3px);
}

/* ---- Colonna di destra (rail, stile groth) ---- */
.rail {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--rail-w);
  height: 100vh;
  background: var(--navy);
  border-left: 1px solid #000;
  color: var(--carta);
  display: flex;
  flex-direction: column;
  gap: clamp(1.3rem, 2.4vw, 2rem);
  /* Stile groth: colonna ampia con foto grandi che la riempiono.
     Padding orizzontale contenuto → le foto quadrate occupano quasi tutta la larghezza. */
  padding-block: clamp(1.3rem, 2vw, 1.9rem);
  padding-inline: clamp(1.3rem, 1.5vw, 1.8rem);
  z-index: 75;
  overflow-y: auto;
}

.rail__label {
  font-family: var(--display);
  font-size: clamp(1.55rem, 2.1vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--carta);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.55em;
}

.rail__label::before {
  content: "";
  width: 0.62em;
  height: 0.62em;
  background: currentColor;
  flex: none;
}

/* ---- Blocco link Acustica (rail): card con immagine ---- */
.rail__ac-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2.4rem, 4.5vw, 3.8rem);
}

.rail__ac {
  display: block;
  text-decoration: none;
  color: var(--carta);
}

.rail .ph {
  transition: filter 0.5s var(--ease);
  background-color: #8f4124;
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(245, 241, 232, 0.16) 11px 12px);
  border-color: rgba(245, 241, 232, 0.20);
}

.rail .ph::after {
  color: rgba(245, 241, 232, 0.92);
}

.rail__ac:hover .ph {
  filter: brightness(1.05) saturate(1.05);
}

.rail__ac h3 {
  font-family: var(--display);
  font-size: 1.04rem;
  font-weight: 500;
  line-height: 1.1;
  margin: 0.6rem 0 0;
  color: var(--carta);
}

.rail__ac h3 .arr {
  color: var(--terracotta);
  display: inline-block;
  transition: transform 0.4s var(--ease);
}

.rail__ac:hover h3 .arr {
  transform: translate(3px, -3px);
}

@media (max-width: 1360px) {
  :root {
    --rail-w: 0px;
  }

  body {
    padding-right: 0;
  }

  .rail {
    display: none;
  }
}

.menubar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: stretch;
  background: #fff;
  border-bottom: 1px solid var(--border);
  min-height: var(--menu-h);
}

/* Offset per la barra di amministrazione di WordPress (solo da loggati):
   senza, header e colonna scorrono sotto la admin bar di ~32px prima di fissarsi.
   Da sloggato (sito pubblico) queste regole non si applicano. */
.admin-bar .menubar {
  top: 32px;
}

.admin-bar .rail {
  top: 32px;
  height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .menubar {
    top: 46px;
  }

  .admin-bar .rail {
    top: 46px;
    height: calc(100vh - 46px);
  }
}

.menubar__brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem clamp(1rem, 3vw, 2rem);
  text-decoration: none;
  color: var(--navy);
  border-right: 1px solid var(--border);
}

.menubar__brand .logo {
  height: clamp(17px, 1.9vw, 22px);
  color: var(--navy);
  flex: none;
}

/* Logo nell'header nascosto finché il logo Hero è visibile */
.at-top .menubar__brand .logo {
  display: none;
}

.menubar__tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  display: none;
}

.menubar__clock {
  display: none;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem clamp(1rem, 3vw, 2rem);
  border-right: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

.menubar__clock .dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--navy);
  flex: none;
}

.menubar__time {
  color: var(--navy);
}

.menubar__place {
  line-height: 1.35;
}

.menubar__nav {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

.menubar__nav a {
  display: flex;
  align-items: center;
  padding: 0.9rem clamp(0.4rem, 0.9vw, 0.75rem);
  font-family: var(--display);
  font-size: clamp(0.8rem, 0.95vw, 0.92rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: var(--navy);
  position: relative;
  transition: color 0.3s, background 0.3s;
}

.menubar__nav a::after {
  content: "";
  position: absolute;
  left: clamp(0.4rem, 0.9vw, 0.75rem);
  right: clamp(0.4rem, 0.9vw, 0.75rem);
  bottom: clamp(0.7rem, 1.4vw, 1.15rem);
  height: 2px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}

.menubar__nav a:hover::after,
.menubar__nav a[aria-current]::after {
  transform: scaleX(1);
}

.menubar__nav a[aria-current] {
  color: var(--terracotta);
}

/* ---- Pulsante panino (in cella bordata, solo mobile) ---- */
.menubar__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--menu-h);
  flex: none;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  padding: 0;
}

.burger__lines,
.burger__lines::before,
.burger__lines::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.burger__lines {
  position: relative;
}

.burger__lines::before,
.burger__lines::after {
  content: "";
  position: absolute;
  left: 0;
}

.burger__lines::before {
  top: -7px;
}

.burger__lines::after {
  top: 7px;
}

/* variante chiusura (✕) */
.menubar__burger.is-close .burger__lines {
  background: transparent;
}

.menubar__burger.is-close .burger__lines::before {
  top: 0;
  transform: rotate(45deg);
}

.menubar__burger.is-close .burger__lines::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (min-width: 720px) {
  .menubar__tag {
    display: block;
  }
}

@media (min-width: 900px) {
  .menubar__clock {
    display: flex;
  }
}

/* Soglia panino: sotto 800px l'header passa a panino */
@media (max-width: 800px) {
  .menubar {
    grid-template-columns: auto 1fr auto;
  }

  .menubar__burger {
    display: flex;
  }

  .menubar__clock {
    display: none;
  }

  .menubar__nav {
    display: none;
  }

  .menubar__tag {
    display: block;
  }
}

/* ---- Lente di ricerca nella menubar ---- */
.menubar__search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--menu-h);
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  padding: 0;
  transition: color 0.25s;
}
.menubar__search:hover { color: var(--terracotta); }
.menubar__search svg { width: 1.15rem; height: 1.15rem; }

/* ---- Overlay ricerca (a tutta pagina, come il menu mobile) ---- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.search-overlay[hidden] { display: none; }
.search-overlay__body {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 10vh, 7rem) var(--gutter) 0;
}
.search-overlay__form {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--border);
  padding-bottom: clamp(0.8rem, 2vw, 1.4rem);
}
.search-overlay__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--display);
  font-size: clamp(1.7rem, 6vw, 3.6rem);
  font-weight: 420;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.search-overlay__input::placeholder { color: rgba(1, 45, 79, 0.32); }
.search-overlay__input::-webkit-search-cancel-button { display: none; }
.search-overlay__hint {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 1.2rem;
}

/* ---- Overlay menu mobile (a tutta pagina, stile groth) ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu__bar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  min-height: var(--menu-h);
  border-bottom: 1px solid var(--border);
}

.mobile-menu__bar .menubar__burger {
  display: flex;
}

.mobile-menu__bar .menubar__tag {
  display: flex;
  align-items: center;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu__nav a {
  font-family: var(--display);
  font-weight: 460;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(2.4rem, 11vw, 4.4rem);
  color: var(--navy);
  text-decoration: none;
  padding: clamp(0.7rem, 2.6vw, 1.2rem) clamp(1.25rem, 5vw, 2rem);
  border-top: 1px solid var(--border);
  transition: color 0.25s, padding-left 0.3s var(--ease);
}

.mobile-menu__nav a:first-child {
  border-top: 0;
}

.mobile-menu__nav a:hover {
  color: var(--terracotta);
  padding-left: clamp(1.6rem, 6vw, 2.6rem);
}

.mobile-menu__nav a[aria-current] {
  color: var(--terracotta);
}

.mobile-menu__logo {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: clamp(1.5rem, 6vw, 3rem) clamp(1.25rem, 5vw, 2rem);
  color: var(--navy);
}

.mobile-menu__logo svg {
  width: 100%;
  height: auto;
  fill: currentColor;
  display: block;
}

/* ---- Hero (main, full width) ---- */
.hero-band {
  background: #fff;
}

/* Filetto nero tra una sezione e l'altra (colonna di sinistra) */
.main>section+section,
.main>footer {
  border-top: 1px solid #000;
}

.hero {
  /* Stesso respiro del gutter laterale: il logo ha margini uguali su tutti i lati */
  padding-top: var(--gutter);
  padding-bottom: var(--sect-pad);
}

.hero__logo {
  /* Wordmark NIIN + badge APprog: SEMPRE sulla stessa riga, mai a capo, stessa altezza.
     I due flex-grow valgono quanto l'aspect-ratio di ciascuno (314:100 e 100:100):
     dividendosi la larghezza in proporzione, le due altezze risultano uguali e
     si rimpiccioliscono insieme per stare sempre su una sola linea. */
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  /* Distanza tra i due loghi = spazio tra le lettere N e I del wordmark (18/314 della
     sua larghezza). Con i flex-grow 314:100 equivale a ~4.17% del contenitore. */
  gap: 4.17%;
  width: 100%;
  color: var(--navy);
}

.hero__logo .hero__wordmark {
  flex: 314 1 0;        /* grow proporzionale all'aspetto 314:100 */
  min-width: 0;
  width: 100%;
  height: auto;         /* altezza derivata dalla larghezza, aspetto preservato */
  fill: currentColor;
  display: block;
}

/* Badge AP affiancato SOLO al logo hero, quadrato, stessa altezza del wordmark */
.hero__badge {
  flex: 100 1 0;        /* grow proporzionale all'aspetto 100:100 (quadrato) */
  min-width: 0;
  width: 100%;
  height: auto;
  display: block;
}

.hero__sub {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}

.hero__sub .tm {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--terracotta);
  text-transform: uppercase;
}

/* Manifesto in piccolo (groth): il salto di scala col logo monumentale
   è ciò che dà l'armonia alla pagina. */
.hero__manifesto {
  margin-top: clamp(1.8rem, 4vw, 3rem);
}

.hero__manifesto p {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 36ch;
  margin: 0;
}

.hero__manifesto .tc {
  font-style: italic;
}

/* ---- Caposaldi (navy) ---- */
.pillars__intro {
  max-width: none; /* l'a-capo lo decide il <br> nel testo (Personalizzatore) */
}

.pillars__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--border);
}

@media (min-width: 720px) {
  .pillars__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.pillar {
  padding: clamp(1.8rem, 4vw, 2.6rem) 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

@media (min-width: 720px) {
  .pillar:first-child {
    padding-right: clamp(2rem, 5vw, 4rem);
    border-right: 1px solid var(--border);
  }

  .pillar:last-child {
    padding-left: clamp(2rem, 5vw, 4rem);
  }
}

.pillar h3 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin: 0 0 0.8rem;
  font-weight: 440;
}

.pillar p {
  color: var(--slate);
  max-width: 38ch;
  font-size: 1.04rem;
  margin: 0 0 1.4rem;
}

.pillar a {
  margin-top: auto;
}

/* ---- Portfolio ---- */
.proj-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.2rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ---- Lista progetti (stile groth) ---- */
.proj-list {
  display: flex;
  flex-direction: column;
}

/* Dopo l'ultima scheda lo stacco dal filetto di sezione deve essere
   identico a quello dal filetto puntinato tra le schede: a fare aria
   resta solo il padding-bottom della card (.g-proj). */
.section:has(.proj-list) {
  padding-bottom: 0;
}

.g-proj {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  text-decoration: none;
  color: var(--navy);
  padding-block: var(--sect-pad);
  background-image: radial-gradient(circle, #000 0.9px, transparent 1.2px);
  background-size: 7px 2.2px;
  background-repeat: repeat-x;
  background-position: top left;
}

@media (min-width: 760px) {
  .g-proj {
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.g-proj:first-child {
  background-image: none;
  padding-top: 0;
}

.g-proj__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}
/* Scheda senza assonometria: il testo resta in basso, allineato alla foto. */
.g-proj__left--no-axo { justify-content: flex-end; }

/* L'assonometria riempie lo spazio libero della colonna (l'altezza della
   riga la detta l'immagine accanto, quindi la sezione non si dilata):
   il viewBox si adatta a larghezza O altezza, ciò che limita prima.
   Il min-height copre il layout impilato (mobile), dove di spazio
   "avanzato" non ce n'è. */
.g-proj__axo {
  flex: 1 1 0;
  min-height: clamp(4.5rem, 9vw, 7.5rem);
  width: 100%;
  color: var(--navy);
  opacity: 0.9;
}

.g-proj__axo .axo {
  width: 100%;
  height: 100%;
}

.g-proj__title {
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 460;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--navy);
}

.g-proj__title .arr {
  color: var(--terracotta);
  display: inline-block;
  transition: transform 0.4s var(--ease);
}

.g-proj:hover .g-proj__title .arr {
  transform: translate(4px, -4px);
}

.g-proj__desc {
  margin: 0.8rem 0 1.1rem;
  max-width: 42ch;
  color: var(--slate);
  font-size: 1.02rem;
}

.g-proj__cta {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.g-proj:hover .g-proj__cta {
  border-bottom-color: currentColor;
  gap: 0.8em;
}

.g-proj__cta .arrow {
  transition: transform 0.3s var(--ease);
}

.g-proj:hover .g-proj__cta .arrow {
  transform: translateX(3px);
}

.g-proj__media {
  align-self: start;
  transition: filter 0.5s var(--ease);
}

/* Immagine reale del progetto (featured image): stesso ritaglio del placeholder */
img.g-proj__media {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}

.g-proj:hover .g-proj__media {
  filter: brightness(0.97) saturate(1.06);
}

/* ---- Riduzione leggera dell'immagine nelle schede (progetti e wip) ---- */
@media (min-width: 760px) {
  .g-proj .g-proj__media {
    width: 88%;
    justify-self: end;
  }
}

/* ---- Alternanza automatica dei fondi delle sezioni della home ----
   Conta le sezioni effettivamente presenti e alterna carta / carta-2:
   se una sezione sparisce (es. WIP senza cantieri) il ritmo si riassesta
   da solo. L'hero resta bianco, eventuali momenti navy sono esclusi. */
body.home .main > section.section:nth-of-type(even):not(.section--navy) { background: var(--carta-2); }
body.home .main > section.section:nth-of-type(odd):not(.section--navy) { background: var(--carta); }

/* ---- Work in progress: schede come i progetti, immagine monocroma carta-2.
        Schede NON cliccabili: niente carosello né pagina singola. ---- */
#in-corso .proj-list { margin-top: clamp(2.2rem, 5vw, 4rem); }

/* Nel WIP il titolo di sezione precede direttamente la lista (niente chips
   né proj-head): un filetto pieno sulla PRIMA scheda separa il titolo
   display dal titolo della scheda, che altrimenti si confondono. */
#in-corso .g-proj:first-child {
  border-top: 1px solid var(--border);
  padding-top: var(--sect-pad);
}
.g-proj__media--wip {
  display: block;
  background: var(--carta-2);
  border-radius: var(--radius);
  overflow: hidden;
  align-self: start;
}
.g-proj__media--wip img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 0;
  filter: grayscale(1) contrast(1.05) brightness(1.03);
  mix-blend-mode: multiply;
}

/* ---- Guide ---- */
.guides {
  display: flex;
  flex-direction: column;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.guide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem 2rem;
  padding: clamp(1.3rem, 3vw, 1.9rem) 0;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: var(--navy);
  transition: padding-left 0.4s var(--ease);
}

.guide:last-child {
  border-bottom: 1px solid var(--border);
}

@media (min-width: 720px) {
  .guide {
    grid-template-columns: 7rem 1fr auto;
    align-items: baseline;
  }

  .guide:hover {
    padding-left: 1rem;
  }
}

.guide .cat {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.guide h3 {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 460;
  line-height: 1.12;
}

.guide .rd {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  white-space: nowrap;
}

.guide:hover h3 {
  color: var(--terracotta);
}

.studio-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 820px) {
  .studio-cta {
    grid-template-columns: 1.4fr 1fr;
  }
}

/* ============================================================
   FOOTER — griglia editoriale con filetti evidenti (colore carta)
   ============================================================ */
.footer {
  padding-block: 0;
}

.main>footer {
  border-top: 0;
}

.footer__rows {
  border-top: 1px solid var(--carta);
}

.footer__row {
  display: grid;
  grid-template-columns: 1fr;
}

.footer__row--top {
  border-bottom: 1px solid var(--carta);
}

@media (min-width: 760px) {
  .footer__row--top {
    grid-template-columns: 34% 1fr;
  }

  .footer__row--bot {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer__cell {
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.3rem, 2.5vw, 2rem);
}

.footer__row>.footer__cell:first-child {
  padding-left: var(--gutter);
}

.footer__row>.footer__cell:last-child {
  padding-right: var(--gutter);
}

.footer__row>.footer__cell+.footer__cell {
  border-top: 1px solid var(--carta);
}

@media (min-width: 760px) {
  .footer__row>.footer__cell+.footer__cell {
    border-top: 0;
    border-left: 1px solid var(--carta);
  }
}

.footer__clock {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.7);
}

.footer__clock .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--terracotta);
  margin-top: 0.2em;
  flex: none;
}

.footer__clock-lines {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.footer__time {
  color: var(--carta);
}

.footer__menu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1rem, 2.5vw, 2rem);
}

.footer__menu-list a {
  font-family: var(--display);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 500;
  color: var(--carta);
  text-decoration: none;
  transition: color 0.25s;
}

.footer__menu-list a:hover {
  color: var(--champagne);
}

.footer__cell li.is-text {
  color: rgba(245, 241, 232, 0.7);
}

.footer__copy {
  margin: 1.4rem 0 0;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  color: rgba(245, 241, 232, 0.6);
}