/*
  Angelica Lucchetti — angelicalucchetti.com
  Archetype: zen-minimal | Typography: Cormorant Garamond + Work Sans | Palette: porcelain-ink
  Motion: 1-parallax-hero, scroll-reveal-intersection, hover-artwork-grid
*/

/* Font self-hosted: niente CDN Google (regola di progetto, 17/7/2026) */
@font-face { font-family: 'Cormorant Garamond'; src: url('/fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/fonts/WorkSans-Italic-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 300 700; font-style: italic; font-display: swap; }

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --c-white:     #FAFAF8;
  --c-beige:     #CFC7BB;
  --c-ink:       #33291F;
  --c-terracotta:#A68A78;
  --c-slate:     #8F9CA4;
  --c-moss:      #7A8C7E;

  --fs-hero:     clamp(52px, 7.5vw, 96px);
  --fs-display:  clamp(36px, 5vw, 72px);
  --fs-title:    clamp(24px, 3.5vw, 48px);
  --fs-statement:clamp(20px, 2.2vw, 26px);
  --fs-body:     clamp(17px, 1.4vw, 20px);
  --fs-caption:  clamp(11px, 0.9vw, 13px);
  --fs-nav:      14px;
  --fs-label:    11px;

  --lh-tight:  1.15;
  --lh-body:   1.6;
  --lh-loose:  1.75;

  --space-xs:  24px;
  --space-sm:  48px;
  --space-md:  80px;
  --space-lg:  120px;
  --space-xl:  200px;

  --margin-side: clamp(24px, 5.5vw, 120px);
  --max-text:    65ch;

  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --t-base:      0.4s var(--ease-smooth);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { scroll-behavior: smooth; }
body {
  background: var(--c-white);
  color: var(--c-ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  width: 100%;
  max-width: none;
  overflow-x: hidden;
}
img    { display: block; max-width: 100%; height: auto; }
a      { color: inherit; text-decoration: none; }
ul     { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ============================================================
   UTILITY
   ============================================================ */
/* Nasconde visivamente senza nascondere ai lettori di schermo (28/7/2026,
   pagina Artworks: titolo tolto dalla vista ma serve comunque un H1 per la
   struttura della pagina). Tecnica standard, non un display:none. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.section-title {
  font-family: 'Work Sans', system-ui, sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--c-ink);
}
.separator {
  width: 100%;
  height: 1px;
  background: var(--c-beige);
  border: none;
  margin: 0;
}
.btn {
  display: inline-block;
  padding: 11px 26px;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-nav);
  font-weight: 400;
  letter-spacing: 0.025em;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: opacity var(--t-base);
  text-decoration: none;
}
.btn:hover          { opacity: 0.78; }
.btn-slate          { background: var(--c-slate); color: #fff; }
.btn-ink            { background: var(--c-ink);   color: #fff; }
.btn-outline        { background: transparent; color: var(--c-ink); border: 1px solid var(--c-beige); }
.btn-outline:hover  { border-color: var(--c-ink); opacity: 1; }

/* ============================================================
   SCROLL REVEAL
   Fix 19/7/2026 (1): senza JavaScript gli elementi .reveal restavano a
   opacita' zero e tutta la pagina sotto la hero era invisibile. Ora lo stato
   nascosto e' condizionato alla classe .js, che lo script inline nello <head>
   mette su <html> solo quando il JavaScript gira davvero: chi non ha JS vede
   la pagina intera, ferma. Durata scesa da 0.9s a 0.5s e ritardi dimezzati.
   ============================================================ */
.reveal {
  opacity: 1;
  transform: none;
}
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth);
}
.js .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.js .reveal[data-delay="1"] { transition-delay: 0.05s; }
.js .reveal[data-delay="2"] { transition-delay: 0.10s; }
.js .reveal[data-delay="3"] { transition-delay: 0.15s; }
.js .reveal[data-delay="4"] { transition-delay: 0.20s; }
.js .reveal[data-delay="5"] { transition-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .parallax-hero { transform: none !important; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 12px var(--margin-side);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: rgba(250, 250, 248, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Linea sotto il menu (28/7/2026): prima era trasparente e si accendeva solo
     dopo 50px di scroll, quindi in cima alle pagine con fondo avorio l'header
     si scioglieva nella pagina. Ora la linea c'e' da subito: e' il quarto lato
     della griglia beige che l'header disegna gia' (bordo del logo, bordi tra le
     voci, bordo della lingua). Fa eccezione .site-header--su-foto, cioe' home e
     schede opera, dove sotto parte una foto a tutta larghezza che fa gia' da
     bordo: li' la linea resta al comportamento vecchio. */
  border-bottom: 1px solid var(--c-beige);
  transition: border-color 0.3s;
}
.site-header--su-foto { border-bottom-color: transparent; }
.site-header.scrolled,
.site-header--su-foto.scrolled { border-bottom-color: var(--c-beige); }

.header-logo {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-shrink: 0;
  text-decoration: none;
}
.logo-mark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 27px;
  color: var(--c-ink);
  line-height: 1;
}
.logo-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-variant: small-caps;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--c-ink);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav a {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-nav);
  font-weight: 400;
  color: var(--c-ink);
  letter-spacing: 0.02em;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.3s;
  position: relative;
}
.site-nav a:hover { opacity: 1; }
.site-nav a.active {
  opacity: 1;
}
.site-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: var(--c-ink);
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-nav);
  flex-shrink: 0;
  margin-left: 12px;
  padding-left: 16px;
  border-left: 1px solid var(--c-beige);
}
.lang-toggle a { color: var(--c-ink); transition: opacity 0.3s; }
.lang-toggle a.current {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.lang-toggle a:not(.current) { opacity: 0.38; }
.lang-toggle a:not(.current):hover { opacity: 0.7; }
.lang-sep { opacity: 0.28; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--c-ink);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  width: 100%;
  height: 90vh;
  min-height: 480px;
  position: relative;
  overflow: hidden;
  margin-top: 0;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 112%;
  top: -6%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

/* ============================================================
   HOME — STATEMENT
   ============================================================ */
.home-statement {
  padding: var(--space-lg) var(--margin-side);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-statement p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-statement);
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  max-width: 52ch;
  color: var(--c-ink);
  margin-bottom: 0.65em;
}
.home-statement p:last-child { margin-bottom: 0; }

/* ============================================================
   HOME — ABOUT
   ============================================================ */
.home-about {
  padding: var(--space-lg) var(--margin-side);
  background: var(--c-beige);
}
.about-label { margin-bottom: 28px; }
.about-body {
  max-width: var(--max-text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-loose);
  color: var(--c-ink);
}

/* ============================================================
   HOME — WORKS
   ============================================================ */
.home-works { padding: var(--space-lg) var(--margin-side); }
.home-works-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.works-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: var(--space-md);
}
.works-mini-grid .work-item:nth-child(3) {
  grid-column: 1 / -1;
}

.work-item { position: relative; }
.work-item a { display: block; }
.work-item-img-wrap {
  overflow: hidden;
  position: relative;
}
.work-item-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(51, 41, 31, 0);
  transition: background 0.55s var(--ease-smooth);
  pointer-events: none;
}
.work-item:hover .work-item-img-wrap::after { background: rgba(51, 41, 31, 0.36); }
.work-item img {
  width: 100%;
  display: block;
  transition: transform 0.75s var(--ease-smooth);
}
.work-item:hover img { transform: scale(1.03); }

.works-mini-grid .work-item:nth-child(1) img { aspect-ratio: 3/4; object-fit: cover; }
.works-mini-grid .work-item:nth-child(2) img { aspect-ratio: 4/3; object-fit: cover; }
.works-mini-grid .work-item:nth-child(3) img { aspect-ratio: 16/6; object-fit: cover; }

.work-item-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}
.work-item:hover .work-item-overlay { opacity: 1; transform: translateY(0); }
.work-item-overlay span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}
.work-meta { margin-top: 10px; }
.work-meta h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.3;
  color: var(--c-ink);
  margin-bottom: 4px;
}
.work-meta .work-caption {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--fs-caption);
  color: var(--c-terracotta);
  letter-spacing: 0.03em;
  display: block;
}

/* ============================================================
   HOME — KERAS PREVIEW
   ============================================================ */
.home-keras {
  padding: var(--space-lg) var(--margin-side);
  background: var(--c-beige);
}
.home-keras-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}
.home-keras blockquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(21px, 2.8vw, 30px);
  font-weight: 400;
  max-width: 48ch;
  line-height: 1.55;
  color: var(--c-ink);
  margin-bottom: 14px;
}
.home-keras .keras-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-body);
  max-width: var(--max-text);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-sm);
}

/* ============================================================
   HOME — JOURNAL PREVIEW
   ============================================================ */
