/* ==========================================================================
   GIORGIO SANGATI — Portfolio
   Direzione grafica: sperimentale / artistico, ispirato al buio di sala
   e alla luce di scena. Palcoscenico nero, taglio tipografico da locandina,
   accenti rosso sipario e oro.
   ========================================================================== */

/* Font self-hosted (nessuna chiamata a Google Fonts: rispetto privacy/GDPR) */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/fraunces-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/fraunces-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/fraunces-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:900; font-display:swap;
  src:url('fonts/fraunces-latin-900-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/fraunces-latin-400-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/space-mono-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/inter-latin-300-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2');
}

:root{
  --bg: #0b0a09;
  --bg-soft: #141210;
  --bg-card: #171412;
  --fg: #f4eee2;
  --fg-dim: #b9ac9a;
  --fg-faint: #7a6f61;
  --accent: #c31e2e;
  --accent-soft: #7d1420;
  --gold: #cda45a;
  --line: rgba(244,238,226,.14);
  --line-strong: rgba(244,238,226,.28);

  --serif: 'Fraunces', Georgia, serif;
  --mono: 'Space Mono', 'Courier New', monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --maxw: 1280px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --nav-h: 76px;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl{ margin: 0; }
ul, ol{ padding: 0; list-style: none; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

body{
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection{ background: var(--accent); color: var(--fg); }

/* ---------- Grain overlay (texture di scena) ---------- */
.grain{
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Spotlight cursor ---------- */
.spotlight{
  position: fixed;
  top: 0; left: 0;
  width: 480px; height: 480px;
  margin-left: -240px; margin-top: -240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207,164,90,.14) 0%, rgba(195,30,46,.07) 40%, transparent 72%);
  pointer-events: none;
  z-index: 2;
  transform: translate(-100px,-100px);
  transition: opacity .4s var(--ease);
  will-change: transform;
}
@media (hover:none){ .spotlight{ display:none; } }

/* ---------- Curtain intro (solo home) ---------- */
.curtain{
  position: fixed; inset: 0; z-index: 200;
  display: flex;
  pointer-events: none;
}
.curtain__panel{
  flex: 1;
  background: linear-gradient(180deg, #1a0407 0%, #3a0810 45%, #0b0a09 100%);
  position: relative;
  transition: transform 1.1s var(--ease);
}
.curtain__panel::after{
  content:'';
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 6px, transparent 6px 26px);
  opacity:.5;
}
.curtain--open .curtain__panel--l{ transform: translateX(-100%); }
.curtain--open .curtain__panel--r{ transform: translateX(100%); }
.curtain__mark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family: var(--mono); letter-spacing:.35em; font-size:.7rem;
  color: var(--fg-dim); text-transform: uppercase; white-space: nowrap;
}

/* ---------- Layout helpers ---------- */
.wrap{ max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section{ padding: clamp(4rem,10vw,8rem) 0; position: relative; }
.section--tight{ padding: clamp(2.5rem,6vw,4.5rem) 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom: clamp(2rem,5vw,3.5rem); flex-wrap: wrap; }
.eyebrow{
  font-family: var(--mono); font-size: .72rem; letter-spacing:.28em;
  text-transform: uppercase; color: var(--gold); display:flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:''; width: 28px; height:1px; background: var(--gold); display:inline-block; }
h1,h2,h3{ font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
h2{ font-size: clamp(1.9rem, 4vw, 3rem); }
h3{ font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 500;}
.lede{ font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--fg-dim); max-width: 46ch; font-weight: 300; }
.divider{ height:1px; background: var(--line); border:0; margin: 0; }

/* ---------- Nav ---------- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  height: var(--nav-h);
  display:flex; align-items:center;
  background: linear-gradient(180deg, rgba(11,10,9,.92), rgba(11,10,9,.6) 70%, transparent);
  backdrop-filter: blur(6px);
}
.nav__inner{ width:100%; max-width: var(--maxw); margin:0 auto; padding: 0 var(--gutter); display:flex; align-items:center; justify-content:space-between; }
.brand{ font-family: var(--serif); font-size: 1.15rem; letter-spacing:.02em; display:flex; flex-direction:column; line-height:1; }
.brand span{ font-family: var(--mono); font-size:.6rem; letter-spacing:.3em; color: var(--fg-faint); margin-top:.35rem; text-transform:uppercase; }
.brand em{ font-style: normal; color: var(--accent); }

.nav__links{ display:flex; gap: clamp(1rem,2vw,2.1rem); font-family: var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
.nav__links a{ position:relative; padding: .3rem 0; color: var(--fg-dim); transition: color .25s; }
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background: var(--gold);
  transition: right .3s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"]{ color: var(--fg); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ right:0; }

.nav__toggle{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav__toggle span{ height:1px; background: var(--fg); width:100%; }

.lang-switch{ display:inline-flex; align-items:center; gap:.4rem; }
.lang-switch strong{ font-weight:inherit; color: var(--gold); }
.lang-switch a{ color: var(--fg-dim); }
.lang-switch a:hover{ color: var(--fg); }
.lang-switch a::after{ display:none; }
.lang-switch__sep{ color: var(--fg-faint); }

@media (max-width: 780px){
  .nav__links{
    position: fixed; inset: var(--nav-h) 0 0 0; height: calc(100vh - var(--nav-h));
    background: var(--bg); flex-direction:column; justify-content:center; align-items:flex-start;
    padding: 2rem var(--gutter); gap:1.4rem; font-size:1rem;
    transform: translateY(-8px); opacity:0; pointer-events:none; transition: all .3s var(--ease);
  }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__toggle{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  min-height: 100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top: var(--nav-h);
  position: relative;
}
.hero__frag{
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(3.2rem, 12vw, 9.5rem);
  line-height: .86;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.hero__frag span{ display:block; }
.hero__frag .line2{ margin-left: clamp(0px, 8vw, 6rem); color: transparent; -webkit-text-stroke: 1px var(--fg); }
.hero__sub{ margin-top: 1.6rem; display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; }
.hero__role{ font-family: var(--mono); letter-spacing:.2em; text-transform:uppercase; font-size:.85rem; color: var(--gold); }
.hero__loc{ font-size: .95rem; color: var(--fg-dim); }

.marquee{
  margin-top: clamp(3rem,8vw,5.5rem);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: .9rem 0; overflow: hidden; white-space: nowrap;
}
.marquee__track{ display:inline-flex; gap: 3rem; animation: scroll 34s linear infinite; }
.marquee__track span{ font-family: var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color: var(--fg-dim); }
.marquee__track span em{ font-style:normal; color: var(--accent); margin-right:.6em; }
@keyframes scroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

.scrollcue{ position:absolute; bottom: 2.2rem; left: var(--gutter); display:flex; align-items:center; gap:.7rem; font-family: var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color: var(--fg-faint); }
.scrollcue i{ width:1px; height:34px; background: linear-gradient(var(--gold), transparent); display:inline-block; animation: dropcue 1.8s ease-in-out infinite; }
@keyframes dropcue{ 0%{ opacity:0; transform: translateY(-6px);} 40%{opacity:1;} 100%{ opacity:0; transform: translateY(8px);} }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Cards / grid ---------- */
.grid{ display:grid; gap: clamp(1.25rem,3vw,2.25rem); }
.grid--3{ grid-template-columns: repeat(3,1fr); }
.grid--2{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 900px){ .grid--3{ grid-template-columns: 1fr 1fr; } .grid--2{ grid-template-columns: 1fr; } }
@media (max-width: 640px){ .grid--3{ grid-template-columns: 1fr; } }

.card{
  border: 1px solid var(--line); background: var(--bg-card);
  padding: clamp(1.5rem,3vw,2.2rem);
  position: relative; overflow:hidden;
  transition: border-color .3s, transform .3s var(--ease);
}
.card:hover{ border-color: var(--line-strong); transform: translateY(-4px); }
.card__num{ font-family: var(--mono); color: var(--accent); font-size:.75rem; letter-spacing:.15em; }
.card h3{ margin-top:.9rem; }
.card p{ margin-top:.7rem; color: var(--fg-dim); font-size:.95rem; }
.card__meta{ margin-top:1rem; font-family: var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--fg-faint); }

/* photo placeholder block, in attesa di materiale reale */
.photoph{
  aspect-ratio: 4/5; border: 1px dashed var(--line-strong);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family: var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--fg-faint); padding: 1.5rem;
  background: repeating-linear-gradient(135deg, rgba(244,238,226,.03) 0 12px, transparent 12px 24px);
}
.photoph--wide{ aspect-ratio: 16/9; }

