/* ============ Selena Toska — Portfolio ============
   Tokens (dal design handoff):
   latte #FBF8F2 · esterno #e7e2da · sabbia #F1E9DD · nude #DAC7B2
   taupe #796653 · corpo #5C4B3D · inchiostro #2B221B · espresso #332820
   su espresso: testo #F6F1E8 · eyebrow #B69C82
==================================================== */

* { box-sizing: border-box; }

:root { --taupe: #796653; }

html { scroll-behavior: smooth; }

section[id] { scroll-margin-top: 150px; }

body {
  margin: 0;
  background: #FBF8F2;
  font-family: 'Jost', system-ui, sans-serif;
}

::selection { background: #d8c4ad; color: #2B221B; }

a { text-decoration: none; }
img { display: block; }

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 16px;
  color: #F6F1E8;
  background: #332820;
  font-size: 13px;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: none; }

.sheet { background: #FBF8F2; }
/* full-bleed: la pagina occupa tutta la larghezza disponibile; a limitare
   sono solo i blocchi di testo (max-width propri) per la leggibilità */

/* ---------- immagini / hover ---------- */
.img-wrap {
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
}
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.hover-hero img { transition-duration: 1.2s; }
.hover-hero:hover img { transform: scale(1.025); }
.hover-card:hover img { transform: scale(1.04); }
.hover-look:hover img { transform: scale(1.05); }

/* ---------- tipografia comune ---------- */
.eyebrow {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 500;
}

.section-title {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 46px;
  color: #2B221B;
}

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 32px 84px 24px;
  border-bottom: 1px solid rgba(43, 34, 27, .09);
  /* vetro latteo: più trasparente al centro, più definito sui bordi */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(251, 248, 242, .12)),
    rgba(251, 248, 242, .70);
  -webkit-backdrop-filter: blur(16px) saturate(1.28) brightness(1.03);
  backdrop-filter: blur(16px) saturate(1.28) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 0 rgba(92, 75, 61, .05);
  transition: background-color .45s ease, box-shadow .45s ease;
}
.header.scrolled {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 0 -1px 0 rgba(92, 75, 61, .08),
    0 14px 36px -28px rgba(43, 34, 27, .48);
}

.wordmark {
  display: block;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: .42em;
  padding-left: .42em; /* compensa il tracking */
  color: #2B221B;
  margin-bottom: 18px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px;
}

.nav a {
  position: relative;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5C4B3D;
  transition: color .4s;
}
.nav a:hover { color: var(--taupe); }
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--taupe);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-sep {
  width: 1px;
  height: 14px;
  background: rgba(43, 34, 27, .2);
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  letter-spacing: .1em;
}
.lang-toggle button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(43, 34, 27, .38);
  font-weight: 400;
  transition: opacity .3s, color .3s;
}
.lang-toggle button:hover { opacity: .7; }
.lang-toggle button.active {
  color: #2B221B;
  font-weight: 500;
}
.lang-slash { color: rgba(43, 34, 27, .25); }

/* ---------- hero ---------- */
.hero {
  padding: 120px 84px 80px;
  text-align: center;
}

.hero-eyebrow {
  letter-spacing: .34em;
  margin-bottom: 36px;
}

.hero-title {
  margin: 0 auto;
  max-width: 900px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 88px;
  line-height: 1;
  letter-spacing: -.01em;
  color: #2B221B;
}
.hero-title em { font-weight: 400; }