.home-journal { padding: var(--space-lg) var(--margin-side); }
.home-journal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.journal-featured-home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.journal-featured-home img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.jf-text { padding-top: 6px; }
.jf-date {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-caption);
  font-weight: 300;
  color: var(--c-terracotta);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  display: block;
}
.jf-text h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.3;
  color: var(--c-ink);
  margin-bottom: 14px;
}
.jf-text p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--c-ink);
  max-width: 44ch;
  margin-bottom: 24px;
}
.text-link {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-nav);
  color: var(--c-ink);
  text-decoration: none;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--c-beige);
  padding-bottom: 2px;
  transition: border-color 0.3s;
}
.text-link:hover { border-color: var(--c-ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  padding: var(--space-md) var(--margin-side);
  border-top: 1px solid var(--c-beige);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-variant: small-caps;
  font-size: 12px;
  letter-spacing: 0.13em;
  color: var(--c-ink);
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer-links a {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-nav);
  color: var(--c-ink);
  opacity: 0.55;
  transition: opacity 0.3s;
}
.footer-links a:hover { opacity: 1; }
.footer-copy {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 11px;
  color: var(--c-ink);
  opacity: 0.35;
}

/* ============================================================
   ARTWORKS PAGE
   ============================================================ */
.artworks-page {
  padding-top: calc(65px + var(--space-lg));
}
.artworks-page-header {
  padding: 0 var(--margin-side) var(--space-sm);
}
.artworks-grid {
  padding: 0 var(--margin-side) var(--space-xl);
}

/* Block A: two-column */
.grid-block-a {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
/* Block B: full-width single */
.grid-block-b .artwork-item-img-wrap {
  width: 100%;
}
.grid-block-b .artwork-item img {
  width: 100%;
  height: 70vh;
  object-fit: cover;
}
.grid-spacer {
  height: var(--space-md);
}

.artwork-item { position: relative; cursor: pointer; }
.artwork-item a { display: block; }
.artwork-item-img-wrap {
  overflow: hidden;
  position: relative;
}
.artwork-item-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(51, 41, 31, 0);
  transition: background 0.55s var(--ease-smooth);
  pointer-events: none;
}
.artwork-item:hover .artwork-item-img-wrap::after { background: rgba(51, 41, 31, 0.4); }
.artwork-item img {
  display: block;
  width: 100%;
  transition: transform 0.75s var(--ease-smooth);
}
.grid-block-a .artwork-item img {
  aspect-ratio: 4/3;
  object-fit: cover;
}
.artwork-item:hover img { transform: scale(1.025); }

.artwork-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}
.artwork-item:hover .artwork-overlay { opacity: 1; transform: translateY(0); }
.artwork-overlay span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  color: #fff;
}

.artwork-caption { margin-top: 12px; }
.artwork-caption h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.3;
  color: var(--c-ink);
  margin-bottom: 4px;
}
.grid-block-b .artwork-caption h2 {
  font-size: clamp(24px, 3vw, 38px);
}
.artwork-caption .artwork-meta {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--fs-caption);
  color: var(--c-terracotta);
  letter-spacing: 0.04em;
}

/* ============================================================
   SINGLE ARTWORK PAGE — redesign 28/7/2026, opzione A
   Prima: hero a tutta larghezza (85vh) sopra una colonna di testo stretta
   (65ch) allineata a sinistra, con tutto il resto della pagina vuoto.
   Ispirata al portfolio di Angelica: titolo enorme e pallido invece della
   hero, foto accanto al testo invece che sopra, distanza testo/citazione e
   dimensione dei due caratteri riavvicinate.
   ============================================================ */
.artwork-single-v2 { padding-top: 0; }

.artwork-head {
  padding: calc(var(--space-md) + 44px) var(--margin-side) 0;
}
/* Rimpicciolito (28/7/2026): partiva da clamp(80,13vw,200), quasi mezzo
   schermo su desktop, "fa schifo" secondo Angelica. Dimezzato abbondante. */
.artwork-title-big {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 110px);
  line-height: 0.9;
  color: var(--c-beige);
  margin: 0 0 4px;
  /* Allineamento ottico col margin-left, non geometrico: verificato che il
     bordo del box di titolo e anno coincide già al pixel (misurato in
     browser, 79px su 79px). Lo scarto che si vede è lo spazio proprio del
     glifo del Cormorant Garamond prima dell'inchiostro: -0.02em lo compensa
     senza spostare la scatola. */
  margin-left: -0.02em;
  letter-spacing: -0.01em;
}
.artwork-meta-line {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--fs-caption);
  color: var(--c-terracotta);
  letter-spacing: 0.06em;
  display: block;
}

.artwork-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding: var(--space-md) var(--margin-side) 0;
}
.artwork-media img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}
/* Forms of Becoming: la scultura risultava decentrata nel crop 4:5 di default
   (segnalato da Angelica il 28/8, screenshot mobile). Aggancio via data-slug
   sulla scheda, stesso pattern già usato per inner-unknown/metamorfosi
   nell'indice Works. */
.artwork-media[data-slug="forms-of-becoming"] img { object-position: 35% center; }
/* Inner Unknown: stesso problema già risolto nell'indice Works (vaso/base in
   basso nell'inquadratura, il crop centrato di default lo tagliava). Segnalato
   da Angelica il 28/8 anche sulla scheda opera, non solo sull'indice. */
.artwork-media[data-slug="inner-unknown"] img { object-position: center 88%; }
.artwork-text-col { max-width: var(--max-text); }

/* Sottotitolo poetico + origine (28/7/2026, Angelica: struttura del suo
   portfolio — titolo, sottotitolo, eventuale nota di origine, poi il testo).
   .artwork-origin esiste in pagina solo per Medèn, l'unica con questo dato. */
.artwork-subtitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.2;
  color: var(--c-ink);
  margin-bottom: 12px;
}
.artwork-origin {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-caption);
  color: var(--c-slate);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-xs);
}

.artwork-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-loose);
  color: var(--c-ink);
  margin-bottom: var(--space-xs);
}
.artwork-text p { margin-bottom: 1em; }
.artwork-text p:last-child { margin-bottom: 0; }

.artwork-foot { padding: 0 var(--margin-side); }
.artwork-back {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-nav);
  color: var(--c-ink);
  opacity: 0.5;
  transition: opacity 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.artwork-back:hover { opacity: 1; }

/* ============================================================
   K.E.R.A.S. PAGE
   ============================================================ */
.keras-page { padding-top: 0; }
.keras-hero {
  width: 100%;
  height: 68vh;
  min-height: 380px;
  overflow: hidden;
  position: relative;
}
.keras-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 112%;
  top: -6%;
  object-fit: cover;
  will-change: transform;
}
.keras-intro {
  padding: var(--space-lg) var(--margin-side) var(--space-md);
}
.keras-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(52px, 8vw, 96px);
  line-height: 1;
  color: var(--c-ink);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.keras-acronym {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  color: var(--c-terracotta);
  margin-bottom: var(--space-sm);
  display: block;
}
.keras-what {
  padding: var(--space-md) var(--margin-side) var(--space-lg);
}
.keras-what-label { margin-bottom: 28px; }
.keras-what-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-loose);
  max-width: var(--max-text);
  color: var(--c-ink);
}
.keras-what-text p { margin-bottom: 0.9em; }
.keras-what-text p:last-child { margin-bottom: 0; }

.keras-pillars {
  padding: var(--space-lg) var(--margin-side);
}
.keras-pillars-label { margin-bottom: var(--space-md); }
.pillars-list { display: flex; flex-direction: column; }
.pillar-item {
  padding: 32px 0;
  border-bottom: 1px solid var(--c-beige);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}
.pillar-item:first-child { border-top: 1px solid var(--c-beige); }
.pillar-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.3;
  color: var(--c-ink);
}
.pillar-desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-ink);
}

.keras-audience {
  padding: var(--space-lg) var(--margin-side);
  background: var(--c-beige);
}
.keras-audience-label { margin-bottom: var(--space-md); }
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.audience-col h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 27px);
  margin-bottom: 14px;
  color: var(--c-ink);
}
.audience-col p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.68;
  color: var(--c-ink);
}

.keras-how { padding: var(--space-lg) var(--margin-side); }
.keras-how-label { margin-bottom: 28px; }
.keras-how p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  max-width: var(--max-text);
  color: var(--c-ink);
}

.keras-cta {
  padding: var(--space-lg) var(--margin-side) var(--space-xl);
  text-align: center;
}
.keras-cta blockquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 2.8vw, 30px);
  line-height: 1.55;
  max-width: 42ch;
  margin: 0 auto var(--space-sm);
  color: var(--c-ink);
}

/* ============================================================
   JOURNAL PAGE
   ============================================================ */
.journal-page {
  padding-top: calc(65px + var(--space-md));
}
.journal-page-header {
  padding: 0 var(--margin-side) var(--space-sm);
}
.journal-featured {
  padding: 0 var(--margin-side) var(--space-lg);
}
.journal-feat-img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  display: block;
  margin-bottom: 28px;
}
.feat-date {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--fs-caption);
  color: var(--c-terracotta);
  letter-spacing: 0.055em;
  margin-bottom: 14px;
  display: block;
}
.feat-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.15;
  color: var(--c-ink);
  max-width: 22ch;
  margin-bottom: 16px;
}
.feat-abstract {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.65;
  max-width: 52ch;
  color: var(--c-ink);
  margin-bottom: 24px;
}

.journal-list {
  padding: var(--space-md) var(--margin-side);
}
.journal-list-label { margin-bottom: var(--space-md); }

.post-row {
  display: grid;
  grid-template-columns: 130px 1fr 28px;
  gap: 24px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--c-beige);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}
.post-row:first-of-type { border-top: 1px solid var(--c-beige); }
.post-row:hover { opacity: 0.65; }
.post-date {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--fs-caption);
  color: var(--c-terracotta);
  letter-spacing: 0.04em;
  padding-top: 3px;
}
.post-content h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.35;
  color: var(--c-ink);
  margin-bottom: 5px;
}
.post-content p {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-ink);
  opacity: 0.6;
}
.post-arrow {
  font-size: 17px;
  color: var(--c-ink);
  opacity: 0.38;
  align-self: center;
}