/* ---------- Buttons / links ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family: var(--mono); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  padding: .95em 1.6em; border:1px solid var(--line-strong);
  transition: background .25s, color .25s, border-color .25s;
}
.btn:hover{ background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--accent{ border-color: var(--accent); color: var(--fg); }
.btn--accent:hover{ background: var(--accent); border-color: var(--accent); color: #fff; }
.link-arrow{ display:inline-flex; align-items:center; gap:.5em; font-family: var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color: var(--gold); }
.link-arrow::after{ content:'→'; transition: transform .25s var(--ease); }
.link-arrow:hover::after{ transform: translateX(4px); }

/* ---------- Timeline (biografia) ---------- */
.timeline{ position:relative; padding-left: clamp(1.5rem,4vw,3rem); border-left: 1px solid var(--line); }
.timeline__item{ position:relative; padding-bottom: clamp(2rem,5vw,3rem); }
.timeline__item:last-child{ padding-bottom:0; }
.timeline__item::before{
  content:''; position:absolute; left: calc(-1 * clamp(1.5rem,4vw,3rem) - 5px); top:.35rem;
  width:9px; height:9px; border-radius:50%; background: var(--bg); border:1px solid var(--gold);
}
.timeline__year{ font-family: var(--mono); color: var(--gold); font-size:.85rem; letter-spacing:.1em; }
.timeline__item h3{ margin-top:.4rem; }
.timeline__item p{ margin-top:.5rem; color: var(--fg-dim); max-width: 60ch; }