.hero-positioning {
  max-width: 620px;
  margin: 34px auto 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: #5C4B3D;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 13px 22px 12px calc(22px + .12em);
  border: 1px solid #332820;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .3s ease, background-color .3s ease;
}
.button--primary { color: #F6F1E8; background: #332820; }
.button--primary:hover { background: #5C4B3D; }
.button--secondary { color: #332820; background: transparent; }
.button--secondary:hover { color: #F6F1E8; background: #332820; }

.hero-image { padding: 0 84px 30px; }
.hero-image .img-wrap { height: 620px; }
/* parallax: immagine più alta del contenitore, trasla su --par (proprietà translate,
   separata da transform così non lotta con lo zoom hover) */
.hero-image .img-wrap img {
  height: 112%;
  translate: 0 var(--par, 0px);
}

/* ---------- intro al caricamento ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.hero-eyebrow { animation: fadeUp .9s ease .15s both; }
.hero-title   { animation: fadeUp 1s ease .3s both; }
.hero-image   { animation: fadeUp 1.1s ease .5s both; }
.wordmark     { animation: fadeUp .8s ease both; }

/* ---------- reveal on scroll (classi aggiunte da JS: no-JS = tutto visibile) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease var(--d, 0s), transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- chi sono ---------- */
.about {
  padding: 120px 84px;
  text-align: center;
}
.about .eyebrow { margin-bottom: 26px; }

.about-title {
  margin: 0 auto 28px;
  max-width: 640px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 50px;
  line-height: 1.05;
  color: #2B221B;
}

.about-body {
  margin: 0 auto 22px;
  max-width: 580px;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.9;
  color: #5C4B3D;
}

.about-quote {
  margin: 36px auto 0;
  max-width: 560px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.55;
  color: #2B221B;
}

.skills { margin-top: 72px; }
.skills .eyebrow { margin-bottom: 24px; }

.skills-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 520px;
}

.skills-list li {
  font-weight: 300;
  font-size: 15px;
  letter-spacing: .06em;
  line-height: 1.6;
  color: #5C4B3D;
  padding: 7px 0;
}

/* ---------- progetti ---------- */
.collections { padding: 30px 84px 120px; }

.section-head {
  text-align: center;
  margin-bottom: 70px;
}
.section-head .eyebrow { margin-bottom: 20px; }

.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 48px;
}

.project { text-align: center; }
/* tutte le card con lo stesso rapporto delle tavole (A4 orizzontale):
   le pagine del carosello entrano senza schiacciarsi */
.project .img-wrap {
  position: relative;
  aspect-ratio: 842 / 595;
  margin-bottom: 22px;
  cursor: pointer;
}

/* gerarchia: metgala in evidenza (tutta larghezza), breathing un gradino sotto */
.project--feature,
.project--sub { grid-column: 1 / -1; }
.project--sub .img-wrap {
  width: 76%;
  margin-left: auto;
  margin-right: auto;
}
.project--feature .project-name { font-size: 46px; }
.project--sub .project-name { font-size: 38px; }

/* hint "Sfoglia": pillola liquid glass in basso */
.project-hint {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 10px);
  padding: 11px 22px 11px calc(22px + .34em);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #F6F1E8;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(246, 241, 232, .04) 46%, rgba(182, 156, 130, .14)),
    rgba(43, 34, 27, .38);
  border: 1px solid rgba(246, 241, 232, .42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(43, 34, 27, .22),
    0 12px 32px -18px rgba(43, 34, 27, .72);
  -webkit-backdrop-filter: blur(12px) saturate(1.35) brightness(1.06);
  backdrop-filter: blur(12px) saturate(1.35) brightness(1.06);
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
}
.project .img-wrap:hover .project-hint,
.project .img-wrap:focus-visible .project-hint { opacity: 1; transform: translate(-50%, 0); }
.project .img-wrap:focus-visible { outline-color: var(--taupe); }

.project-name {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 34px;
  color: #2B221B;
}

.project-season {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--taupe);
}

.project-summary {
  max-width: 480px;
  margin: 18px auto 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: #5C4B3D;
}

/* ---------- lookbook ---------- */
.lookbook {
  background: #F1E9DD;
  padding: 120px 84px;
  text-align: center;
}
.lookbook .eyebrow { margin-bottom: 20px; }
.lookbook-title { margin-bottom: 60px; }

.lookbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lookbook-grid .img-wrap { height: 400px; }
.lookbook-grid .img-wrap,
.process-grid .img-wrap { cursor: zoom-in; }

/* ---------- processo ---------- */
.process {
  padding: 120px 84px;
  text-align: center;
}
.process .eyebrow { margin-bottom: 22px; }
.process .about-title { margin-bottom: 24px; }

.process-body {
  margin: 0 auto 60px;
  max-width: 540px;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.9;
  color: #5C4B3D;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.process-grid .img-wrap { height: 360px; }

/* ---------- percorso / cv ---------- */
.cv {
  padding: 20px 84px 120px;
  text-align: center;
}
.cv .eyebrow { margin-bottom: 20px; }
.cv-title { margin-bottom: 54px; }

.cv-list {
  max-width: 760px;
  margin: 0 auto;
}

.cv-row {
  display: flex;
  gap: 40px;
  align-items: baseline;
  justify-content: center;
  padding: 24px 0;
  border-top: 1px solid rgba(43, 34, 27, .13);
}

.cv-year {
  flex-basis: 130px;
  flex-shrink: 0;
  text-align: right;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--taupe);
}

.cv-role {
  flex: 1;
  text-align: left;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.35;
  color: #2B221B;
}

/* ---------- contatti ---------- */
.contact {
  background: #332820;
  padding: 120px 84px 70px;
  text-align: center;
}

.contact-eyebrow {
  color: #B69C82;
  margin-bottom: 32px;
}

.contact-title {
  margin: 0 0 20px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 78px;
  line-height: 1;
  color: #F6F1E8;
}
.contact-title em { font-weight: 400; }

.contact-body {
  margin: 0 auto 40px;
  max-width: 420px;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(246, 241, 232, .6);
}

.contact-email {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 38px;
  color: #F6F1E8;
  border-bottom: 1px solid rgba(246, 241, 232, .4);
  padding-bottom: 6px;
  transition: border-color .4s;
}
.contact-email:hover { border-color: #F6F1E8; }

.social-row {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 64px;
}
.social-row a {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(246, 241, 232, .7);
  transition: color .4s;
}
.social-row a:hover { color: #F6F1E8; }

.footer-line {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid rgba(246, 241, 232, .16);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(246, 241, 232, .5);
}

/* ---------- viewer collezioni (effetto goccia: clip-path circle dal punto di click) ----------
   Modalità presentazione: fondale liquid glass scuro (il sito resta visibile
   sfocato dietro), tavola grande al centro, comandi in pillole di vetro */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    radial-gradient(circle at var(--ox, 50%) var(--oy, 50%), rgba(246, 241, 232, .10), transparent 34%),
    linear-gradient(145deg, rgba(246, 241, 232, .07), transparent 38%),
    rgba(28, 21, 17, .58);
  -webkit-backdrop-filter: blur(22px) saturate(1.25) brightness(.88);
  backdrop-filter: blur(22px) saturate(1.25) brightness(.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px;
  visibility: hidden;
  opacity: .35;
  clip-path: circle(0px at var(--ox, 50%) var(--oy, 50%));
  transition:
    clip-path .98s cubic-bezier(.16, .82, .2, 1),
    opacity .72s ease,
    visibility 0s .98s;
}
.viewer.open {
  visibility: visible;
  opacity: 1;
  clip-path: circle(142vmax at var(--ox, 50%) var(--oy, 50%));
  transition:
    clip-path .98s cubic-bezier(.16, .82, .2, 1) .06s,
    opacity .68s ease .06s;
}

/* Elementi effimeri creati al click: nucleo elastico, lente e tre creste. */
.ripple-drop,
.ripple-lens,
.ripple-ring {
  position: fixed;
  z-index: 102;
  pointer-events: none;
  width: var(--ripple-size);
  height: var(--ripple-size);
  border-radius: 50%;
  will-change: transform, opacity;
}

@keyframes ripple-drop-impact {
  0%   { transform: translate(-50%, -82%) scale(.38, .72); opacity: 0; }
  22%  { transform: translate(-50%, -54%) scale(.62, 1.08); opacity: .95; }
  48%  { transform: translate(-50%, -50%) scale(1.18, .72); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(1.72, 1.12); opacity: 0; }
}
.ripple-drop {
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, .98) 0 5%, rgba(246, 241, 232, .56) 18%, rgba(182, 156, 130, .20) 48%, transparent 70%);
  box-shadow:
    inset -10px -12px 24px rgba(43, 34, 27, .18),
    0 0 26px rgba(246, 241, 232, .42);
  animation: ripple-drop-impact .58s cubic-bezier(.18, .8, .28, 1) both;
}

@keyframes ripple-lens-expand {
  0%   { transform: translate(-50%, -50%) scale(.035); opacity: 0; }
  15%  { opacity: .72; }
  68%  { opacity: .30; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
.ripple-lens {
  z-index: 101;
  border: 1px solid rgba(246, 241, 232, .44);
  background: radial-gradient(circle, transparent 52%, rgba(246, 241, 232, .10) 66%, transparent 74%);
  box-shadow:
    inset 0 0 24px rgba(246, 241, 232, .18),
    0 0 26px rgba(182, 156, 130, .16);
  -webkit-backdrop-filter: blur(2px) saturate(1.42) brightness(1.08);
  backdrop-filter: blur(2px) saturate(1.42) brightness(1.08);
  animation: ripple-lens-expand .88s cubic-bezier(.1, .62, .18, 1) both;
}

@keyframes ripple-wave-expand {
  0%   { transform: translate(-50%, -50%) scale(.025); opacity: 0; }
  16%  { opacity: .72; }
  62%  { opacity: .28; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
.ripple-ring {
  border: 1px solid rgba(246, 241, 232, .42);
  box-shadow:
    0 0 12px rgba(182, 156, 130, .26),
    inset 0 0 12px rgba(246, 241, 232, .18);
  animation: ripple-wave-expand 1.02s cubic-bezier(.08, .62, .16, 1) both;
}
.ripple-ring--soft {
  border-color: rgba(182, 156, 130, .34);
  animation-duration: 1.16s;
}
.ripple-ring--fine {
  border-color: rgba(246, 241, 232, .22);
  box-shadow: 0 0 8px rgba(182, 156, 130, .16);
  animation-duration: 1.28s;
}

.viewer-head, .viewer-stage, .viewer-foot {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.viewer.open .viewer-head, .viewer.open .viewer-stage, .viewer.open .viewer-foot {
  opacity: 1;
  transform: none;
  transition-delay: .30s;
}

/* pillola liquid glass condivisa dai comandi del viewer */
.viewer-head,
.viewer-foot,
.viewer .pager-btn,
.viewer .viewer-close,
.lightbox .pager-btn,
.lightbox .viewer-close {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .20), rgba(246, 241, 232, .06) 46%, rgba(182, 156, 130, .12)),
    rgba(246, 241, 232, .08);
  border: 1px solid rgba(246, 241, 232, .30);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(43, 34, 27, .24),
    0 16px 38px -20px rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.35) brightness(1.06);
  backdrop-filter: blur(14px) saturate(1.35) brightness(1.06);
}

/* pulsanti circolari: vetro "liquido" con rifrazione — feDisplacementMap dove
   supportato (Chrome/Edge/Firefox), fallback al vetro sfocato sopra altrove (Safari). */
.viewer .pager-btn,
.lightbox .pager-btn {
  position: relative;
}
.viewer .pager-btn,
.viewer .viewer-close,
.lightbox .pager-btn,
.lightbox .viewer-close {
  overflow: hidden;
  isolation: isolate;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) brightness(1.1);
  backdrop-filter: blur(16px) saturate(1.5) brightness(1.1);
  backdrop-filter: url(#liquid-glass-refraction) blur(16px) saturate(1.5) brightness(1.1);
}
.viewer .pager-btn::before,
.viewer .viewer-close::before,
.lightbox .pager-btn::before,
.lightbox .viewer-close::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .55), transparent 55%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.viewer .pager-btn::after,
.viewer .viewer-close::after,
.lightbox .pager-btn::after,
.lightbox .viewer-close::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 40% at 50% -6%, rgba(255, 255, 255, .8), transparent 60%);
  mix-blend-mode: screen;
  opacity: .55;
  pointer-events: none;
  transition: opacity .3s;
}
.viewer .pager-btn:hover::after,
.viewer .viewer-close:hover::after,
.lightbox .pager-btn:hover::after,
.lightbox .viewer-close:hover::after { opacity: .85; }