.journal-cta {
  padding: var(--space-lg) var(--margin-side) var(--space-xl);
  text-align: center;
}
.journal-cta blockquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 2.4vw, 26px);
  max-width: 44ch;
  margin: 0 auto var(--space-sm);
  line-height: 1.55;
  color: var(--c-ink);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page {
  padding-top: calc(65px + var(--space-lg));
  padding-bottom: var(--space-xl);
}
.contact-header {
  padding: 0 var(--margin-side) var(--space-md);
}
.contact-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 2.8vw, 28px);
  max-width: 38ch;
  line-height: 1.55;
  color: var(--c-ink);
  margin-top: var(--space-sm);
}
.contact-form-wrap {
  padding: 0 var(--margin-side) var(--space-md);
  max-width: calc(600px + 2 * var(--margin-side));
}
.contact-form { display: flex; flex-direction: column; gap: 24px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink);
  opacity: 0.6;
}
.form-group input,
.form-group textarea {
  background: var(--c-white);
  border: 1px solid var(--c-beige);
  border-radius: 2px;
  padding: 13px 15px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  color: var(--c-ink);
  outline: none;
  transition: border-color 0.3s;
  width: 100%;
  resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--c-ink); }
.form-group textarea { min-height: 160px; }
.form-submit { align-self: flex-start; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .journal-featured-home { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 768px) {
  :root {
    --margin-side: 24px;
    --space-lg:    80px;
    --space-md:    48px;
    --space-xl:    120px;
  }

  .site-nav {
    display: none;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--c-white);
    z-index: 200;
    align-items: center;
    justify-content: center;
    gap: 36px;
  }
  .site-nav.open { display: flex; }
  .site-nav.open a { font-size: 18px; opacity: 0.8; }
  .site-nav.open a.active { opacity: 1; }
  .nav-toggle { display: flex; z-index: 210; position: relative; }

  .works-mini-grid {
    grid-template-columns: 1fr;
  }
  .works-mini-grid .work-item:nth-child(1) img,
  .works-mini-grid .work-item:nth-child(2) img { aspect-ratio: 4/3; }
  .works-mini-grid .work-item:nth-child(3) img { aspect-ratio: 4/3; }
  .works-mini-grid .work-item:nth-child(3) { grid-column: auto; }

  .grid-block-a { grid-template-columns: 1fr; }
  .grid-block-b .artwork-item img { height: 50vw; }

  .audience-grid { grid-template-columns: 1fr; gap: 36px; }
  .pillar-item { grid-template-columns: 1fr; gap: 10px; }

  .post-row { grid-template-columns: 80px 1fr 24px; gap: 12px; }

  .site-footer { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-links { flex-wrap: wrap; gap: 16px; }
}

/* ============================================================
   HOME REDESIGN — HEADER LOGO IMG
   ============================================================ */
.header-logo img {
  height: 38px;
  width: auto;
  display: block;
  border: none;
}

/* ============================================================
   HOME REDESIGN — HERO OVERLAY
   ============================================================ */
.hero-v2 {
  width: 100%;
  height: 100vh;
  min-height: 500px;
  position: relative;
  overflow: hidden;
}
.hero-v2 .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 112%;
  top: -6%;
  object-fit: cover;
  object-position: 80% center;
  will-change: transform;
}
/* Scrim della hero (fix 19/7/2026, punto 3): il claim bianco sulla foto grigio
   chiara era al limite della leggibilita'. Velo a gradiente in --c-ink, denso
   dal lato del testo e nullo a meta' immagine: la foto non si scurisce. */
.hero-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(51, 41, 31, 0.30) 0%,
    rgba(51, 41, 31, 0.16) 34%,
    rgba(51, 41, 31, 0) 62%
  );
}
.hero-overlay {
  position: absolute;
  top: 30%;
  left: 0;
  padding: 0 var(--margin-side);
  z-index: 2;
}
.hero-overlay-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 24px rgba(0,0,0,0.30);
}
.hero-overlay-text em {
  font-style: italic;
  font-weight: 400;
}

/* ============================================================
   HOME REDESIGN — STATEMENT LEFT-ALIGNED
   ============================================================ */
.home-statement-v2 {
  padding: var(--space-lg) var(--margin-side);
}
.home-statement-label {
  display: block;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink);
  opacity: 0.5;
  margin-bottom: 40px;
}
.home-statement-v2 p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-statement);
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
  color: var(--c-ink);
}
.home-statement-v2 p + p {
  margin-top: 28px;
}
.home-statement-v2 p.statement-closing {
  margin-top: 36px;
  font-style: italic;
}

/* ============================================================
   HOME REDESIGN — OUTLINE BUTTON (global home default)
   ============================================================ */
.btn-outline-ink {
  display: inline-block;
  padding: 11px 26px;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-nav);
  font-weight: 400;
  letter-spacing: 0.04em;
  border: 1px solid var(--c-ink);
  background: transparent;
  color: var(--c-ink);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base), color var(--t-base);
}
.btn-outline-ink:hover {
  background: var(--c-ink);
  color: #fff;
  opacity: 1;
}

/* ============================================================
   HOME REDESIGN — WORKS SECTION
   ============================================================ */
.home-works-v2 { padding: var(--space-sm) 0 0; }
.home-works-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--margin-side) 28px;
}
.home-works-grid .work-card:first-child .work-card-img-wrap,
.home-works-grid .work-card:nth-child(2) .work-card-img-wrap {
  /* top gap already from separator */
}

.home-works-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 0;
}
.home-works-grid .work-card:nth-child(3) {
  grid-column: 1 / -1;
}

.work-card {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.work-card a {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

/* image wrap */
.work-card-img-wrap {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.work-card:nth-child(1) .work-card-img-wrap img,
.work-card:nth-child(2) .work-card-img-wrap img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.75s var(--ease-smooth);
}
.work-card:nth-child(3) .work-card-img-wrap img {
  width: 100%;
  aspect-ratio: 16/6;
  object-fit: cover;
  display: block;
  transition: transform 0.75s var(--ease-smooth);
}
.work-card:hover .work-card-img-wrap img { transform: scale(1.025); }

/* pill tags overlay */
.work-tags {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 2;
}
.work-tag {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.65);
  padding: 4px 10px;
  background: rgba(0,0,0,0.18);
  white-space: nowrap;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* caption box below image */
.work-caption-box {
  background: transparent;
  border: 1px solid var(--c-beige);
  padding: 14px 20px;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.work-caption-box p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-ink);
  transition: color var(--t-base);
}
/* Velo carta da zucchero (28/7/2026): stessa coppia di valori dell'attiva del
   menu, fondo al 35% e testo #4e5c66 invece di slate pieno e bianco. Qui non
   c'è il problema di leggibilità dei tag sopra le foto: il riquadro sta sullo
   sfondo piatto della pagina, non su un'immagine, quindi il calcolo di
   contrasto già fatto per il menu (4,85:1) vale identico. */
.work-card:hover .work-caption-box {
  background: rgba(143, 156, 164, 0.35);
  border-color: rgba(143, 156, 164, 0.35);
}
.work-card:hover .work-caption-box p {
  color: #4e5c66;
}

/* ============================================================
   HOME REDESIGN — K.E.R.A.S. SECTION
   ============================================================ */
.home-keras-v2 {
  padding: 0;
  overflow: hidden;
}
.home-keras-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--margin-side) 28px;
}
.home-keras-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.home-keras-split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-md) clamp(24px, 4vw, 64px) var(--space-md) var(--margin-side);
}
.keras-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: var(--c-ink);
  margin-bottom: 20px;
}
.keras-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-ink);
}
.home-keras-split-img {
  display: flex;
  align-self: stretch;
}
.home-keras-split-img img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}
.home-keras-cta-bar {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid var(--c-beige);
  border-left: none;
  border-right: none;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  transition: background var(--t-base), color var(--t-base);
}
.home-keras-cta-bar:hover { background: var(--c-slate); }
.home-keras-cta-bar:hover span { color: #fff; }
.home-keras-cta-bar span {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-nav);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-terracotta);
  transition: color var(--t-base);
}
.home-keras-split-text .section-title {
  margin-bottom: 20px;
  opacity: 0.6;
}

/* ============================================================
   HOME REDESIGN — JOURNAL SECTION
   ============================================================ */
.home-journal-v2 { padding: var(--space-lg) var(--margin-side) var(--space-md); }
.home-journal-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.home-journal-split {
  display: grid;
  grid-template-columns: 44fr 56fr;
  gap: 56px;
  align-items: center;
  margin-top: 0;
}
.home-journal-split-img img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.home-journal-text .jf-date {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-caption);
  font-weight: 300;
  color: var(--c-terracotta);
  letter-spacing: 0.055em;
  margin-bottom: 12px;
  display: block;
}
.home-journal-text h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.35;
  color: var(--c-ink);
  margin-bottom: 16px;
}
.home-journal-text p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink);
  opacity: 0.8;
  margin-bottom: 20px;
}
.home-journal-read-link {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-nav);
  color: var(--c-ink);
  text-decoration: none;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--c-ink);
  padding-bottom: 1px;
  display: inline-block;
  transition: opacity 0.3s;
}
.home-journal-read-link:hover { opacity: 0.55; }

/* ============================================================
   HOME REDESIGN — ABOUT SECTION (v3, 18/7/2026 notte: niente più foto,
   griglia a tre colonne con divisori come il Journal — vedi build.py)
   ============================================================ */
.about-v2-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.1;
  color: var(--c-ink);
  margin-bottom: 8px;
}
.about-v2-subtitle {
  display: block;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-terracotta);
  margin-bottom: 32px;
}
.about-v2-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.75;
  color: var(--c-ink);
  text-align: justify;
  hyphens: auto;
  margin-bottom: 18px;
}

