@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/space-grotesk-var.woff2") format("woff2");
}

/* Tondo di Instrument Serif: il file e' gia' nel sito ed e' gia' usato dalle
   pagine principali, quindi verosimilmente in cache. Serve per i titoli del
   demo ristorante. (Il corsivo del logo, invece, e' una scelta esplicita.) */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif-italic.woff2") format("woff2");
}

:root {
  --ink: #08090b;
  --paper: #f8f7f2;
  --muted: #6d6a64;
  --line: rgba(8, 9, 11, .12);
  --line-light: rgba(255, 255, 255, .15);
  --font-sans: "Space Grotesk", -apple-system, system-ui, sans-serif;
  --font-accent: "Instrument Serif", Georgia, serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.interior {
  --ink: #211c17;
  --paper: #f3eee5;
  --muted: #7d7469;
  --line: rgba(33, 28, 23, .14);
  background:
    radial-gradient(circle at 82% 14%, rgba(182, 158, 128, .18), transparent 34vw),
    var(--paper);
}

.restaurant {
  --ink: #100e0b;
  --paper: #15100c;
  --muted: rgba(245, 232, 210, .66);
  --line: rgba(245, 232, 210, .16);
  --line-light: rgba(245, 232, 210, .18);
  background:
    radial-gradient(circle at 78% 18%, rgba(122, 76, 34, .22), transparent 34vw),
    #100e0b;
}

.artist {
  --ink: #101113;
  --paper: #fbfbf9;
  --muted: #777a7d;
  --line: rgba(16, 17, 19, .11);
  background:
    linear-gradient(90deg, rgba(16, 17, 19, .035) 1px, transparent 1px),
    linear-gradient(rgba(16, 17, 19, .025) 1px, transparent 1px),
    var(--paper);
  background-size: 92px 92px;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  color: var(--paper);
  background: var(--ink);
}

:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.mavero-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px max(20px, calc((100vw - 1180px) / 2));
  color: #fff;
  background: rgba(8, 9, 11, .92);
  backdrop-filter: blur(14px);
}

.interior .mavero-bar {
  background: rgba(33, 28, 23, .92);
}

.restaurant .mavero-bar {
  background: rgba(10, 8, 6, .94);
}

.artist .mavero-bar {
  background: rgba(16, 17, 19, .92);
}

.mavero-bar strong {
  font-weight: 500;
  letter-spacing: -.04em;
}

.mavero-bar span,
.mavero-bar a:last-child {
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.demo-nav,
.demo-footer {
  padding-inline: max(22px, calc((100vw - 1180px) / 2));
}

.demo-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 78px;
  border-bottom: 1px solid var(--line);
}

.interior .demo-nav {
  min-height: 92px;
}

.restaurant .demo-nav {
  min-height: 86px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.artist .demo-nav {
  min-height: 72px;
}

.demo-logo {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -.045em;
}

.interior .demo-logo {
  letter-spacing: .06em;
  text-transform: uppercase;
}

.restaurant .demo-logo {
  font-family: var(--font-accent);
  font-size: clamp(26px, 3vw, 42px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.035em;
}

.artist .demo-logo {
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.demo-menu {
  display: flex;
  gap: 24px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.demo-menu a {
  transition: color .22s ease;
}

.demo-menu a:hover {
  color: currentColor;
}

.demo-hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  min-height: calc(100vh - 126px);
  border-bottom: 1px solid var(--line);
}

.interior .demo-hero {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr);
}

.restaurant .demo-hero {
  grid-template-columns: minmax(360px, .82fr) minmax(0, 1fr);
}

.restaurant .hero-copy {
  order: 2;
}

.restaurant .visual-panel {
  order: 1;
}

.artist .demo-hero {
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 6vw, 88px) max(22px, calc((100vw - 1180px) / 2));
}

.kicker {
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
}

h1,
h2 {
  font-weight: 400;
  letter-spacing: -.075em;
  line-height: .9;
}

h1 {
  max-width: 760px;
  font-size: clamp(58px, 9vw, 128px);
}

.interior h1,
.interior h2 {
  font-weight: 300;
  letter-spacing: -.045em;
}

.restaurant h1,
.restaurant h2 {
  max-width: 860px;
  font-family: var(--font-accent);
  letter-spacing: -.02em;
  line-height: .95;
}

.artist h1,
.artist h2 {
  letter-spacing: -.05em;
}

/* La colonna del testo qui e' stretta (258px utili): un titolo grande ci
   entrerebbe a tre caratteri per riga. Piccolo e bilanciato e' anche piu'
   coerente col tono da galleria che promette il testo. */
.artist h1 {
  max-width: 100%;
  font-size: clamp(34px, 3.4vw, 48px);
  text-wrap: balance;
}

.artist h2 {
  font-size: clamp(34px, 3.8vw, 54px);
}

.artist .hero-copy p:not(.kicker) {
  margin-top: 40px;
}

h2 {
  max-width: 760px;
  font-size: clamp(46px, 6vw, 88px);
}

.accent {
  font-family: var(--font-accent);
  font-style: italic;
  letter-spacing: -.045em;
}

.hero-copy p:not(.kicker) {
  max-width: 470px;
  margin-top: 28px;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 20px);
}