/* ---------- Spettacoli list ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom: 2.5rem; }
.filter{
  font-family: var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.6em 1.1em; border:1px solid var(--line); color: var(--fg-dim);
  transition: all .25s;
}
.filter:hover{ border-color: var(--line-strong); color: var(--fg); }
.filter.is-active{ background: var(--fg); color: var(--bg); border-color: var(--fg); }

.show{
  display:grid; grid-template-columns: 5rem 1fr auto; gap: 1.5rem; align-items:baseline;
  padding: 1.4rem 0; border-bottom: 1px solid var(--line);
}
.show__year{ font-family: var(--mono); color: var(--accent); font-size: 1rem; }
.show__title{ font-family: var(--serif); font-size: clamp(1.05rem,2vw,1.35rem); }
.show__author{ color: var(--fg-dim); font-size:.9rem; margin-top:.2rem; }
.show__prod{ color: var(--fg-faint); font-size:.78rem; margin-top:.3rem; font-family: var(--mono); letter-spacing:.03em; }
.show__link{ display:inline-block; margin-top:.5rem; font-family: var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); transition: color .25s; }
.show__link:hover{ color: var(--fg); }
.show__tag{ font-family: var(--mono); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color: var(--fg-faint); border:1px solid var(--line); padding:.35em .7em; white-space:nowrap; height:fit-content; }
@media (max-width: 640px){
  .show{ grid-template-columns: 1fr; gap:.4rem; }
  .show__tag{ justify-self: flex-start; }
}

/* varianti con foto di scena (teatro.it) */
.show.show--photo{ grid-template-columns: 5rem 64px 1fr auto; align-items:center; }
.show__photo{ width:64px; height:84px; object-fit:cover; object-position: top center; border-top:2px solid var(--gold); }
@media (max-width: 640px){
  .show.show--photo{ grid-template-columns: 1fr; }
  .show__photo{ width:120px; height:158px; order:-1; margin-bottom:.6rem; }
}

