/* =========================================================
   Caterina Tava — Portfolio
   Ricostruzione in codice del sito Framer (stesse misure,
   stessi font, stesse animazioni).
   Breakpoint: desktop >= 1200px, telefono < 1200px
   ========================================================= */

:root {
  --round: "Arial Rounded MT Bold", "Arial Rounded MT", Arial, sans-serif;
  --arial: Arial, Helvetica, sans-serif;
  --archivo: "Archivo", Arial, sans-serif;
  --ease: cubic-bezier(.44, 0, .56, 1);
  --pageH: max(100vh, 700px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { font-family: var(--round); font-weight: 400; }

p, h1 { margin: 0; font-weight: 400; }

a { color: #000; text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: #5a5a5a; }

img, video { display: block; }

.mobile-only { display: none; }

/* ---------- Comparsa (come "Appear" di Framer) ---------- */
.ap {
  animation: appear .55s var(--ease) backwards;
  animation-delay: var(--d, 0s);
}
@keyframes appear {
  from { opacity: 0; transform: translateY(var(--y, 4px)); }
}

/* hover "whileHover" opacità */
.hov { transition: opacity .2s var(--ease); }
.hov:hover { opacity: .45; }

/* =========================================================
   HEADER
   ========================================================= */
.hdr {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 11px 20px;
  font-family: var(--round);
  font-size: 12.64px;
  line-height: 1em;
  letter-spacing: -0.04em;
  overflow: clip;
}
.hdr p { white-space: nowrap; }
.hdr-col { display: flex; flex-direction: column; gap: 3px; flex: none; }
.h-name   { width: 158px; height: 11px; }
.h-contact{ width: 102px; height: 12px; font-family: var(--arial); color: rgba(0,0,0,.51); cursor: pointer; position: relative; z-index: 1; }
.h-empty  { width: 80px; height: 12px; flex: none; }
.h-works  { width: 70px; height: 14px; flex: none; }
.h-ig     { width: 95px; height: 14px; flex: none; text-align: center; }
.h-about  { width: 65px; height: 14px; flex: none; text-align: center; }

/* =========================================================
   CONTACT POPUP
   ========================================================= */
#ct-contact-popup {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 2147483647;
  padding: 20px;
  font-family: var(--arial);
}
#ct-contact-popup .card {
  position: relative; background: #fff; color: #000;
  width: 100%; max-width: 380px; padding: 26px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
#ct-contact-popup .x {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; font-size: 20px; line-height: 1;
  cursor: pointer; color: #000; padding: 4px; font-family: inherit;
}
#ct-contact-popup .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .5; margin-bottom: 10px; }
#ct-contact-popup .mail { font-size: 17px; color: #000; word-break: break-all; display: block; margin-bottom: 18px; }
#ct-contact-popup .btns { display: flex; gap: 8px; flex-wrap: wrap; }
#ct-contact-popup .btn {
  flex: 1; min-width: 120px; padding: 12px 10px; font-size: 11px; letter-spacing: .06em;
  text-align: center; border: 1px solid #000; cursor: pointer; font-family: inherit;
}
#ct-contact-popup .btn.dark { background: #000; color: #fff; }
#ct-contact-popup .btn.dark:hover { color: #fff; }
#ct-contact-popup .btn.light { background: #fff; color: #000; }

/* =========================================================
   PAGINA (contenitore come il "frame" di Framer)
   ========================================================= */
