@font-face {
  font-family:Instrument Serif;
  src:url('../fonts/instrument-serif-regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:Manrope;
  src:url('../fonts/manrope-variable.ttf') format('truetype');
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
}

/* Impostazioni condivise: colori, caratteri, larghezze e scala degli spazi. */
:root {
  --paper:#fff;
  --ink:#20201e;
  --muted:#656560;
  --line:#dfdfd9;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:Manrope,Arial,sans-serif;
  --gutter:clamp(22px,5vw,88px);
  --max:1440px;
  --reading:720px;
  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2.5rem;
  --space-5:4rem;
  --space-6:clamp(5rem,9vw,9rem);
  --space-7:clamp(7rem,13vw,13rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  --link-underline:1px solid var(--ink);
  --link-underline-offset:4px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

body:has(dialog[open]) {
  overscroll-behavior:none;
}

a {
  color:inherit;
  text-decoration:none;
  text-decoration-thickness:1px;
  text-underline-offset:.3em;
}

button {
  font:inherit;
  color:inherit;
}

a,button {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,button:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:6px;
}

button {
  background:none;
  border:0;
  cursor:pointer;
  min-height:44px;
  min-width:44px;
  padding:.6rem;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

figure {
  margin:0;
}

p {
  margin:0 0 1.4em;
}

h1,h2,h3 {
  font-weight:400;
  margin:0;
  line-height:1.05;
}

h1,h2 {
  font-family:var(--serif);
}

h1 {
  font-size:clamp(4rem,8vw,8rem);
  letter-spacing:-.025em;
}

h2 {
  font-size:clamp(3rem,5.5vw,5.5rem);
  letter-spacing:-.02em;
}

h3 {
  font-size:1rem;
  line-height:1.5;
}

ul {
  padding-left:1.2rem;
}

::selection {
  background:#e4e5dc;
}

main {
  min-height:65vh;
}

.container {
  width:min(calc(100% - var(--gutter)*2),var(--max));
  margin-inline:auto;
}

.section {
  margin-block:var(--space-7);
}

.eyebrow {
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
  margin-bottom:1.4rem;
}

.text-link {
  display:inline-flex;
  gap:2rem;
  align-items:center;
  padding:.4rem 0 var(--link-underline-offset);
  border-bottom:var(--link-underline);
  font-size:.9rem;
  line-height:1;
  min-height:36px;
}

.link-arrow {
  display:inline-block;
}

.text-link span,.link-arrow {
  transition:transform .25s var(--ease);
}

.text-link:hover span,.text-link:focus-visible span,a:hover .link-arrow,a:focus-visible .link-arrow {
  transform:translateX(5px);
}

.skip-link {
  position:fixed;
  top:10px;
  left:20px;
  background:#fff;
  padding:12px;
  z-index:100;
  transform:translateY(-200%);
}

.skip-link:focus {
  transform:none;
}

/* Navigazione comune alle cinque pagine. */
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  min-height:112px;
}

.brand {
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:-.035em;
  white-space:nowrap;
}

.site-header nav {
  display:flex;
  gap:clamp(1.3rem,3vw,3rem);
}

.site-header nav a {
  font-size:.86rem;
  position:relative;
  line-height:1;
  padding:.6rem 0 var(--link-underline-offset);
  border-bottom:1px solid transparent;
}

.site-header nav a:hover,
.site-header nav a:focus-visible,
.site-header nav a[aria-current=page] {
  border-bottom:var(--link-underline);
}

.site-header nav a:hover::after,.site-header nav a[aria-current=page]::after {
  transform:scaleX(1);
}

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

.menu-toggle {
  font-size:.9rem;
}

/* Homepage e composizione delle opere. */
.hero {
  padding-top:clamp(2.5rem,5vw,5.5rem);
}

.hero-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  margin-bottom:clamp(2rem,4vw,4rem);
}

.hero-heading h1 {
  font-size:clamp(3.4rem,7.3vw,7.5rem);
}

.hero-heading .eyebrow {
  margin:0 0 .7rem;
  white-space:nowrap;
}

.hero-art {
  width:92%;
  margin-left:auto;
}

.artwork-link {
  display:block;
}

.artwork-link img {
  width:100%;
  height:auto;
  object-fit:contain;
}

.artwork-link {
  transition:opacity .25s;
}

.artwork-link:hover {
  opacity:.94;
}

figcaption {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-top:1rem;
  font-size:.82rem;
  line-height:1.6;
}

figcaption span:last-child {
  color:var(--muted);
}

.intro {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:5vw;
  align-items:start;
}

.intro blockquote {
  position:relative;
  font-family:var(--serif);
  font-size:clamp(2.2rem,3.5vw,3.6rem);
  line-height:1.18;
  margin:0;
  max-width:900px;
}

/* Il caporale resta nel testo accessibile, fuori dal bordo ottico della colonna. */
.quote-opening {
  position:absolute;
  inset-inline-end:100%;
  top:0;
}

.prose p,.intro blockquote,.artist-teaser p {
  text-wrap:pretty;
}

.intro .text-link {
  margin-top:2rem;
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:4rem;
}

.section-heading h2 {
  font-size:clamp(3rem,4.5vw,4.5rem);
}

.artwork-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(4rem,8vw,8rem) clamp(2.5rem,8vw,9rem);
  align-items:start;
}

.artwork {
  --artwork-max-height:780px;
  min-width:0;
  width:100%;
  max-width:min(calc(var(--artwork-max-height) * var(--artwork-ratio)), var(--artwork-source-width));
  justify-self:center;
}

.artwork:nth-child(even) {
  margin-top:clamp(3rem,8vw,8rem);
}

.artwork img {
  max-height:var(--artwork-max-height);
}

.artwork.wide {
  grid-column:1/-1;
  width:80%;
  justify-self:center;
  margin-top:0;
}

.artwork-grid.selected .artwork.wide {
  width:78%;
}

.artwork-grid.selected .artwork:last-child {
  align-self:center;
}

.gallery-page .artwork-grid {
  margin-top:5rem;
}

.gallery-page .artwork {
  scroll-margin-top:2rem;
}

.artist-teaser {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(3rem,10vw,10rem);
  align-items:center;
}

.artist-teaser figure {
  max-width:470px;
  margin-inline:auto;
}

.artist-teaser h2 {
  margin-bottom:2rem;
}

.artist-teaser p {
  max-width:440px;
}

.contact-invite {
  border-top:1px solid var(--line);
  padding-top:3rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
}

.contact-invite h2 {
  font-size:clamp(3rem,5vw,5rem);
}

.site-footer {
  border-top:1px solid var(--line);
  padding-block:3rem 2rem;
}

.footer-main {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:2rem;
}

.footer-name {
  font-family:var(--serif);
  font-size:2.2rem;
}

.footer-links {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  font-size:.85rem;
  gap:0px;
}

.footer-links a {
  padding:0;
  min-height:28px;
  line-height:1.2;
  display:flex;
  align-items:center;
  border-bottom:0;
}

.footer-links a > span {
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}

.footer-links a:hover > span,
.footer-links a:focus-visible > span {
  border-bottom:var(--link-underline);
}

/* Icone decorative nello stesso link: etichetta e destinazione restano in HTML. */
a[data-contact="whatsapp"],a[data-contact="instagram"],a[data-contact="facebook"] {
  display:inline-flex;
  align-items:center;
  gap:.45em;
}

a[data-contact="instagram"] {
  --social-symbol:url('../icons/instagram.svg');
}

a[data-contact="facebook"] {
  --social-symbol:url('../icons/facebook.svg');
}

a[data-contact="whatsapp"] {
  --social-symbol:url('../icons/whatsapp.svg');
}

/* Social links: underline only the text and arrow */
.footer-links a:is([data-contact="whatsapp"],[data-contact="instagram"],[data-contact="facebook"]),
.contact-list a:is([data-contact="whatsapp"],[data-contact="instagram"],[data-contact="facebook"]) {
  border-bottom:0;
}

.contact-list a:is([data-contact="whatsapp"],[data-contact="instagram"],[data-contact="facebook"]) > span {
  border-bottom:1px solid transparent;
  padding-bottom:var(--link-underline-offset);
}

.footer-links a:is([data-contact="whatsapp"],[data-contact="instagram"],[data-contact="facebook"]):is(:hover,:focus-visible),
.contact-list a:is([data-contact="whatsapp"],[data-contact="instagram"],[data-contact="facebook"]):is(:hover,:focus-visible) {
  border-bottom:0;
}

.contact-list a:is([data-contact="whatsapp"],[data-contact="instagram"],[data-contact="facebook"]):is(:hover,:focus-visible) > span {
  border-bottom:var(--link-underline);
}

a[data-contact="whatsapp"]::before,a[data-contact="instagram"]::before,a[data-contact="facebook"]::before {
  content:'';
  flex:none;
  width:1.1em;
  height:1.1em;
  background-color:currentColor;
  -webkit-mask:var(--social-symbol) center / contain no-repeat;
  mask:var(--social-symbol) center / contain no-repeat;
}

.footer-note {
  font-size:.75rem;
  color:var(--muted);
  margin-top:4rem;
  margin-bottom:0;
}

/* Pagine editoriali. */
.page-heading {
  padding-block:clamp(3rem,6vw,6rem) 4rem;
}

.page-heading p {
  color:var(--muted);
  max-width:550px;
  margin:1.5rem 0 0;
}

.page-heading .eyebrow {
  margin-bottom:1rem;
}

.page-heading-row {
  display:flex;
  justify-content:space-between;
  align-items:end;
}

.page-number {
  font-size:.85rem;
  color:var(--muted);
}

.biography {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:clamp(3rem,8vw,8rem);
  align-items:start;
}

.biography figure {
  max-width:460px;
}

.prose {
  max-width:var(--reading);
  font-size:clamp(1rem,1.2vw,1.12rem);
  line-height:1.95;
}

.prose .lead {
  font-size:clamp(1.3rem,2vw,1.65rem);
  line-height:1.65;
}

.reading-section {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:5vw;
}

.reading-section h2 {
  font-size:clamp(2.6rem,4vw,4rem);
}

.materials {
  width:min(70%,900px);
  margin:5rem 0 0 auto;
}

.materials figcaption,.documentary figcaption,.process figcaption {
  color:var(--muted);
  font-size:.8rem;
  display:block;
}

/* Mantiene le fotografie nella stessa posizione dopo la rimozione delle didascalie. */
.materials .uncaptioned-photo,.process-grid .uncaptioned-photo {
  padding-bottom:calc(1rem + .8rem * 1.6);
}

.process-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6vw;
  align-items:start;
  margin-top:3rem;
}