/* ============================================================
   HOME REDESIGN — FOOTER NEW
   ============================================================ */
.footer-new {
  border-top: 1px solid var(--c-beige);
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* Logo ingrandito, di nuovo a lato (29/7/2026): il giro precedente l'aveva
   spostato in una riga sua, centrata in orizzontale — non era quello che
   intendeva Angelica ("centrato a livello di altezza non di larghezza,
   sempre laterale il logo"). Torna nella riga col nav, a sinistra;
   align-items: center sul contenitore lo centra in verticale rispetto al
   nav, che ora è più basso di lui. */
.footer-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--margin-side);
  gap: 24px;
}
.footer-logo-link img {
  height: 88px;
  width: auto;
  display: block;
  border: none;
}
.footer-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer-nav a {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-nav);
  color: var(--c-ink);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.3s;
  letter-spacing: 0.02em;
}
.footer-nav a:hover { opacity: 1; }
.footer-row-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 16px var(--margin-side);
}
.footer-row-social a {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-nav);
  color: var(--c-ink);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.3s;
}
.footer-row-social a:hover { opacity: 1; }
.footer-row-legal {
  border-top: 1px solid var(--c-beige);
  padding: 16px var(--margin-side);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-row-legal span,
.footer-row-legal a {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 11px;
  color: var(--c-ink);
  opacity: 0.4;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.footer-row-legal a:hover { opacity: 0.7; }
.footer-legal-sep { opacity: 0.25; }

/* ============================================================
   V2 EXPERIMENT — index-v2.html
   Boxed nav + 3-col grids (Statement · K.E.R.A.S. · Journal)
   ============================================================ */

/* --- Boxed navigation --- */
.site-nav-boxed { gap: 0; }
.site-nav-boxed a {
  border: 1px solid var(--c-beige);
  border-left: none;
  padding: 9px 22px;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-nav);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-ink);
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.site-nav-boxed a:first-child { border-left: 1px solid var(--c-beige); }
.site-nav-boxed a:hover,
.site-nav-boxed a.active {
  background: var(--c-ink);
  color: var(--c-white);
  border-color: var(--c-ink);
}

/* --- Artist Statement V3 — 3-col grid --- */
.home-statement-v3 {
  display: grid;
  grid-template-columns: 1fr 2fr 2.5fr;
}
.stmt-col {
  padding: clamp(36px, 5vw, 72px) clamp(20px, 3vw, 48px);
  border-right: 1px solid var(--c-beige);
}
.stmt-col:first-child { padding-left: var(--margin-side); }
.stmt-col:last-child  { border-right: none; padding-right: var(--margin-side); }

.stmt-col--label {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.stmt-col--question p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(18px, 1.8vw, 24px);
  font-style: italic;
  line-height: 1.65;
}
.stmt-col--body p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
}
.stmt-col--body .stmt-closing {
  font-style: italic;
  border-top: 1px solid var(--c-beige);
  padding-top: 24px;
  margin-top: 28px;
}

/* --- K.E.R.A.S. V3 --- */
.home-keras-v3 { padding: 0; overflow: hidden; }
.keras3-cols {
  display: grid;
  grid-template-columns: 1fr 2fr 2.5fr;
}
.keras3-col {
  padding: clamp(36px, 5vw, 72px) clamp(20px, 3vw, 48px);
  border-right: 1px solid var(--c-beige);
}
.keras3-col:first-child { padding-left: var(--margin-side); }
.keras3-col:last-child  { border-right: none; padding-right: var(--margin-side); }

.keras3-col--label {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.keras3-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(20px, 2vw, 28px);
  font-style: italic;
  line-height: 1.5;
}
.keras3-col--body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.keras3-col--body p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
}
.keras3-img-strip {
  width: 100%;
  height: clamp(200px, 28vw, 420px);
  overflow: hidden;
  border-top: 1px solid var(--c-beige);
}
.keras3-img-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* --- Journal V3 --- */
.home-journal-v3 { padding: 0; overflow: hidden; }
.journal3-img-strip {
  width: 100%;
  height: clamp(180px, 24vw, 360px);
  overflow: hidden;
  border-bottom: 1px solid var(--c-beige);
}
.journal3-img-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.journal3-cols {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
}
.journal3-col {
  padding: clamp(36px, 5vw, 72px) clamp(20px, 3vw, 48px);
  border-right: 1px solid var(--c-beige);
}
.journal3-col:first-child { padding-left: var(--margin-side); }
.journal3-col:last-child  { border-right: none; padding-right: var(--margin-side); }

.journal3-col--label {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journal3-col--label .jf-date {
  display: block;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.5;
  margin-top: 6px;
}
.journal3-col--title h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(20px, 2vw, 28px);
  font-style: italic;
  line-height: 1.35;
}
.journal3-col--body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.journal3-col--body p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  opacity: 0.8;
}
.journal3-cta {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--c-beige);
  display: flex;
  justify-content: flex-end;
}

/* --- V2 responsive --- */
@media (max-width: 900px) {
  .home-statement-v3 { grid-template-columns: 1fr 1fr; }
  .stmt-col--label   { grid-column: 1 / -1; border-right: none; border-bottom: 1px solid var(--c-beige); padding-bottom: clamp(16px, 2vw, 24px); }
  .keras3-cols       { grid-template-columns: 1fr 1fr; }
  .keras3-col--label { grid-column: 1 / -1; border-right: none; border-bottom: 1px solid var(--c-beige); padding-bottom: clamp(16px, 2vw, 24px); }
  .journal3-cols     { grid-template-columns: 1fr 1fr; }
  .journal3-col--label { grid-column: 1 / -1; border-right: none; border-bottom: 1px solid var(--c-beige); padding-bottom: clamp(16px, 2vw, 24px); }
}

@media (max-width: 600px) {
  .home-statement-v3,
  .keras3-cols,
  .journal3-cols { grid-template-columns: 1fr; }
  .stmt-col,
  .keras3-col,
  .journal3-col {
    border-right: none;
    border-bottom: 1px solid var(--c-beige);
    padding-left: var(--margin-side) !important;
    padding-right: var(--margin-side) !important;
  }
  .stmt-col:last-child,
  .keras3-col:last-child,
  .journal3-col:last-child { border-bottom: none; }
  .keras3-img-strip { height: 220px; }
  .journal3-img-strip { height: 200px; }
}

/* ============================================================
   V2 ROUND 2 — Full-width nav · Larger statement col 2 ·
                KERAS partial img · Journal split · Carousel
   ============================================================ */

/* Full-width brecon-style header */
.site-header-v2 {
  padding: 0 !important;
  display: flex !important;
  align-items: stretch;
  min-height: 62px;
}
.site-header-v2 .header-logo {
  padding: 0 clamp(16px, 2.5vw, 32px);
  border-right: 1px solid var(--c-beige);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.site-nav-full {
  display: flex;
  flex: 1;
  align-items: stretch;
}
.site-nav-full a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(8px, 1.5vw, 16px);
  border-right: 1px solid var(--c-beige);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-nav);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-terracotta);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-base), color var(--t-base);
}
/* stato base: il sistema definitivo e' piu' sotto, cerca
   "Sistema carta da zucchero a due densita'" */
.site-nav-full a:not(.active):hover {
  background: var(--c-ink);
  color: var(--c-white);
}
.site-header-v2 .lang-toggle {
  padding: 0 clamp(16px, 2.5vw, 28px) !important;
  display: flex !important;
  align-items: center;
  flex-shrink: 0;
}
.site-header-v2 .nav-toggle { display: none !important; }

/* Statement col 2 — large text override */
.home-statement-v3 .stmt-col--question p {
  font-size: clamp(28px, 3.2vw, 44px);
  font-style: normal;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* KERAS col 1 — Read more under title */
.keras3-col--label { gap: 20px; }
.keras-readmore {
  display: inline-block;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: var(--fs-nav);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-ink);
  line-height: 1.3;
  transition: opacity var(--t-base);
}
.keras-readmore:hover { opacity: 0.45; }

/* KERAS partial-width image — spans 2 of 3 columns */
.keras3-img-area {
  display: grid;
  grid-template-columns: 1fr 2fr 2.5fr;
  border-top: 1px solid var(--c-beige);
}
.keras3-img-wrap {
  grid-column: 1 / 3;
  overflow: hidden;
  border-right: 1px solid var(--c-beige);
}
.keras3-img-wrap img {
  width: 100%;
  height: clamp(220px, 30vw, 440px);
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Journal V3 — 2-col split (photo left / text right) */
.journal3-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(340px, 44vw, 600px);
}
.journal3-split-img {
  overflow: hidden;
  border-right: 1px solid var(--c-beige);
}
.journal3-split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.journal3-split-text {
  padding: clamp(40px, 5vw, 80px) clamp(28px, 4vw, 60px);
  padding-right: var(--margin-side);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.journal3-split-text h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(22px, 2.2vw, 32px);
  font-style: italic;
  line-height: 1.35;
}
.journal3-split-text > p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  opacity: 0.8;
}
.journal3-split-footer {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--c-beige);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.journal3-split-footer .jf-date {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.5;
}
.journal3-journal-btn {
  padding-top: 16px;
}

/* Artwork carousel */
.artwork-carousel-section { padding: 0; }
.artwork-carousel-header {
  padding: clamp(24px, 3.5vw, 48px) var(--margin-side);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--c-beige);
}
.carousel-nav { display: flex; }
/* Frecce piu' grandi e area di click piu' generosa (fix 19/7/2026, punto 5):
   erano 18px in un riquadro da 8x20, difficili da centrare col dito. */