/* ---------- Rassegna stampa ---------- */
.quote{
  font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem,3vw,2rem); line-height:1.4;
  max-width: 34ch;
}
.quote-cite{ margin-top:1.2rem; font-family: var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color: var(--fg-faint); }
.press-item{ padding: clamp(1.75rem,3vw,2.5rem) 0; border-bottom: 1px solid var(--line); }
.press-item__meta{ font-family: var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); margin-bottom:.8rem; }
.press-item p{ color: var(--fg-dim); max-width: 66ch; }
.press-item .link-arrow{ margin-top:1rem; }

/* ---------- News ---------- */
.news-item{ display:grid; grid-template-columns: 8rem 1fr; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.news-item time{ font-family: var(--mono); font-size:.75rem; color: var(--fg-faint); letter-spacing:.06em; }
@media (max-width:640px){ .news-item{ grid-template-columns: 1fr; gap:.5rem; } }

/* ---------- Forms (contatti) ---------- */
.form{ display:grid; gap:1.4rem; max-width: 620px; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-family: var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--fg-faint); }
.field input, .field textarea{
  background: transparent; border:0; border-bottom:1px solid var(--line-strong); color: var(--fg);
  font-family: var(--sans); font-size:1rem; padding: .6em 0; transition: border-color .25s;
}
.field input:focus, .field textarea:focus{ outline:0; border-color: var(--gold); }
.contact-block{ display:flex; flex-direction:column; gap:.4rem; padding: 1.6rem 0; border-bottom:1px solid var(--line); }
.contact-block h3{ font-size:1rem; }
.contact-block a, .contact-block span{ color: var(--fg-dim); font-size:.95rem; }

/* ---------- Footer ---------- */
.footer{ border-top: 1px solid var(--line); padding: clamp(2.5rem,6vw,4rem) 0; }
.footer__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap; }
.footer__note{ margin-top: 2.5rem; font-family: var(--mono); font-size:.68rem; letter-spacing:.06em; color: var(--fg-faint); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer__social{ display:flex; align-items:center; gap:1.4rem; font-family: var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; flex-wrap:wrap; }
.footer__social a{ color: var(--fg-dim); transition: color .25s; }
.footer__social a:hover{ color: var(--gold); }
.social-icon{ display:inline-flex; align-items:center; gap:.5em; }
.social-icon svg{ flex-shrink:0; }

/* ---------- Callout box (nota placeholder) ---------- */
.callout{
  border-left: 2px solid var(--gold); padding: 1.2rem 1.6rem; background: rgba(207,164,90,.05);
  font-size:.9rem; color: var(--fg-dim); max-width: 62ch;
}
.callout strong{ color: var(--fg); }

/* ---------- Page hero (pagine interne) ---------- */
.pagehead{ padding: calc(var(--nav-h) + 4.5rem) 0 2rem; }
.pagehead .eyebrow{ margin-bottom: 1.2rem; }

/* ---------- Testo legale (privacy policy) ---------- */
.legal{ max-width: 72ch; }
.legal h2{ font-family: var(--serif); font-weight:600; font-size: clamp(1.15rem,2vw,1.4rem); margin-top:2.2rem; }
.legal h2:first-child{ margin-top:0; }
.legal p{ margin-top:.7rem; color: var(--fg-dim); line-height:1.6; }
.legal a{ color: var(--fg); text-decoration: underline; text-underline-offset: .2em; }
.legal a:hover{ color: var(--gold); }

/* ---------- Galleria foto di scena (spettacoli) ---------- */
.show__gallery{
  position:relative; display:block; width:64px; height:84px; padding:0; overflow:hidden;
  border:0; background:none; cursor:zoom-in; flex-shrink:0;
}
.show__gallery img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  border-top:2px solid var(--gold); display:block; transition: transform .4s var(--ease);
}
.show__gallery::after{
  content:'+'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:1.15rem; color:var(--fg); background:rgba(11,10,9,.5);
  opacity:0; transition:opacity .25s;
}
.show__gallery:hover img, .show__gallery:focus-visible img{ transform:scale(1.08); }
.show__gallery:hover::after, .show__gallery:focus-visible::after{ opacity:1; }
.show__gallery:focus-visible{ outline:1px solid var(--gold); outline-offset:2px; }
@media (max-width:640px){ .show__gallery{ width:120px; height:158px; order:-1; margin-bottom:.6rem; } }