.process-grid figure:last-child {
  margin-top:6rem;
}

.process-grid img {
  max-height:720px;
  object-fit:contain;
  width:100%;
  object-position:top;
}

.timeline {
  list-style:none;
  margin:0;
  padding:0;
}

.timeline-year {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:2rem;
  border-top:1px solid var(--line);
  padding-block:1.8rem;
}

.timeline-year h3 {
  font-family:var(--serif);
  font-size:2.4rem;
}

.timeline-year ul {
  list-style:none;
  margin:0;
  padding:0;
}

.timeline-year li {
  padding-bottom:.8rem;
  line-height:1.65;
}

.timeline-year li:last-child {
  padding-bottom:0;
}

.documentary {
  margin-block:5rem;
}

.documentary h3 {
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:2rem;
}

.photo-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:start;
}

.photo-pair figure:nth-child(2) {
  margin-top:4rem;
}

.photo-pair img {
  max-height:620px;
  object-fit:contain;
  object-position:top;
  width:100%;
}

/* La didascalia segue la foto visibile, senza cambiare il suo riquadro.
   Il limite di altezza corrisponde a quello delle immagini .photo-pair. */
.exhibition-photos figcaption {
  max-width:var(--photo-width);
}

.exhibition-photos .photo-pair figcaption {
  max-width:calc(620px * var(--photo-ratio));
  margin-inline:auto;
}