.carousel-btn {
  border: 1px solid var(--c-beige);
  border-left: none;
  padding: 0 26px;
  min-width: 64px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  /* Terracotta a riposo (28/7, scelta di Angelica): è il colore a riposo delle
     voci del menu e delle etichette di sezione, quindi le frecce entrano in una
     famiglia che esiste già invece di stare da sole in nero. Il colore lo eredita
     l'SVG via currentColor. */
  color: var(--c-terracotta);
  background: transparent;
  transition: background var(--t-base), color var(--t-base), opacity var(--t-base);
}
.carousel-btn .carousel-arrow { display: block; }
.carousel-btn:first-child { border-left: 1px solid var(--c-beige); }
/* Hover delle frecce (28/7, scelta di Angelica): carta da zucchero pieno e
   freccia bianca, come gli hover di CTA e subscribe decisi il 19/7. Prima
   andavano a --c-ink pieno, l'unico nero pieno di tutta la pagina in una
   palette di grigi caldi. */
.carousel-btn:hover {
  background: var(--c-slate);
  color: var(--c-white);
  border-color: var(--c-slate);
}
.carousel-btn.is-disabled { opacity: 0.28; pointer-events: none; }
.carousel-track-wrap { overflow: hidden; }
.carousel-track {
  display: flex;
  transition: transform 0.55s var(--ease-smooth);
}
.carousel-slide {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--c-beige);
}
.carousel-slide:last-child { border-right: none; }
.carousel-slide-img { overflow: hidden; }
.carousel-slide-img img {
  width: 100%;
  height: clamp(280px, 34vw, 500px);
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-smooth);
}
.carousel-slide:hover .carousel-slide-img img { transform: scale(1.03); }
.carousel-slide-caption {
  padding: 14px 20px;
  border-top: 1px solid var(--c-beige);
  border-bottom: 1px solid var(--c-beige);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.carousel-slide-caption .work-tag {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

/* V2 R2 responsive */
@media (max-width: 900px) {
  .site-nav-full { display: none !important; }
  .site-header-v2 .nav-toggle { display: flex !important; }
  .journal3-split { grid-template-columns: 1fr; }
  .journal3-split-img { display: none; }
  .keras3-img-area { grid-template-columns: 1fr 1fr; }
  .keras3-img-wrap { grid-column: 1 / 2; border-right: none; }
  .carousel-slide { flex: 0 0 66.666%; }
}
@media (max-width: 600px) {
  .journal3-split-text { padding: var(--space-sm) var(--margin-side); }
  .keras3-img-area { grid-template-columns: 1fr; }
  .keras3-img-wrap { grid-column: 1; }
  .carousel-slide { flex: 0 0 84%; }
}

/* ============================================================
   V2 ROUND 3 — Journal 3-col grid · About fullimg · Carousel strip
   ============================================================ */

/* All section labels/titles — terracotta */
.home-statement-v3 .home-statement-label { color: var(--c-terracotta); opacity: 1; }
.section-title { color: var(--c-terracotta); }

/* Statement col 2 — slightly smaller, no orphan */
.home-statement-v3 .stmt-col--question p {
  text-wrap: pretty;
  font-size: clamp(22px, 2.6vw, 36px);
  font-style: normal;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Carousel nav row — no title, arrows right-aligned */
.carousel-nav-row {
  display: flex;
  justify-content: flex-end;
  padding: 14px var(--margin-side);
}

/* Journal V3 full grid (3 cols × 3 rows) */
.home-journal-v3 { padding: 0; }
.journal3-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
}
/* shared cell base */
.j3c { border-right: 1px solid var(--c-beige); }

/* Row 1 — text columns */
.j3-c1 {
  grid-column: 1; grid-row: 1;
  padding: clamp(36px, 5vw, 72px) clamp(20px, 3vw, 48px);
  padding-left: var(--margin-side);
  border-bottom: 1px solid var(--c-beige);
}
.j3-c2 {
  grid-column: 2; grid-row: 1;
  padding: clamp(36px, 5vw, 72px) clamp(20px, 3vw, 48px);
  border-bottom: 1px solid var(--c-beige);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.j3-c3 {
  grid-column: 3; grid-row: 1;
  border-right: none;
  padding: clamp(36px, 5vw, 72px) clamp(20px, 3vw, 48px);
  padding-right: var(--margin-side);
  border-bottom: 1px solid var(--c-beige);
}
.j3-c2 .jf-date {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.5;
}
.j3-c2 h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(22px, 2.2vw, 32px);
  font-style: italic;
  line-height: 1.3;
}
.j3-c3 p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  opacity: 0.8;
}

/* Row 2 — image spans col 1+2, col 3 empty */
.j3-img {
  grid-column: 1 / 3; grid-row: 2;
  border-bottom: 1px solid var(--c-beige);
  overflow: hidden;
}
.j3-img img {
  width: 100%;
  height: clamp(260px, 32vw, 460px);
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.j3-empty {
  grid-column: 3; grid-row: 2;
  border-right: none;
  border-bottom: 1px solid var(--c-beige);
}

/* Row 3 — col 1 empty, newsletter in col 2 */
.j3-empty2 { grid-column: 1; grid-row: 3; }
.j3-newsletter {
  grid-column: 2; grid-row: 3;
  padding: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.j3-newsletter-label {
  display: block;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-terracotta);
  margin-bottom: 6px;
}
.j3-newsletter h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(20px, 2vw, 28px);
  font-style: italic;
  line-height: 1.35;
  margin-bottom: 4px;
}
.j3-newsletter-sub {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 13px;
  opacity: 0.55;
  margin-bottom: 16px;
}

/* About v3 (18/7/2026 notte): griglia a tre colonne con divisori, stesso
   linguaggio del Journal. Niente più foto: la terza colonna sono i sei
   valori fondativi, in Cormorant Garamond tono su tono, colore carta da
   zucchero (--c-slate) a bassa opacità — un watermark tipografico fermo,
   coerente con la tavola 01 dello specimen, non un incidente animato. */
.home-about-v3 { padding: 0; overflow: hidden; }
.about3-grid { display: grid; grid-template-columns: 1fr 2fr 3fr; }
.about3-label, .about3-text {
  border-right: 1px solid var(--c-beige);
  padding: clamp(56px, 7vw, 100px) clamp(20px, 3vw, 48px);
}
.about3-label { padding-left: var(--margin-side); }
.about3-values {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
.about3-values span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(38px, 4.4vw, 80px);
  line-height: 1.2;
  color: var(--c-slate);
  opacity: 0.3;
  white-space: nowrap;
  text-align: right;
  transform: translateX(clamp(2px, 0.3vw, 6px));
}

/* About home — spaziatura CTA (era attaccata al testo, segnalato in review) */
.about-v2-cta { display: inline-block; margin-top: 24px; }

/* Journal columns — top + bottom padding */
.j3-c1, .j3-c2, .j3-c3 {
  padding-top: clamp(56px, 7vw, 100px);
  padding-bottom: clamp(56px, 7vw, 100px);
}
/* Col 1 e Col 2: stesso padding-top così Journal label e data sono allineati */
.j3-c1, .j3-c2 { padding-top: clamp(28px, 3.5vw, 60px); }
/* Col 3: allineata all'h3 in col 2 */
.j3-c3 { padding-top: clamp(44px, 5.5vw, 78px); }

/* V2 micro-fixes */
.site-header-v2 { min-height: 44px !important; }
.site-header-v2 .header-logo { padding: 0 clamp(12px, 2vw, 24px); }
.site-header-v2 .header-logo img { height: 30px; }
.site-nav-full a { font-size: 12px !important; letter-spacing: 0.09em; }
.j3-c2 h3 { font-weight: 300; }
.j3-newsletter h3 { font-weight: 300; }
.j3-img img { object-position: center 90%; }
.j3-c2 .home-journal-read-link { align-self: flex-start; width: fit-content; }

/* Newsletter sub — Cormorant Garamond italic */
.j3-newsletter-sub {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic;
  font-size: var(--fs-body);
  opacity: 0.65;
  margin-bottom: 16px;
}

/* btn-outline-ink — uppercase text, terracotta color */
.btn-outline-ink {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 12px;
  color: var(--c-terracotta);
  border-color: var(--c-terracotta);
}

/* Subscribe button — beige border */
.j3-newsletter .btn-outline-ink { border-color: var(--c-beige); align-self: flex-start; }
.j3-newsletter .btn-outline-ink:hover,
.j3-newsletter .btn-outline-ink:active {
  background: var(--c-slate);
  border-color: var(--c-slate);
  color: var(--c-white);
}

/* See the works button — beige border */
.home-works-v2-header .btn-outline-ink { border-color: var(--c-beige); }

/* Sistema carta da zucchero a due densità — nav (28/7/2026, deciso con Angelica).
   Prima active e hover erano la stessa identica regola, fondo --c-slate pieno e
   testo bianco: lo stato attivo non diceva nulla.
   Le due densità vanno in questo verso, e non nell'altro: la voce dove sei è la
   più densa, quella che sfiori è più leggera. Con l'hover più denso dell'attivo
   (primo tentativo, 70%) la voce sfiorata pesava più della pagina in cui ti
   trovi, cioè l'oggetto più presente dello schermo diventava un posto dove non
   sei. Osservazione di Angelica.
   Il testo resta lo stesso in entrambi gli stati: sui veli pallidi #4e5c66
   regge (4,85:1 sul 35%, più in alto sul 18%), era il velo denso a farlo
   scendere a 3,49:1.
   La voce attiva NON risponde al passaggio del mouse: non è una destinazione. */
.site-nav-full a.active {
  background: rgba(143, 156, 164, 0.35);
  color: #4e5c66;
}
.site-nav-full a:not(.active):hover {
  background: rgba(143, 156, 164, 0.18);
  color: #4e5c66;
}
.btn-outline-ink:hover,
.btn-outline-ink:active {
  background: var(--c-slate);
  border-color: var(--c-slate);
  color: var(--c-white);
}

/* V2 R3 responsive */
@media (max-width: 900px) {
  .journal3-grid { grid-template-columns: 1fr 1fr; }
  .j3-c1 { grid-column: 1 / -1; border-right: none; }
  .j3-c2 { grid-column: 1; }
  .j3-c3 { grid-column: 2; border-right: none; }
  .j3-img { grid-column: 1 / -1; }
  .j3-empty, .j3-empty2 { display: none; }
  .j3-newsletter { grid-column: 1; }
}
@media (max-width: 600px) {
  .journal3-grid { grid-template-columns: 1fr; }
  .j3-c1, .j3-c2, .j3-c3, .j3-img, .j3-newsletter {
    grid-column: 1;
    border-right: none;
    padding-left: var(--margin-side) !important;
    padding-right: var(--margin-side) !important;
  }
}

/* ============================================================
   HOME REDESIGN — RESPONSIVE (overrides section)
   ============================================================ */
@media (max-width: 900px) {
  .home-journal-split { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* home redesign responsive */
  .hero-overlay { top: 28%; left: auto; right: 0; padding: 0 clamp(20px, 6vw, 48px); text-align: right; }
  .hero-overlay-text { font-size: clamp(24px, 5.5vw, 34px); }
  /* sotto i 768px il claim sta a destra: lo scrim si specchia (fix 19/7, 3) */
  .hero-v2::after {
    background: linear-gradient(
      260deg,
      rgba(51, 41, 31, 0.30) 0%,
      rgba(51, 41, 31, 0.16) 34%,
      rgba(51, 41, 31, 0) 62%
    );
  }
  .home-works-grid { grid-template-columns: 1fr; }
  .home-works-grid .work-card:nth-child(3) { grid-column: auto; }
  .home-keras-split { grid-template-columns: 1fr; }
  .home-keras-split-text { padding: var(--space-sm) var(--margin-side); }
  .home-keras-split-img { display: none; }
  .keras-img-mobile { display: block !important; }
  .home-journal-split { grid-template-columns: 1fr; }
  .home-journal-split-img { display: none; }
  .about3-grid { grid-template-columns: 1fr; }
  .about3-label, .about3-text { border-right: none; }
  .about3-values { display: none; }
  /* About mobile (19/7/2026): label e testo impilati avevano ciascuno il
     proprio padding verticale pieno (pensato per stare fianco a fianco),
     che sommandosi creava un vuoto enorme tra "About" e il titolo —
     segnalato in review. Ridotto qui, solo su mobile. */
  .about3-label { padding-bottom: 12px; }
  .about3-text { padding-top: 12px; }

  .footer-new { gap: 0; }
  /* Logo centrato e ridotto su mobile (29/7/2026): a 88px, allineato a
     sinistra come su desktop, dominava la riga su uno schermo stretto. */
  .footer-row-top { flex-direction: column; gap: 20px; align-items: center; }
  .footer-logo-link img { height: 56px; }
  /* Footer nav — in riga su mobile (fix 19/7/2026 sera: la colonna verticale
     non piaceva, richiesto orizzontale; con 5 voci corte va a capo da sola
     dove serve). line-height:1 sui link resta: senza, l'altezza ereditata
     dal body allungava ogni riga ben oltre il testo. */
  .footer-row-top .footer-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    align-items: center;
    width: 100%;
  }
  .footer-row-top .footer-nav a { line-height: 1; }
  /* Contact: visibile solo su desktop nel nav, mobile lo vede nella riga social */
  .footer-contact-desktop { display: none; }
  .footer-contact-mobile  { display: inline; }

  /* Lang toggle visibile sotto il nav */
  .footer-row-top .lang-toggle { order: 10; }

  /* Social row: Contact + Instagram + Substack in riga */
  .footer-row-social {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
  }

  /* Riga legale (fix 19/7/2026, v2): in riga con separatori "|" andava a
     capo in modo scomposto su schermi stretti — un pipe rimaneva orfano da
     solo su una riga, segnalato in review "completamente disallineati". Su
     mobile diventa una colonna centrata, senza separatori. La frase del
     copyright va a capo su due righe: senza text-align:center la seconda
     riga restava incollata a sinistra invece di centrarsi col resto —
     segnalato in un secondo giro di review. */
  .footer-row-legal {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .footer-legal-sep { display: none; }
}

/* ============================================================
   V2 MOBILE NAV OVERLAY
   ============================================================ */
.v2-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--c-white);
  z-index: 300;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.v2-mobile-nav.is-open { display: flex; }
.v2-mobile-nav__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.v2-mobile-nav__links a {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-terracotta);
  text-decoration: none;
  transition: color var(--t-base);
}
.v2-mobile-nav__links a:hover { color: var(--c-slate); }
.v2-mobile-nav__lang {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 13px;
}
.v2-mobile-nav__lang a { color: var(--c-ink); text-decoration: none; opacity: 0.6; }
.v2-mobile-nav__lang a.current { opacity: 1; text-decoration: underline; }
.v2-mobile-nav__close {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 24px;
  color: var(--c-ink);
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Work Sans', sans-serif;
  line-height: 1;
  padding: 8px;
}
@media (max-width: 900px) {
  .site-header-v2 .lang-toggle { display: none !important; }
}