/* ---------- Lightbox (dialog nativo) ---------- */
.lightbox{
  border:1px solid var(--line-strong); background:var(--bg-card); color:var(--fg);
  max-width:min(92vw,960px); width:100%; max-height:88vh; padding:0; margin:auto; overflow:auto;
}
.lightbox::backdrop{ background:rgba(6,5,4,.88); backdrop-filter: blur(4px); }
.lightbox__img{ width:100%; display:block; }

/* ---------- Carosello foto (dentro il lightbox) ---------- */
.carousel{ position:relative; background:#000; }
.carousel__track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__slide{ flex:0 0 100%; scroll-snap-align:center; margin:0; }
.carousel__slide img{ width:100%; max-height:72vh; object-fit:contain; display:block; background:#000; }
.carousel__nav{
  position:absolute; top:50%; translate:0 -50%; width:2.6rem; height:2.6rem; border-radius:50%;
  background:rgba(11,10,9,.55); border:1px solid var(--line-strong); color:var(--fg);
  font-family:var(--serif); font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition: background .25s, border-color .25s;
}
.carousel__nav:hover{ background:var(--accent); border-color:var(--accent); }
.carousel__nav--prev{ left:.9rem; } .carousel__nav--next{ right:.9rem; }
.carousel__counter{
  position:absolute; bottom:.9rem; right:1rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  color:var(--fg); background:rgba(11,10,9,.6); padding:.35em .8em; border-radius:2em; pointer-events:none;
}
@media (hover:none){ .carousel__nav{ display:none; } }
@media (max-width:640px){ .carousel__nav{ width:2.2rem; height:2.2rem; font-size:1.1rem; } }

/* badge conteggio foto sulla thumbnail in elenco */
.show__gallery-count{
  position:absolute; bottom:4px; right:4px; font-family:var(--mono); font-size:.6rem; letter-spacing:.04em;
  color:var(--fg); background:rgba(11,10,9,.65); padding:.15em .45em; line-height:1.3; z-index:1;
}

.lightbox__bar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  padding: clamp(1rem,3vw,1.4rem) clamp(1.2rem,3vw,1.6rem);
}
.lightbox__title{ font-family:var(--serif); font-size:1.05rem; line-height:1.4; }
.lightbox__actions{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.lightbox__close{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-dim); transition:color .25s;
}
.lightbox__close:hover{ color:var(--fg); }

/* ---------- Ritratto in biografia ---------- */
.bio-hero{ display:flex; gap:clamp(2rem,5vw,4rem); align-items:flex-end; justify-content:space-between; flex-wrap:wrap-reverse; }
.bio-hero__text{ flex:1 1 420px; max-width:640px; }
.bio-hero__portrait{
  width:min(280px,40vw); aspect-ratio:3/4; object-fit:cover; object-position: top center;
  filter: grayscale(15%) contrast(1.05);
  border-top:2px solid var(--gold);
}
@media (max-width:640px){
  .bio-hero__portrait{ width:100%; max-width:320px; }
}