.photo-strip {
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:2rem;
  align-items:start;
  margin-top:3rem;
}

.photo-strip figure:nth-child(2) {
  margin-top:3rem;
}

.photo-single {
  max-width:850px;
  margin-inline:auto;
}

.ceremonies {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:5vw;
  align-items:start;
}

.ceremonies .small-document {
  max-width:380px;
  margin:3rem 0 0 auto;
}

.publications {
  list-style:none;
  padding:0;
  margin:0;
}

.publications li {
  border-bottom:1px solid var(--line);
  padding:1rem 0;
}

.publication-photo {
  max-width:750px;
  margin:4rem 0 0 auto;
}

.essay h2 {
  margin-bottom:2rem;
}

.essay .prose {
  margin-inline:auto;
}

.essay .byline {
  margin-top:2rem;
  font-size:.9rem;
}

.contact-layout {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:6vw;
  margin-block:1rem var(--space-7);
}

.contact-layout h2 {
  font-size:clamp(2.5rem,4vw,4rem);
  max-width:350px;
}

.contact-list {
  margin:0;
}

.contact-list div {
  padding:1.6rem 0;
  border-top:1px solid var(--line);
}

.contact-list dt {
  font-size:.78rem;
  color:var(--muted);
  margin-bottom:.6rem;
}