/* Journal mobile-only Read it (after body text) */
.j3-mobile-readit { display: none; }

/* KERAS — immagine mobile (sotto Read more), nascosta su desktop */
.keras-img-mobile { display: none; }
.keras-img-mobile img {
  width: 100%;
  height: clamp(240px, 60vw, 420px);
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Footer: Contact link — desktop mostra nel nav, mobile mostra nella riga social */
.footer-contact-desktop { display: inline; }
.footer-contact-mobile  { display: none; }

/* ============================================================
   V2 MOBILE FIXES
   ============================================================ */

/* Hamburger — linee centrate verticalmente nel bottone */
@media (max-width: 900px) {
  .site-header-v2 .nav-toggle {
    justify-content: center;
    padding-top: 5px;
  }
}

/* Journal grid — reset grid-row so auto-placement works on mobile */
@media (max-width: 900px) {
  .j3-c1, .j3-c2, .j3-c3,
  .j3-img, .j3-empty, .j3-empty2, .j3-newsletter { grid-row: auto; }
}

@media (max-width: 600px) {
  .j3-c1, .j3-c2, .j3-c3,
  .j3-img, .j3-empty, .j3-empty2, .j3-newsletter {
    grid-row: auto;
    grid-column: 1;
    border-right: none;
    padding-left: var(--margin-side) !important;
    padding-right: var(--margin-side) !important;
  }
  .j3-empty, .j3-empty2 { display: none; }

  /* Foto della sezione Journal di home: non più full-bleed dopo aver tolto la
     foto da tra titolo e citazione (segnalato da Angelica il 28/8). La regola
     sopra dava padding laterale a tutti i blocchi, .j3-img incluso: qui lo
     tolgo solo per lei. */
  .j3-img { padding-left: 0 !important; padding-right: 0 !important; }

  /* Journal mobile — togli linea sotto "Journal", avvicina titolo e corpo.
     Valori del 28/8 (4px+4px) erano tarati per "Journal" seguito da data e
     titolo, tutto testo: con la foto spostata subito dopo "Journal" (stessa
     sessione, aggiustamento successivo) quello spazio era troppo stretto per
     una transizione testo-foto, e il titolo "sbatteva" subito sopra la foto
     dopo. Riaperti un po': non tornano ai valori originali (quelli erano
     ancora più larghi, pensati per tre blocchi di solo testo). */
  .j3-c1 {
    border-bottom: none !important;
    padding-bottom: clamp(16px, 3vw, 24px) !important;
  }
  .j3-c2 {
    border-bottom: none !important;
    padding-top: clamp(20px, 4vw, 28px) !important;
    padding-bottom: clamp(10px, 2vw, 16px) !important;
  }
  .j3-c3 {
    padding-top: clamp(18px, 3.5vw, 24px) !important;
  }

  /* Journal mobile — no Read it in col 2, move after body */
  .j3-c2 .home-journal-read-link { display: none; }
  .j3-mobile-readit { display: inline-block !important; margin-top: 16px; }

  /* Journal, sezione di home — foto spostata prima del blocco di testo invece
     che in mezzo (tra titolo e citazione), segnalato da Angelica il 28/8: sulla
     pagina Journal standalone funziona perche' la foto sta prima di tutto il
     testo, che quindi scorre senza interruzioni; qui si riproduce lo stesso
     ordine. Solo su mobile, il grid desktop (3 colonne) resta invariato.
     Inerte sulla pagina Journal standalone: li' non esiste .j3-img in questo
     blocco. */
  .j3-c1 { order: 1; }
  .j3-img { order: 2; }
  .j3-c2 { order: 3; }
  .j3-c3 { order: 4; }
  .j3-newsletter { order: 5; }

  /* Spazio tra KERAS Read more e Journal */
  .home-journal-v3 { margin-top: clamp(16px, 4vw, 32px); }

  /* Carousel captions — hide material tag, single line */
  .carousel-slide-caption { flex-wrap: nowrap; align-items: center; gap: 8px; }
  .carousel-slide-caption .work-tag:nth-child(2) { display: none; }
  .carousel-slide-caption .work-tag { white-space: nowrap; }
}

/* ============================================================
   AGGIUNTE COSTRUZIONE 18/7/2026 — Works index, scheda opera,
   About, Journal, Contact (pagine nuove, non esistevano nella v2)
   ============================================================ */

/* Footer: riga K.E.R.A.S. (una frase, nessun link) */
.footer-row-keras {
  text-align: center;
  padding: var(--space-xs) var(--margin-side) 0;
  font-family: 'Work Sans', sans-serif;
  font-size: var(--fs-caption);
  color: var(--c-slate);
  letter-spacing: 0.02em;
}

/* Works/Artworks — indice. Titolo tolto dalla vista (28/7/2026, Angelica:
   "togliolo proprio come riga, fai partire le foto sotto il menu"): resta
   solo come H1 .sr-only per la struttura della pagina (vedi UTILITY sopra),
   .works-index-page e .works-index-header non esistono più nel markup.
   La griglia è il primo elemento visibile, subito sotto l'header. */
/* Griglia Works/Artworks (28/7/2026): due colonne, foto pulita senza pillole
   (il materiale varia troppo in lunghezza da un'opera all'altra per stare in
   una pillola sopra la foto senza sbilanciare la riga), nome dell'opera nel
   riquadro sotto, anno e materiale in una riga piccola. Hover: stesso velo
   carta da zucchero al 35% di .work-caption-box, non lo slate pieno.
   Ritmo 2-1-2-1-2 (Angelica: la griglia sempre a due era monotona): ogni
   terza card (3ª e 6ª su otto) occupa tutta la larghezza, una foto grande a
   spezzare la coppia, stesso principio della terza card in home
   (.home-works-grid) ma ripetuto lungo tutta la pagina. */
.works-index-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.works-index-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.works-index-card:nth-child(3n) { grid-column: 1 / -1; }
.works-index-card-img { aspect-ratio: 4/3; overflow: hidden; background: var(--c-white); }
.works-index-card:nth-child(3n) .works-index-card-img { aspect-ratio: 16/6; }
/* Crop spostato verso il basso (28/7/2026, Angelica: "il vaso si deve
   vedere"): in entrambe le foto sorgente il vaso/base sta nella parte bassa
   dell'inquadratura, e il crop centrato di default lo tagliava. Solo queste
   due opere, aggancio via data-slug per non toccare le altre sei. */
.works-index-card[data-slug="inner-unknown"] .works-index-card-img img { object-position: center 88%; }
.works-index-card[data-slug="metamorfosi"] .works-index-card-img img { object-position: center 82%; }
.works-index-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.75s var(--ease-smooth);
}
.works-index-card:hover .works-index-card-img img { transform: scale(1.025); }
.works-index-card-caption {
  padding: 14px 18px;
  border: 1px solid var(--c-beige);
  transition: background var(--t-base), border-color var(--t-base);
}
/* Nome opera rimpicciolito (28/7/2026): prima arrivava a 48px con un padding
   generoso intorno, il secondo elemento più grande della pagina dopo il
   titolo e troppo vuoto secondo Angelica. */