.viewer-head { text-align: center; padding: 12px 36px; }
.viewer-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 30px;
  color: #F6F1E8;
  margin-bottom: 4px;
}
.viewer .viewer-season { color: #DAC7B2; }

.viewer-stage {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 100%;
}

.viewer-page {
  max-width: min(1500px, calc(100vw - 200px));
  max-height: 76vh;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .65);
  background: #fff;
}

.pager-btn {
  cursor: pointer;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 6px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  line-height: 1;
  color: rgba(246, 241, 232, .75);
  transform: scale(1);
  transition: color .3s, opacity .3s, background-color .3s, transform .28s cubic-bezier(.2, .8, .2, 1);
}
.viewer .pager-btn:hover,
.lightbox .pager-btn:hover { color: #F6F1E8; background-color: rgba(246, 241, 232, .18); transform: scale(1.07); }
.viewer .pager-btn:active,
.lightbox .pager-btn:active { transform: scale(.91, .96); }
.pager-btn:disabled { opacity: .2; cursor: default; }
.viewer .pager-btn:disabled:hover { color: rgba(246, 241, 232, .75); background-color: rgba(246, 241, 232, .08); transform: none; }

.viewer-close {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 2;
  cursor: pointer;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  line-height: 1;
  color: rgba(246, 241, 232, .75);
  transform: scale(1);
  transition: color .3s, background-color .3s, transform .28s cubic-bezier(.2, .8, .2, 1);
}
.viewer .viewer-close:hover,
.lightbox .viewer-close:hover { color: #F6F1E8; background-color: rgba(246, 241, 232, .18); transform: scale(1.07); }
.viewer .viewer-close:active,
.lightbox .viewer-close:active { transform: scale(.92, .96); }

.viewer-foot {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding: 12px 30px;
}
.viewer-counter {
  font-size: 12px;
  letter-spacing: .2em;
  color: #DAC7B2;
}
.viewer-pdf {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(246, 241, 232, .85);
  border-bottom: 1px solid rgba(246, 241, 232, .35);
  padding-bottom: 3px;
  transition: color .3s, border-color .3s;
}
.viewer-pdf:hover { color: #F6F1E8; border-color: #F6F1E8; }

/* ---------- lightbox lookbook / processo ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    linear-gradient(145deg, rgba(246, 241, 232, .06), transparent 40%),
    rgba(34, 26, 21, .70);
  -webkit-backdrop-filter: blur(20px) saturate(1.2) brightness(.82);
  backdrop-filter: blur(20px) saturate(1.2) brightness(.82);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s .45s;
}
.lightbox.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease;
}
.lightbox-img {
  max-width: calc(100vw - 160px);
  max-height: 88vh;
}
.lightbox .pager-btn { color: rgba(246, 241, 232, .6); }
.lightbox .viewer-close { color: rgba(246, 241, 232, .6); }

/* blocca lo scroll del body quando un overlay è aperto */
body.no-scroll { overflow: hidden; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-eyebrow, .hero-title, .hero-image, .wordmark { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .viewer, .viewer.open { transition: none; clip-path: none; }
  .viewer-head, .viewer-stage, .viewer-foot { transition: none; }
  .ripple-drop, .ripple-lens, .ripple-ring { display: none; }
  .pager-btn, .viewer-close { transition: none; transform: none !important; }
  .lightbox, .lightbox.open { transition: none; }
  .img-wrap img { transition: none; }
  .hero-image .img-wrap img { translate: none; }
}

/* Dove supportato, rispetta anche la preferenza di ridurre la trasparenza. */
@media (prefers-reduced-transparency: reduce) {
  .header { background: #FBF8F2; }
  .viewer { background: rgba(32, 24, 18, .94); }
  .lightbox { background: rgba(43, 34, 27, .97); }
  .project-hint,
  .viewer-head,
  .viewer-foot,
  .viewer .pager-btn,
  .viewer .viewer-close,
  .lightbox .pager-btn,
  .lightbox .viewer-close {
    background: rgba(51, 40, 32, .94);
  }
  .header,
  .viewer,
  .lightbox,
  .project-hint,
  .viewer-head,
  .viewer-foot,
  .viewer .pager-btn,
  .viewer .viewer-close,
  .lightbox .pager-btn,
  .lightbox .viewer-close {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .header { background: rgba(251, 248, 242, .96); }
  .viewer { background: rgba(32, 24, 18, .92); }
  .lightbox { background: rgba(43, 34, 27, .96); }
  .project-hint,
  .viewer-head,
  .viewer-foot,
  .viewer .pager-btn,
  .viewer .viewer-close,
  .lightbox .pager-btn,
  .lightbox .viewer-close { background: rgba(51, 40, 32, .90); }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  /* header statico e compatto: tutte le voci restano visibili su una riga */
  .header { position: static; padding: 22px 20px 16px; }
  .wordmark { font-size: 20px; }
  .nav { flex-wrap: nowrap; gap: 12px; }
  .nav a { font-size: 10px; letter-spacing: .08em; }
  .nav-sep { display: none; }
  .lang-toggle { gap: 4px; margin-left: 2px; }
  .lang-toggle button { font-size: 10px; }
  section[id] { scroll-margin-top: 0; }

  .hero { padding: 72px 24px 48px; }
  .hero-title { font-size: clamp(40px, 9vw, 56px); }
  .hero-positioning { margin-top: 26px; font-size: 15px; }
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 260px; margin: 28px auto 0; }
  .hero-image { padding: 0 24px 24px; }
  .hero-image .img-wrap { height: 320px; }

  .about { padding: 72px 24px; }
  .about-title { font-size: 36px; }

  .collections { padding: 24px 24px 72px; }
  .section-head { margin-bottom: 44px; }
  .section-title { font-size: 34px; }
  .projects-grid { grid-template-columns: 1fr; gap: 44px; }
  .project-name { font-size: 28px; }
  .project--sub .img-wrap { width: 100%; }
  .project--feature .project-name { font-size: 32px; }
  .project--sub .project-name { font-size: 30px; }

  .lookbook { padding: 72px 24px; }
  .lookbook-title { margin-bottom: 36px; }
  .lookbook-grid { grid-template-columns: 1fr; gap: 16px; }
  .lookbook-grid .img-wrap { height: 340px; }

  .process { padding: 72px 24px; }
  .process-body { margin-bottom: 36px; }
  .process-grid { grid-template-columns: 1fr; gap: 16px; }
  .process-grid .img-wrap { height: 320px; }

  .cv { padding: 16px 24px 72px; }
  .cv-title { margin-bottom: 32px; }
  .cv-row { gap: 20px; padding: 18px 0; }
  .cv-year { flex-basis: 78px; font-size: 12px; }
  .cv-role { font-size: 20px; }

  .contact { padding: 72px 24px 48px; }
  .contact-title { font-size: clamp(38px, 9vw, 52px); }
  .contact-email { font-size: 24px; word-break: break-all; }
  .social-row { margin-top: 44px; }

  /* viewer: frecce sovrapposte all'immagine, swipe come gesto primario */
  .viewer { gap: 14px; padding: 14px; }
  .viewer-title { font-size: 26px; }
  .viewer-head { padding: 10px 24px; }
  .viewer-foot { padding: 10px 22px; }
  .viewer-stage { position: relative; gap: 0; width: 100%; justify-content: center; }
  .viewer-page { max-width: 100%; max-height: 66vh; }
  .viewer-stage .pager-btn {
    position: absolute;
    top: 50%;
    margin-top: -23px;
    background: rgba(32, 24, 18, .45);
    font-size: 30px;
    width: 46px;
    height: 46px;
  }
  .viewer-stage .viewer-prev { left: 0; }
  .viewer-stage .viewer-next { right: 0; }
  .viewer-close { top: 10px; right: 12px; }

  .lightbox { padding: 12px; gap: 0; }
  .lightbox-img { max-width: 100%; max-height: 80vh; }
  .lightbox .pager-btn { position: absolute; top: 50%; margin-top: -29px; }
  .lightbox .lightbox-prev { left: 6px; }
  .lightbox .lightbox-next { right: 6px; }
}