.contact-list dd {
  margin:0;
  font-size:clamp(1rem,1.6vw,1.35rem);
  overflow-wrap:anywhere;
}

.contact-list a {
  padding-bottom:var(--link-underline-offset);
  border-bottom:1px solid transparent;
}

.contact-list a:hover,.contact-list a:focus-visible {
  border-bottom:var(--link-underline);
}

/* Compact social links on the Contacts page */
.contact-list a:is(
  [data-contact="whatsapp"],
  [data-contact="instagram"],
  [data-contact="facebook"]
) {
  line-height:1.2;
  min-height:0;
  padding-bottom:0;
}

.contact-list address {
  font-style:normal;
}

.social-handle {
  font-size:.85rem;
  color:var(--muted);
}

/* Dialogo delle opere: contenuto sempre contenuto, mai ritagliato. */
.lightbox {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:clamp(16px,3vw,40px);
  border:0;
  background:white;
  color:var(--ink);
}

.lightbox[open] {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:1rem;
  animation:dialog-in .18s var(--ease);
}

.lightbox::backdrop {
  background:#fff;
}

.lightbox-top,.lightbox-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.lightbox-top {
  font-size:.85rem;
}

.lightbox-top [data-close] {
  display:flex;
  align-items:center;
  gap:1rem;
}

.lightbox-top [data-close] span {
  font-size:1.8rem;
  line-height:1;
}