.page { position: relative; width: 100%; background: #fff; }

/* =========================================================
   HOME
   ========================================================= */
.home { height: var(--pageH); overflow: clip; }
.hero {
  position: fixed;
  left: 20px; bottom: 8px;
  z-index: 1;
  max-width: 1200px; min-width: 100px;
  font-family: var(--round);
  font-size: 58.08px;
  line-height: 54px;
  letter-spacing: -0.5px;
  text-wrap: balance;
  white-space: pre-wrap;
  --y: 12px; --d: .18s;
}
.reveal {
  position: fixed; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.reveal .tile {
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.reveal-m { display: none; }
.reveal-m .tile { background-size: contain; }

/* =========================================================
   WORKS
   ========================================================= */
.works { min-height: 1001px; height: max(100vh, 1001px); }

.wtext {
  position: absolute; left: 21px; right: 21px; max-width: 1158px;
  height: 30px;
  display: flex; flex-direction: row; gap: 16px;
  font-size: 10px; line-height: 1em; letter-spacing: -0.04em;
  overflow: clip;
}
.wtext .c {
  flex: 1 0 0; width: 1px;
  white-space: pre-line;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: clip;
  cursor: pointer;
  --y: 8px;
  transition: opacity .25s var(--ease);
}
.wtext .c:hover { opacity: .45; }
.wtext .c.end { text-align: right; }

.wrow {
  position: absolute; left: 21px; height: 84px;
  width: calc(100% - 42px);
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  overflow: clip; cursor: pointer;
}
.wrow .th {
  flex: none; height: 84px; display: block;
  opacity: .4;
  --y: 8px;
  transition: opacity .3s var(--ease);
}
.wrow .th img { height: 100%; width: auto; }
.wrow:hover .th { opacity: 1; transition: opacity .55s var(--ease) var(--hd, 0s); }
.wrow .th:hover { opacity: var(--ho, .35); transition: opacity .25s var(--ease) 0s; }

.wm { display: none; }

/* =========================================================
   ABOUT
   ========================================================= */
.about { min-height: max(100vh, 728px); padding: 78px 21px 40px; }
.ab-intro {
  position: relative; width: 1158px; max-width: 100%;
  display: flex; flex-direction: column; gap: 28px;
  opacity: .9;
}
.ab-lead {
  font-family: var(--round);
  font-size: 34px; line-height: 1.05; letter-spacing: -1.2px;
  text-wrap: balance;
}
.ab-sub { font-family: var(--archivo); font-size: 14px; line-height: 1.35; }
.ab-cols {
  position: relative; width: 1158px; max-width: 100%; margin-top: 53px;
  display: flex; flex-direction: row; justify-content: space-between;
  font-family: var(--archivo);
}
.ab-col { width: 260px; display: flex; flex-direction: column; gap: 18px; }
.ab-h  { font-size: 11px; line-height: 1em; }
.ab-h.s { font-size: 10px; }
.ab-e  { font-size: 11px; line-height: 1.3; }
.ab-e span { display: block; }

/* =========================================================
   PAGINA PROGETTO
   ========================================================= */
.proj { height: var(--pageH); overflow: clip; }

.gal {
  position: absolute; left: 0; right: 0;
  height: 732px;
  /* come Framer, ma su schermi bassi le foto non salgono sotto il menu */
  top: max(calc(54.14285714285717% - 366px), 27px);
  overflow: auto;
}
.gal-in {
  position: absolute; left: 0; top: 46%;
  transform: translateY(-50%);
  height: 790px; width: min-content;
  display: flex; flex-direction: row; align-items: center; gap: 20px;
  cursor: default;
}
.gal-in > * { flex: none; height: 77%; width: auto; position: relative; z-index: 1; }
.gal-in img, .gal-in video { width: auto; object-fit: cover; }

/* barra info (desktop) */
.ibar {
  position: absolute; left: 0; right: 0; bottom: 18px;
  z-index: 100;
  background: rgba(0,0,0,0);
}
.ibar-row {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding: 0 0 0 20px; width: 100%;
  font-family: var(--round); font-size: 14px; line-height: .9em; letter-spacing: .01em;
}
.ibar-row > * { flex: none; white-space: pre-wrap; }
.ib-n { width: 31px;  height: 17px; }
.ib-t { width: 166px; height: 19px; }
.ib-i { width: 157px; height: 18px; cursor: pointer; }
.ib-y { width: 165px; height: 19px; }
.ib-x { min-width: 149px; white-space: nowrap; height: 14px; transition: opacity .2s var(--ease); }
.ib-x:hover { opacity: .45; }
.ib-i .cl { display: none; }
.ib-desc, .ib-det { display: none; }

.ibar.open {
  background: #fff;
  height: 180px;
  min-width: 1178px;
}
.ibar.open .ibar-row { position: absolute; left: 0; right: 0; top: 0; width: auto; padding: 15px 0 15px 20px; z-index: 1; }
.ibar.open .ib-i .op { display: none; }
.ibar.open .ib-i .cl { display: inline; line-height: 1.2; letter-spacing: normal; }
.ibar.open .ib-desc {
  display: block;
  position: absolute; left: 24px; top: 49px; width: 606px; min-height: 112px;
  font-family: var(--arial); font-size: 14px; line-height: 1.2;
  white-space: pre-wrap; z-index: 1;
}
.ibar.open .ib-det {
  display: block;
  position: absolute; width: 202px; height: 71px;
  left: calc(83.02207130730052% - 101px);
  top: calc(59.444444444444464% - 35.5px);
  font-family: var(--arial); font-size: 13px; line-height: 1.2;
  white-space: pre-wrap; z-index: 1;
}
.ib-det .yr { font-family: var(--round); font-size: 10px; line-height: 1em; letter-spacing: -0.04em; }

/* blocco testo progetto (solo telefono) */
.pm { display: none; }

/* =========================================================
   TELEFONO  (< 1200px)
   ========================================================= */
@media (max-width: 1199.98px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block; }

  /* header */
  .h-ig { display: none; }
  .h-works { width: 64px; }
  .h-about { width: 57px; }

  /* home */
  .hero {
    left: 23px; bottom: 43px;
    font-size: 22.88px; line-height: 21.30009621033218px; letter-spacing: -0.19px;
  }
  .reveal-d { display: none; }
  .reveal-m { display: block; }

  /* works */
  .works { height: auto; min-height: 0; }
  .wtext, .wrow { display: none; }
  .wm {
    display: block;
    width: min(348px, calc(100% - 42px));
    margin: 0 auto;
    padding: 67px 0 25px;
  }
  .wm-b { margin-bottom: 35px; }
  .wm-b:last-child { margin-bottom: 0; }
  .wm-t { font-family: var(--round); font-size: 12px; line-height: 1em; --y: 8px; display: block; }
  .wm-r { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 8px; --y: 8px; }
  .wm-c { font-family: var(--arial); font-size: 10px; line-height: 1.2; color: rgb(119,119,119); opacity: .6; width: 322px; }
  .wm-y { font-family: var(--round); font-size: 11px; line-height: 1.2; flex: none; }
  .wm-g { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
  .wm-g a { display: block; height: 100px; width: calc(100px * var(--r)); flex: none; transition: transform .2s var(--ease); }
  .wm-g a:active { transform: scale(.9); }
  .wm-g img { height: 100%; width: auto; }

  /* about */
  .about { min-height: 0; padding: 72px 21px 64px; }
  .ab-intro { width: auto; max-width: 348px; gap: 20px; }
  .ab-lead { font-size: 27px; line-height: 1.08; }
  .ab-sub { font-size: 13px; }
  .ab-cols {
    width: auto; max-width: 348px; margin-top: 42px;
    flex-direction: column; gap: 42px; justify-content: flex-start;
  }
  .ab-col { width: 100%; gap: 16px; }
  .ab-h { font-size: 12px; }
  .ab-h.s { font-size: 10px; }

  /* progetto */
  .ibar { display: none; }
  .gal { height: 380px; top: 310px; }
  .gal-in { height: 380px; top: 0; transform: none; }
  .gal-in > * { height: 380px; }
  .pm { display: block; }
  .pm-title {
    position: absolute; left: 0; right: 0; top: 67px;
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    padding: 6px 0 6px 20px;
    font-family: var(--round); font-size: 13px; line-height: .9em; letter-spacing: .01em;
    z-index: 1;
  }
  .pm-title .n { width: 31px; flex: none; }
  .pm-meta {
    position: absolute; left: 19px; top: 99px; width: 320px;
    font-family: var(--arial); font-size: 12px; line-height: 1.15;
    z-index: 1;
  }
  .pm-desc {
    position: absolute; left: 21px; width: 328px;
    font-family: var(--arial); font-size: 12px; line-height: 1.15;
    z-index: 1;
  }
  .pm-desc p + p { margin-top: 1.15em; }
  .pm-next {
    position: absolute; right: 20px; bottom: 18px; z-index: 2;
    font-family: var(--round); font-size: 13px; line-height: .9em; letter-spacing: .01em;
    transition: opacity .2s var(--ease);
  }
  .pm-next a { display: block; padding: 8px 0 8px 12px; margin: -8px 0 -8px -12px; }
  .pm-next:active, .pm-next:hover { opacity: .45; }
}

.ib-desc.gap p + p { margin-top: 1.2em; }

/* telefono: la pagina progetto lascia sempre posto a NEXT PROJECT sotto la galleria */
@media (max-width: 1199.98px) {
  .proj { height: max(100vh, 740px); }
}

/* ---------- selettore lingua (Home) ---------- */
.lang {
  position: fixed; right: 20px; bottom: 14px; z-index: 2;
  display: flex; gap: 10px;
  font-family: var(--round); font-size: 12.64px; line-height: 1em; letter-spacing: -0.04em;
}
.lang a { color: rgba(0,0,0,.51); transition: color .2s var(--ease), opacity .2s var(--ease); }
.lang a[href]:hover { color: #000; }
.lang a.on { color: #000; cursor: default; }

/* tastiera: contorno visibile solo quando si naviga con Tab */
a:focus-visible, [role="button"]:focus-visible { outline: 1px solid #000; outline-offset: 3px; }
[role="button"] { cursor: pointer; }

@media (max-width: 1199.98px) {
  .lang { bottom: 45px; }
}

/* ---------- tablet / iPad (700–1199px): più spazio, stessa logica del telefono ---------- */
@media (min-width: 700px) and (max-width: 1199.98px) {
  .hero { font-size: 40px; line-height: 38px; letter-spacing: -0.4px; left: 21px; }

  .wm-g a { height: 130px; width: calc(130px * var(--r)); }
  .wm-c { width: auto; }

  .ab-lead { font-size: 32px; line-height: 1.06; }
  .ab-cols { flex-direction: row; flex-wrap: wrap; column-gap: 40px; row-gap: 48px; }
  .ab-col { width: calc(50% - 20px); }

  .pm-desc { width: 520px !important; }
  .gal { height: 520px; top: 330px; }
  .gal-in { height: 520px; }
  .gal-in > * { height: 520px; }
  .proj { height: max(100vh, 900px); }
}

/* =========================================================
   ALLINEAMENTI AL MENU
   margine sinistro = "CATERINA TAVA" (20px)
   margine destro   = fine di "ABOUT / CHI SONO" (20px dal bordo)
   ========================================================= */
.h-about { text-align: right; }
.wtext, .wrow { left: 20px; }
.about { padding-left: 20px; padding-right: 20px; }
.ib-x { text-align: right; padding-right: 20px; min-width: 169px; }

@media (max-width: 1199.98px) {
  .wm { width: auto; margin: 0 20px; }
  .ab-intro, .ab-cols { max-width: none; }
  .pm-title { padding-left: 20px; }
  .pm-meta { left: 20px; }
  .pm-desc { left: 20px !important; width: min(330px, calc(100% - 40px)) !important; }
}
@media (min-width: 700px) and (max-width: 1199.98px) {
  .pm-desc { width: 520px !important; }
}