.works-index-card-caption h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 30px);
  color: var(--c-ink);
  margin-bottom: 4px;
  transition: color var(--t-base);
}
.works-index-card-caption span {
  font-family: 'Work Sans', sans-serif;
  font-size: var(--fs-caption);
  color: var(--c-slate);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color var(--t-base);
}
.works-index-card:hover .works-index-card-caption {
  background: rgba(143, 156, 164, 0.35);
  border-color: rgba(143, 156, 164, 0.35);
}
.works-index-card:hover .works-index-card-caption h2 { color: #4e5c66; }
.works-index-card:hover .works-index-card-caption span { color: #4e5c66; }
@media (max-width: 700px) {
  .works-index-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .artwork-body { grid-template-columns: 1fr; }
}
/* Nessun override mobile per .artwork-title-big: col nuovo clamp(48,7vw,110)
   il minimo di 48px si applica già da solo sotto i 600px circa. */

/* Scheda opera — blocco dati */
.artwork-data {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 24px;
  max-width: var(--max-text);
  margin: var(--space-sm) 0;
  font-family: 'Work Sans', sans-serif;
  font-size: var(--fs-caption);
}
.artwork-data dt {
  color: var(--c-slate);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.artwork-data dd { color: var(--c-ink); }

/* Scheda opera — citazione. Distanza e dimensione riavvicinate al testo
   (28/7/2026): prima 168px di vuoto tra testo e citazione (120 + 48) e un
   corpo fino a 26px contro i 20px del testo normale; ora ~48px (24 + 24) e
   stesso corpo del testo, solo corsivo e riga a sinistra a distinguerla. */
.artwork-citation {
  max-width: var(--max-text);
  margin: var(--space-xs) 0;
  padding-left: var(--space-xs);
  border-left: 2px solid var(--c-beige);
}
.artwork-citation p {
  font-style: italic;
  font-size: var(--fs-body);
  margin-bottom: 8px;
}
.artwork-citation cite,
.artwork-citation-ref {
  font-family: 'Work Sans', sans-serif;
  font-size: var(--fs-caption);
  font-style: normal;
  color: var(--c-slate);
}
.citation-note { opacity: 0.7; }

/* Scheda opera — In space */
.artwork-inspace {
  max-width: var(--max-text);
  margin: var(--space-sm) 0;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--c-beige);
}
.artwork-inspace-label {
  font-family: 'Work Sans', sans-serif;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-slate);
  margin-bottom: 8px;
}

/* Scheda opera — dettagli. Ora fuori da .artwork-body (striscia a tutta
   larghezza sotto foto+testo), serve il padding laterale che prima ereditava
   da .artwork-content. */
.artwork-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-xs);
  margin: var(--space-md) 0;
  padding: 0 var(--margin-side);
}
.artwork-details img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

/* Scheda opera — CTA + nav prec/succ */
.artwork-cta { display: inline-block; margin: var(--space-sm) 0; }
.artwork-nav-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--c-beige);
  font-family: 'Work Sans', sans-serif;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.artwork-nav-row a:hover { opacity: 0.6; }

/* About page — hero ristrutturato 29/7/2026 su mock di Angelica: riusa
   .journal-hero senza nessuna modifica (stesse dimensioni della prima
   sezione della pagina Journal), solo con la foto e il testo di About al
   posto dei suoi. La frase sul 2017 (.about-isolated) non è più isolata:
   scorre come corpo normale nel flusso del testo, su richiesta esplicita
   di Angelica. */
.about-page { padding: 0 0 var(--space-sm); }
.about-closing { font-style: italic; }
/* Bio più lunga del testo del Journal: a parità di colonna va a più righe,
   quindi la sezione risulta più alta. Padding verticale ridotto solo qui
   per tenerla compatta, senza toccare la foto (resta piena, senza tagli
   a vuoto). */
.about-hero .journal-hero-text { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
/* "Angelica Lucchetti" come etichetta sopra il titolo "Chi sono"/"About"
   (28/8, Angelica): stesso stile section-title già in uso altrove (ARTWORKS,
   JOURNAL...), solo il margine sotto per staccarlo dal titolo grande.
   SOLO MOBILE (sotto 900px, vedi media query): su desktop il nome restava
   bene sulla stessa riga del ruolo come prima, il problema del testo che
   andava a capo era solo di larghezza stretta. Due varianti della riga sotto
   il titolo, .about-subtitle-desktop (nome+ruolo insieme) e
   .about-subtitle-mobile (solo ruolo), si escludono a vicenda per media query.
   Selettore doppio (.journal-hero-tag.about-subtitle-mobile), non solo
   .about-subtitle-mobile: .journal-hero-tag ha il suo "display: block" più
   avanti nel file, stessa specificità di una classe sola batte per ordine —
   qui su desktop comparivano entrambe le righe insieme. */
.about-eyebrow, .journal-hero-tag.about-subtitle-mobile { display: none; }
/* Colonna testo allargata (2fr) ma il paragrafo restava tappato a 65ch
   (.journal-hero-text p), quindi non usava lo spazio in più: si vedeva
   vuoto a destra. Qui si allarga il tetto solo per About. */
.about-hero .journal-hero-text p { max-width: 80ch; }
/* La foto riempie sempre la colonna (object-fit: cover, niente spazi
   bianchi): l'unico modo per tagliarla più bassa senza lasciare vuoti è
   abbassare l'altezza di riga, e l'altezza di riga la decide il testo (è
   lui il più alto dei due). Colonna di testo più larga = bio su meno
   righe = riga più bassa = foto più corta e più tagliata. */
.journal-hero.about-hero { grid-template-columns: 2fr 1fr; }
.about-facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* align-items: start (segnalato da Angelica: le colonne più corte, es.
     Education con 4 voci contro le 8 di Selected exhibitions, si
     allungavano per lo stretch di default della griglia, lasciando
     spazio bianco vuoto in fondo prima della sezione successiva). */
  align-items: start;
  gap: var(--space-lg);
  padding: var(--space-md) var(--margin-side) var(--space-sm);
}
.about-facts-col h2 {
  font-family: 'Work Sans', sans-serif;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-slate);
  margin-bottom: var(--space-xs);
}
.about-facts-col ul li {
  font-family: 'Work Sans', sans-serif;
  font-size: var(--fs-caption);
  line-height: var(--lh-loose);
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--c-beige);
}
/* Ultima voce di ogni lista: via il bordo (la "doppia linea" segnalata,
   troppo vicino alla sezione sotto), ma lo spazio sotto resta: altrimenti
   il testo finisce appiccicato al bordo della colonna. */