.lightbox-image {
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lightbox-image picture {
  display:contents;
}

.lightbox-image img {
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

.lightbox-caption h2 {
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
  line-height:1.5;
}

.lightbox-caption p {
  font-size:.82rem;
  margin:.25rem 0 0;
  color:var(--muted);
}

.lightbox-controls {
  display:flex;
  align-items:center;
  gap:1rem;
  white-space:nowrap;
  font-size:.8rem;
}

.lightbox-controls button {
  font-size:1.5rem;
}

.lightbox-controls button:hover {
  background:#f4f4f1;
}

@keyframes dialog-in {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}

.gallery-page .section {
  margin-top:1rem;
}

.gallery-page .artwork-grid {
  margin-top:2rem;
}

/* Adattamenti responsive. */
@media(min-width:761px) {
  .menu-toggle {
    display:none;
  }
}

@media(min-width:1700px) {
  .hero-art {
    max-width:1320px;
  }
  .artwork-grid {
    column-gap:150px;
  }
}

@media(max-width:1000px) {
  .biography {
    gap:3rem;
  }
  .reading-section {
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .reading-section .prose,.reading-section .timeline,.reading-section .publications {
    margin-left:auto;
    width:min(100%,760px);
  }
  .footer-main {
    grid-template-columns:1fr 1fr;
  }
  .footer-name {
    grid-column:1/-1;
  }
}

@media(max-width:760px) {
  :root {
    --space-7:5rem;
  }
  .site-header {
    min-height:86px;
    flex-wrap:wrap;
    gap:0;
    padding-block:1rem;
  }
  .brand {
    font-size:.95rem;
  }
  .site-header nav {
    width:100%;
    flex-wrap:wrap;
    gap:.4rem 1.4rem;
    padding-top:1rem;
  }
  .menu-ready .site-header nav {
    display:none;
  }
  .menu-ready .site-header:has(.menu-toggle[aria-expanded=true]) nav {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-block:1rem;
  }
  .site-header nav a {
    font-size:1rem;
    padding:.6rem 0 var(--link-underline-offset);
    width:fit-content;
  }
  .hero {
    padding-top:2rem;
  }
  .hero-heading {
    display:block;
    margin-bottom:2rem;
  }
  .hero-heading h1 {
    font-size:clamp(3rem,10.2vw,5rem);
    line-height:1.03;
    max-width:100%;
  }
  .hero-heading .eyebrow {
    margin-top:1.5rem;
  }
  .hero-art {
    width:100%;
  }
  .intro {
    grid-template-columns:1fr;
    gap:1rem;
  }
  .intro blockquote {
    font-size:2.4rem;
  }
  .section-heading {
    display:block;
    margin-bottom:2.5rem;
  }
  .section-heading .text-link {
    margin-top:1.5rem;
  }
  .artwork-grid {
    grid-template-columns:1fr;
    gap:3.8rem;
  }
  .artwork:nth-child(even) {
    margin-top:0;
  }
  .artwork.wide,.artwork-grid.selected .artwork.wide {
    width:100%;
    grid-column:auto;
  }
  .artwork {
    --artwork-max-height:680px;
  }
  .artist-teaser,.biography {
    grid-template-columns:1fr;
    gap:3rem;
  }
  .artist-teaser figure {
    width:85%;
    margin-left:0;
  }
  .artist-teaser h2 {
    margin-bottom:1.5rem;
  }
  .contact-invite {
    display:block;
  }
  .contact-invite .text-link {
    margin-top:2rem;
  }
  .footer-main {
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .footer-name {
    grid-column:auto;
  }
  .footer-note {
    margin-top:2.5rem;
  }
  .page-heading {
    padding-top:2.5rem;
    padding-bottom:3rem;
  }
  .page-heading h1 {
    font-size:clamp(3.7rem,14vw,6rem);
  }
  .page-number {
    display:none;
  }
  .biography figure {
    width:85%;
  }
  .materials {
    width:100%;
    margin-top:3rem;
  }
  .process-grid,.photo-pair,.photo-strip,.ceremonies {
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .process-grid figure:last-child,.photo-pair figure:nth-child(2),.photo-strip figure:nth-child(2) {
    margin-top:0;
  }
  .process-grid img {
    max-height:none;
  }
  .timeline-year {
    grid-template-columns:65px 1fr;
    gap:1rem;
  }
  .timeline-year h3 {
    font-size:2rem;
  }
  .timeline-year li {
    font-size:.9rem;
  }
  .documentary {
    margin-block:3.5rem;
  }
  .photo-pair img {
    max-height:600px;
    width:auto;
  }
  .exhibition-photos .photo-pair figcaption {
    max-width:min(var(--photo-width), calc(600px * var(--photo-ratio)));
    margin-inline:0;
  }
  .ceremonies .small-document {
    margin-top:2.5rem;
  }
  .contact-layout {
    grid-template-columns:1fr;
    gap:3rem;
  }
  .lightbox-bottom {
    align-items:flex-start;
    flex-direction:column;
    gap:.6rem;
  }
  .lightbox-controls {
    align-self:center;
  }
  .lightbox {
    gap:.7rem;
  }
  .lightbox-caption p {
    font-size:.78rem;
  }
  .lightbox-image img {
    max-height:100%;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
}