.demo-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 42px;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .22s ease, background .22s ease, transform .22s ease;
}

.btn-primary {
  color: #fff;
  background: var(--ink);
}

.interior .btn {
  border-radius: 999px;
}

.restaurant .btn {
  border-radius: 0;
}

.artist .btn {
  min-height: 44px;
  border-radius: 0;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:not(.btn-primary):hover {
  color: #fff;
  background: var(--ink);
}

.visual-panel {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.visual-panel::before,
.visual-panel::after {
  content: "";
  position: absolute;
}

.editorial-list {
  display: grid;
  padding-inline: max(22px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid var(--line);
}

.interior .editorial-list {
  background: rgba(255, 255, 255, .26);
}

.restaurant .editorial-list {
  background: #15100c;
}

.artist .editorial-list {
  background: #fff;
}

.editorial-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(260px, .48fr);
  gap: clamp(22px, 5vw, 76px);
  padding: clamp(34px, 5vw, 64px) 0;
  border-top: 1px solid var(--line);
  transition: background .22s ease, padding-inline .22s ease;
}

.interior .editorial-row {
  grid-template-columns: 150px minmax(0, .9fr) minmax(260px, .55fr);
}

.restaurant .editorial-row {
  grid-template-columns: minmax(0, .55fr) minmax(0, 1fr) 110px;
}

.restaurant .editorial-row span {
  order: 3;
  text-align: right;
}

.artist .editorial-row {
  grid-template-columns: 92px minmax(0, 1.1fr) minmax(260px, .62fr);
}

.editorial-row:first-child {
  border-top: 0;
}

.editorial-row:hover {
  background: rgba(8, 9, 11, .025);
  padding-inline: 18px;
}

.editorial-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.editorial-row h3 {
  max-width: 660px;
  font-size: clamp(34px, 4.5vw, 64px);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .92;
}

.editorial-row p {
  color: var(--muted);
  font-size: 16px;
}

.info-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.restaurant .info-panel {
  color: #100e0b;
  background: #f5e8d2;
}

/* Il body qui ha entrambe le classi (restaurant dark) e piu' avanti
   .dark .info-panel span imposta un colore chiaro, pensato per il fondo scuro
   della pagina. Ma questo pannello ha un fondo crema tutto suo, quindi le
   etichette sparivano (scarto 21 su 255). Due classi per vincere il conflitto. */
.restaurant.dark .info-panel span {
  color: rgba(16, 14, 11, .58);
}

.artist .info-panel {
  background: #fff;
}

.info-panel div {
  min-height: 170px;
  padding: 26px;
  border-right: 1px solid var(--line);
}

.info-panel div:last-child {
  border-right: 0;
}

.info-panel span {
  display: block;
  margin-bottom: 46px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.info-panel strong {
  display: block;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1;
}

.final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  padding: clamp(78px, 10vw, 140px) max(22px, calc((100vw - 1180px) / 2));
}

.interior .final-cta {
  background: #e9dfd1;
}

.restaurant .final-cta {
  color: #f5e8d2;
  background: #100e0b;
}

.artist .final-cta {
  background: #f2f2ef;
}

.final-cta h2 {
  max-width: 880px;
}

.final-cta p {
  max-width: 430px;
  margin-top: 24px;
  color: var(--muted);
}

.demo-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 38px;
  padding-bottom: 38px;
  color: rgba(255, 255, 255, .72);
  background: var(--ink);
}

.dark {
  color: #f8f7f2;
  background: #10100e;
}

.dark .demo-nav,
.dark .demo-hero,
.dark .visual-panel,
.dark .editorial-list,
.dark .editorial-row,
.dark .info-panel,
.dark .info-panel div {
  border-color: var(--line-light);
}

.dark .demo-menu,
.dark .kicker,
.dark .hero-copy p:not(.kicker),
.dark .editorial-row span,
.dark .editorial-row p,
.dark .info-panel span,
.dark .final-cta p {
  color: rgba(248, 247, 242, .66);
}

.dark .btn {
  border-color: rgba(248, 247, 242, .78);
}

.dark .btn-primary {
  color: var(--ink);
  background: #f8f7f2;
}

.dark .btn:not(.btn-primary):hover {
  color: var(--ink);
  background: #f8f7f2;
}

.dark .editorial-row:hover {
  background: rgba(255, 255, 255, .045);
}

.interior .visual-panel {
  background-image:
    linear-gradient(90deg, rgba(243, 238, 229, .24), rgba(243, 238, 229, .04)),
    url("../assets/images/interior-hero.webp");
  background-position: center;
}

.interior .visual-panel::before {
  display: none;
}

.interior .visual-panel::after {
  display: none;
}

.restaurant .visual-panel {
  background-image:
    linear-gradient(180deg, rgba(21, 16, 12, .08), rgba(21, 16, 12, .22)),
    url("../assets/images/osteria-hero.webp");
  background-position: center;
}

.restaurant .visual-panel::before {
  display: none;
}

.restaurant .visual-panel::after {
  display: none;
}

.artist .visual-panel {
  background-image:
    linear-gradient(90deg, rgba(251, 251, 249, .12), rgba(251, 251, 249, .02)),
    url("../assets/images/artist-hero.webp");
  background-position: center;
}

.artist .visual-panel::before {
  display: none;
}

.artist .visual-panel::after {
  display: none;
}

@media (max-width: 820px) {
  .mavero-bar,
  .demo-nav,
  .demo-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .demo-menu {
    display: none;
  }

  /* Gli override per singola demo (.restaurant .demo-hero e simili) valgono due
     classi, e le media query non aggiungono specificita': la regola generica a
     una classe non li batteva, cosi' su telefono l'eroe restava a due colonne e
     la colonna di testo finiva fuori schermo. Qui li elenco tutti. */
  .demo-hero,
  .interior .demo-hero,
  .restaurant .demo-hero,
  .artist .demo-hero,
  .editorial-row,
  .interior .editorial-row,
  .restaurant .editorial-row,
  .artist .editorial-row,
  .info-panel,
  .final-cta {
    grid-template-columns: 1fr;
  }

  /* Nel demo ristorante il visual sta prima del testo: in colonna singola
     riempirebbe lo schermo lasciando il titolo sotto la piega. */
  .restaurant .hero-copy { order: 0; }
  .restaurant .visual-panel { order: 1; }

  .visual-panel {
    min-height: 420px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .editorial-row {
    gap: 16px;
  }

  .info-panel div {
    min-height: 130px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .dark .info-panel div {
    border-bottom-color: var(--line-light);
  }

  .final-cta .btn {
    width: 100%;
  }

  .editorial-row:hover {
    padding-inline: 0;
  }
}

/* ==========================================================================
   Sezioni proprie di ogni demo.
   Prima i tre demo avevano la stessa sequenza di sezioni e gli stessi
   componenti: cambiavano colori e proporzioni, non l'impianto. Qui ognuno
   ha una sezione che gli altri non hanno, presa dal proprio settore.
   ========================================================================== */

.menu-board,
.project-index,
.works,
.exhibitions,
.feature-case,
.service-strip,
.booking-panel,
.wine-note,
.artist-bio,
.materials-board,
.restaurant-intro,
.archive-note {
  padding-inline: max(22px, calc((100vw - 1180px) / 2));
  padding-top: clamp(72px, 9vw, 120px);
  padding-bottom: clamp(72px, 9vw, 120px);
  border-bottom: 1px solid var(--line);
}

.menu-head,
.index-head,
.works-head {
  margin-bottom: clamp(40px, 5vw, 68px);
}

.feature-case,
.artist-bio,
.booking-panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, .72fr);
  gap: clamp(32px, 7vw, 96px);
  align-items: start;
}

.feature-case {
  background: rgba(255, 255, 255, .34);
}

.case-copy,
.bio-copy,
.booking-copy {
  color: var(--muted);
  font-size: clamp(16px, 1.35vw, 19px);
}

.case-copy > p,
.bio-copy > p,
.booking-copy > p {
  max-width: 560px;
}

.bio-copy {
  display: grid;
  gap: 18px;
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.case-facts div {
  padding: 18px 18px 18px 0;
  border-right: 1px solid var(--line);
}

.case-facts div:last-child {
  border-right: 0;
}

.case-facts dt,
.service-strip span,
.booking-card span,
.wine-note span {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.case-facts dd {
  color: var(--ink);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 400;
  letter-spacing: -.04em;
}

.service-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 0;
  padding-bottom: 0;
  background: #211c17;
}

.service-strip article {
  min-height: 260px;
  padding: clamp(30px, 4vw, 48px);
  color: #f3eee5;
  border-right: 1px solid rgba(243, 238, 229, .15);
}

.service-strip article:last-child {
  border-right: 0;
}

.service-strip span {
  display: block;
  color: rgba(243, 238, 229, .48);
}

.service-strip h3 {
  margin-bottom: 24px;
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .95;
}

.service-strip p {
  max-width: 290px;
  color: rgba(243, 238, 229, .66);
}

.booking-panel {
  color: #f5e8d2;
  background: #100e0b;
}

.booking-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  border: 1px solid var(--line-light);
}

.booking-card div {
  min-height: 128px;
  padding: 22px;
  border-right: 1px solid var(--line-light);
}

.booking-card div:nth-child(3) {
  border-right: 0;
}

.booking-card span,
.wine-note span {
  display: block;
  color: rgba(245, 232, 210, .55);
}

.booking-card strong {
  display: block;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -.04em;
}

.booking-card .btn {
  grid-column: 1 / -1;
  min-height: 58px;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

.wine-note {
  display: grid;
  grid-template-columns: 160px minmax(0, 760px);
  gap: clamp(24px, 6vw, 84px);
  color: #f5e8d2;
  background: #15100c;
  border-color: var(--line-light);
}

.wine-note p {
  font-family: var(--font-accent);
  font-size: clamp(30px, 4vw, 58px);
  font-style: italic;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.artist-bio {
  background: #fff;
}

/* --- Interior: più simile a uno studio di progettazione, con materiali e
   lista lavori ordinata come portfolio reale. --- */
.interior-index {
  background: #eee5d8;
}

.interior-index .index-list {
  border-top: 1px solid var(--line);
}

.interior-index .index-list li {
  min-height: 92px;
  padding: 28px 0;
}

.materials-board {
  display: grid;
  grid-template-columns: minmax(0, .68fr) minmax(0, 1fr);
  gap: clamp(34px, 7vw, 104px);
  align-items: start;
  background: #f7f2e9;
}

.materials-intro {
  position: sticky;
  top: 110px;
}

.material-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.material-grid article {
  min-height: 210px;
  padding: clamp(24px, 3vw, 36px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.material-grid span {
  display: block;
  margin-bottom: 44px;
  color: var(--ink);
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -.045em;
}

.material-grid p {
  color: var(--muted);
  font-size: 15px;
}

/* --- Ristorante: menù e prenotazione devono sembrare strumenti veri,
   non una pagina portfolio generica. --- */
.restaurant-intro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(300px, .5fr);
  gap: clamp(30px, 7vw, 92px);
  align-items: end;
  color: #f5e8d2;
  background: #100e0b;
  border-color: var(--line-light);
}

.restaurant-intro p:not(.kicker) {
  color: rgba(245, 232, 210, .66);
  font-size: clamp(16px, 1.35vw, 19px);
}

.restaurant .menu-board {
  position: relative;
  color: #100e0b;
  background: #f5e8d2;
}

.restaurant .menu-board::before {
  content: "";
  position: absolute;
  inset: 22px;
  pointer-events: none;
  border: 1px solid rgba(16, 14, 11, .12);
}

.restaurant .menu-board .kicker,
.restaurant .menu-board .note {
  color: rgba(16, 14, 11, .58);
}

.restaurant .menu-board .dots {
  border-color: rgba(16, 14, 11, .24);
}

.restaurant .menu-course {
  position: relative;
  z-index: 1;
}

/* --- Artista: più archivio/portfolio curatoriale, con griglia meno commerciale
   e una nota per curatori o gallerie. --- */
.artist-archive {
  background: #fbfbf9;
}

.artist-archive .works-grid {
  grid-template-columns: .82fr 1.08fr .82fr .7fr;
  align-items: start;
}

.artist-archive .work:nth-child(even) {
  margin-top: clamp(42px, 7vw, 96px);
}

.archive-note {
  display: grid;
  grid-template-columns: 160px minmax(0, 780px);
  gap: clamp(28px, 7vw, 96px);
  background: #101113;
  color: #fbfbf9;
  border-color: rgba(251, 251, 249, .14);
}

.archive-note span {
  color: rgba(251, 251, 249, .55);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.archive-note p {
  font-size: clamp(24px, 3.1vw, 44px);
  line-height: 1.1;
  letter-spacing: -.055em;
}

/* --- Ristorante: la carta, con prezzi allineati e filetto di raccordo --- */
.menu-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(36px, 5vw, 72px);
}

.menu-head {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.menu-course h3 {
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-accent);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  letter-spacing: 0;
}

.menu-list {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 8px;
}

.menu-list .dish {
  font-size: 17px;
}

/* Filetto puntinato fra piatto e prezzo, come su una carta stampata */
.menu-list .dots {
  height: 1px;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-4px);
}

.menu-list .price {
  font-family: var(--font-accent);
  font-size: 19px;
}

.menu-list .note {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
}

/* --- Interior e artista: indice numerato, da pratica di progettazione --- */
.index-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.index-list li {
  display: grid;
  align-items: baseline;
  gap: clamp(12px, 3vw, 40px);
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.index-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.project-index .index-list li {
  grid-template-columns: 54px minmax(0, 1fr) minmax(0, .5fr) 68px;
}

.exhibitions .index-list li {
  grid-template-columns: 68px minmax(0, 1fr) minmax(0, .9fr) 104px;
}

.index-list .idx,
.index-list .anno,
.index-list .tipo {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.index-list .nome {
  font-size: clamp(19px, 2vw, 26px);
}

.index-list .luogo {
  color: var(--muted);
  font-size: 15px;
}

/* --- Artista: opere con didascalia da catalogo --- */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}

.work {
  margin: 0;
}

.work-visual {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  object-fit: cover;
}

.work-a { aspect-ratio: 3 / 4; }
.work-b { aspect-ratio: 4 / 3; }
.work-c { aspect-ratio: 3 / 4; }
.work-d { aspect-ratio: 5 / 7; }

.work figcaption {
  display: grid;
  gap: 4px;
}

.work figcaption strong {
  font-weight: 400;
  font-size: 17px;
}

.work figcaption span {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 820px) {
  .project-index .index-list li,
  .exhibitions .index-list li {
    grid-template-columns: 54px minmax(0, 1fr);
    row-gap: 4px;
  }

  .project-index .index-list .luogo,
  .project-index .index-list .anno,
  .exhibitions .index-list .luogo,
  .exhibitions .index-list .tipo {
    grid-column: 2;
  }

  .feature-case,
  .artist-bio,
  .booking-panel,
  .wine-note,
  .service-strip,
  .materials-board,
  .restaurant-intro,
  .archive-note {
    grid-template-columns: 1fr;
  }

  .materials-intro {
    position: static;
  }

  .material-grid {
    grid-template-columns: 1fr;
  }

  .artist-archive .works-grid {
    grid-template-columns: 1fr;
  }

  .artist-archive .work:nth-child(even) {
    margin-top: 0;
  }

  .case-facts,
  .booking-card {
    grid-template-columns: 1fr;
  }

  .case-facts div,
  .booking-card div,
  .service-strip article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .booking-card div {
    min-height: 104px;
  }

  .service-strip article {
    min-height: auto;
  }
}