.about-facts-col ul li:last-child { border-bottom: none; }
@media (max-width: 900px) {
  .about-facts-grid { grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-lg) var(--margin-side) 0; }
}
/* CTA di chiusura "Write to me": stessa taglia del titolo di chiusura del
   Journal (--fs-title), non quella dei titoli di pagina (--fs-display) —
   qui è una sezione secondaria in fondo alla pagina, non l'intestazione.
   Contenuto ristretto alla larghezza del testo del bio sopra (--max-text,
   29/7: "prova a fare la prima opzione" invece del bottone Instagram):
   così non sembra una sezione a due colonne rimasta vuota a destra. */
.about-cta { padding: clamp(48px, 6vw, 88px) var(--margin-side) var(--space-xs); max-width: calc(var(--max-text) + 2 * var(--margin-side) + 100px); }
.about-cta h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: var(--fs-title);
  margin-bottom: 12px;
}
.about-cta p { margin-bottom: var(--space-sm); }

/* ============================================================
   JOURNAL — pagina standalone, ristrutturata 29/7/2026 su mockup di
   Angelica. Quattro sezioni bordate, stesso linguaggio grafico del resto
   del sito (linee sottili beige, niente angoli arrotondati).
   ============================================================ */

/* Hero: testo a sinistra, foto a destra (specchiata rispetto a home) */
.journal-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--c-beige);
}
.journal-hero-text {
  border-right: 1px solid var(--c-beige);
  padding: clamp(56px, 7vw, 100px) clamp(20px, 3vw, 48px);
  padding-left: var(--margin-side);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.journal-hero-text h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: var(--fs-display);
  margin-bottom: 6px;
}
.journal-hero-tag {
  display: block;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-terracotta);
  margin-bottom: var(--space-sm);
}
.journal-hero-text p {
  max-width: var(--max-text);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin-bottom: 1em;
  text-align: justify;
  hyphens: auto;
}
.journal-hero-text p:last-child { margin-bottom: 0; }
.journal-hero-img { overflow: hidden; min-height: 360px; }
.journal-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* All the letters — elenco */
.journal-archive {
  padding: clamp(48px, 6vw, 88px) var(--margin-side);
  border-bottom: 1px solid var(--c-beige);
}
.journal-archive-label { display: block; margin-bottom: clamp(24px, 3vw, 40px); }
.journal-archive-row {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 48px);
  padding: 22px 0;
  border-top: 1px solid var(--c-beige);
  text-decoration: none;
  color: inherit;
  transition: opacity var(--t-base);
}
.journal-archive-row:last-child { border-bottom: 1px solid var(--c-beige); }
.journal-archive-row:hover { opacity: 0.6; }
.journal-archive-date {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-slate);
  flex: 0 0 96px;
}
.journal-archive-content { flex: 1; }
.journal-archive-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 24px);
  color: var(--c-ink);
  margin-bottom: 4px;
}
.journal-archive-content p {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 14px;
  color: var(--c-ink);
  opacity: 0.6;
}
.journal-archive-arrow {
  font-family: 'Work Sans', system-ui, sans-serif;
  color: var(--c-ink);
  opacity: 0.4;
  flex-shrink: 0;
  transition: opacity var(--t-base);
}
.journal-archive-row:hover .journal-archive-arrow { opacity: 1; }

/* Chiusura — sei valori in trasparenza + iscriviti. Terza correzione
   (29/7/2026): misurato .about3-values di home invece di indovinare di
   nuovo. La colonna qui è larga esattamente uguale a quella di home
   (713px in entrambe, verificato in browser: 1fr di una griglia a due
   coincide con 3fr di una a tre sulla stessa pagina), quindi il font-size
   si riprende identico, non solo l'allineamento. Home non ha padding
   verticale sul blocco valori (lo spazio lo fa tutto space-between sulla
   piena altezza della riga): tolto anche qui il padding verticale e il
   gap manuale che avevo aggiunto, che comprimevano le parole invece di
   lasciarle riempire la colonna. */
.journal-closing { display: grid; grid-template-columns: 1fr 1fr; }
.journal-closing-values {
  border-right: 1px solid var(--c-beige);
  padding: 0 clamp(20px, 3vw, 48px) 0 var(--margin-side);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
.journal-closing-values span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(38px, 4.4vw, 80px);
  line-height: 1.2;
  color: var(--c-slate);
  opacity: 0.3;
  text-align: right;
  white-space: nowrap;
  transform: translateX(clamp(2px, 0.3vw, 6px));
}
.journal-closing-newsletter {
  padding: clamp(48px, 6vw, 88px) clamp(20px, 3vw, 48px);
  padding-right: var(--margin-side);
  display: flex;
  flex-direction: column;
  /* align-items:flex-start (29/7, correzione di Angelica: "il tasto della
     CTA va fatto più corto"): senza, il default stretch di un figlio flex
     in colonna allargava il bottone SUBSCRIBE a tutta la larghezza della
     colonna. Stesso bug già risolto altrove con .j3-newsletter .btn-outline-ink
     { align-self: flex-start }, qui lo risolvo a monte sul contenitore. */
  align-items: flex-start;
  justify-content: center;
}
.journal-closing-newsletter h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: var(--fs-title);
  margin: 6px 0 12px;
}
.journal-closing-newsletter p { max-width: var(--max-text); margin-bottom: var(--space-xs); }

@media (max-width: 900px) {
  /* .journal-hero.about-hero (composto, specificita' 0,0,2,0) batteva questa
     regola anche qui dentro perche' era scritta solo su .journal-hero (0,0,1,0):
     su mobile la pagina About restava a due colonne, foto tagliata fuori dallo
     schermo. Stesso tipo di bug di specificita' gia' preso il 29-30/7 (vedi
     passaggio-consegne), stavolta nel verso opposto. Trovato in review mobile
     del 28/8/2026. */
  .journal-hero, .journal-hero.about-hero { grid-template-columns: 1fr; }
  .journal-hero-text { border-right: none; border-bottom: 1px solid var(--c-beige); }
  /* "Chi sono"/"About" sbatteva contro il menu fisso (site-header, position:
     fixed, ~62px di altezza): il padding-top di .about-hero era 32px minimo,
     meno dell'altezza dell'header. Segnalato da Angelica il 28/8. Solo il top,
     il bottom resta quello di prima. */
  .about-hero .journal-hero-text { padding-top: 100px; }
  /* Nome sopra il titolo solo qui (sotto 900px): su desktop resta la riga
     unica nome+ruolo, come prima del 28/8. */
  .about-eyebrow, .journal-hero-tag.about-subtitle-mobile { display: block; }
  .journal-hero-tag.about-subtitle-desktop { display: none; }
  .journal-archive-row { flex-wrap: wrap; }
  .journal-archive-date { flex-basis: 100%; order: -1; }
  .journal-closing { grid-template-columns: 1fr; }
  .journal-closing-values { border-right: none; border-bottom: 1px solid var(--c-beige); }
}

/* Contact page — stessa taglia e proporzioni della sezione "Write to me"
   di About (29/7/2026): titolo a --fs-title (non --fs-display) e blocco
   ristretto alla larghezza del testo, non più a piena colonna 700px. */
.contact-page {
  padding: var(--space-lg) var(--margin-side);
  max-width: calc(var(--max-text) + 2 * var(--margin-side) + 100px);
}
.contact-page h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-title);
  font-weight: 400;
  margin-bottom: 12px;
}
.contact-page p { margin-bottom: var(--space-sm); }
/* Pagina Privacy (28/8/2026): riusa .contact-page (stesso registro, pagina
   informativa non artistica) più le sezioni h2/p che Contact non aveva.
   Stile h2 identico a .about-facts-col h2, stesso linguaggio di label già
   in uso. */
.privacy-page h2 {
  font-family: 'Work Sans', sans-serif;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-slate);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}
.privacy-page h2:first-of-type { margin-top: var(--space-sm); }
/* Link a LegalBlink (7/9/2026): deve leggersi come link vero, non come testo
   normale del corpo — colore carta da zucchero della palette (--c-slate) e
   sottolineatura, su richiesta di Angelica. */
.privacy-page a {
  color: var(--c-slate);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.privacy-page a:hover { color: var(--c-ink); }
.privacy-updated {
  margin-top: var(--space-md);
  font-size: var(--fs-caption);
  color: var(--c-slate);
}
/* Home — Journal (fix 18/7/2026, versione 3: la v2 spostava anche il testo
   j3-c3 fuori posto e allungava la newsletter su tutta l'altezza, sopra e
   sotto la foto — segnalato in review. Griglia .journal3-grid resta
   totalmente invariata (colonne, j3-c1/c2/c3 nella loro posizione
   originale); l'unico spostamento è la newsletter, che va nel quadrante
   vuoto accanto alla foto (col3, riga2) al posto di j3-empty. Attivo solo
   da 901px in su: sotto quella soglia restano le regole mobile originali,
   non toccate. */
@media (min-width: 901px) {
  .journal3-grid--lateral .j3-empty { display: none; }
  .journal3-grid--lateral .j3-newsletter--lateral {
    grid-column: 3;
    grid-row: 2;
    border-right: none;
    border-left: 1px solid var(--c-beige);
    border-bottom: 1px solid var(--c-beige);
  }
}