/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --bg:        #07070a;
  --bg-elev:   #0e0e12;
  --fg:        #f2f1ee;
  --muted:     #8c8c92;
  --line:      rgba(255,255,255,0.14);
  --red:       #f23332;
  --green:     #34ffb0;
  --orange:    #f23332;
  --orange-dim:rgba(242,51,50,0.35);
  --red-dim:   rgba(242,51,50,0.35);
  --green-dim: rgba(52,255,176,0.30);

  --f-display: 'Albert Sans', 'Arial Narrow', sans-serif;
  --f-body:    'Inter', -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', 'Courier New', monospace;
}

*{ box-sizing:border-box; }
/* Deter casual image saving (drag / long-press-save); not a real protection,
   images remain reachable via devtools, this just removes the easy paths. */
img{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-touch-callout:none;
}
html{ scroll-behavior:smooth; scrollbar-gutter:stable; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* Home page: fixed single screen, no scrolling — only the hero
   (orange background + animated elements) is shown for now. */
html:has(body.home){ height:100%; overflow:hidden; }
body.home{ height:100vh; overflow:hidden; }
body.home .categories,
body.home .site-footer{ display:none; }

::selection{ background:var(--red); color:#000; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
}

.eyebrow{
  font-family:var(--f-mono);
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.72rem;
  color:var(--muted);
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.4rem clamp(1.2rem, 4vw, 3rem);
  font-family:var(--f-display);
  font-weight:800;
  font-size:0.9675rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#fff;
}
.nav__brand, .nav__mobile-brand{ font-family:var(--f-display); font-weight:500; font-size:0.95rem; letter-spacing:0; text-transform:none; }
.nav__brand b, .nav__mobile-brand b{ font-weight:800; }
.nav__mobile-brand{ display:none; }
.nav__links{ display:flex; gap:1.6rem; align-items:center; margin-left:auto; }
.nav__links > a{ position:relative; padding-bottom:2px; }

/* Simplified centered mobile header on project pages: plain "ANONIMALUCI"
   above the nav links, no fixed-position backlink competing for space. */
@media (max-width:700px){
  .nav{
    flex-direction:column;
    justify-content:center;
    gap:0.6rem;
    padding:1.1rem clamp(1.2rem, 4vw, 3rem);
  }
  .nav__brand{ display:none; }
  .nav__mobile-brand{ display:block; }
  .nav__links{ margin-left:0; justify-content:center; }
  .proj-backlink{ display:none; }
}
.nav--on-orange{ color:#0a0a0a; mix-blend-mode:normal; }

/* PROJECTS dropdown */
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%);
  margin-top:1rem;
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:4px;
  padding:0.4rem 0;
  min-width:190px;
  opacity:0; visibility:hidden;
  transition:opacity 0.2s ease;
  text-align:left;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; }
.dropdown a{
  display:block;
  padding:0.6rem 1rem;
  white-space:nowrap;
  color:var(--fg);
}
.nav--on-orange .dropdown a{ color:var(--fg); }
.dropdown a:hover{ background:rgba(255,255,255,0.06); }

/* =========================================================
   CUSTOM CURSOR
   ========================================================= */
.cursor-dot{
  position:fixed;
  top:0; left:0;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--orange);
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:width 0.18s ease, height 0.18s ease, background-color 0.2s ease;
  will-change:transform;
}
.cursor-dot.on-orange{ background:#0a0a0a; }
.cursor-dot.is-hover{ width:23px; height:23px; }
@media (hover:hover) and (pointer:fine){
  body{ cursor:none; }
  a, button{ cursor:none; }
}
@media (hover:none), (pointer:coarse){
  .cursor-dot{ display:none; }
}

/* =========================================================
   LASER DIVIDER — signature element
   ========================================================= */
.laser-divider{
  width:100%;
  height:56px;
  margin:0 auto;
  display:block;
  overflow:visible;
}
.laser-divider line{
  stroke:var(--line);
  stroke-width:1;
}
.laser-divider .glow{
  stroke:var(--red);
  opacity:0.55;
  animation:laser-flicker 4s ease-in-out infinite;
}
.laser-divider .glow.g2{
  stroke:var(--green);
  animation-delay:1.3s;
}
@keyframes laser-flicker{
  0%, 100%{ opacity:0.15; }
  50%{ opacity:0.65; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(242,51,50,0.10), transparent 60%),
    var(--bg);
}
.hero__beams{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}
.hero__beams line{
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.hero__content{
  position:relative;
  z-index:1;
  padding:0 1.2rem;
}
.hero__title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(2.6rem, 9vw, 6.4rem);
  letter-spacing:-0.02em;
  line-height:0.98;
  margin:0 0 0.9rem;
}
.hero__tagline{
  font-family:var(--f-mono);
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:clamp(0.68rem, 1.4vw, 0.85rem);
  color:var(--muted);
}
.hero__scroll{
  position:absolute;
  bottom:2.2rem; left:50%;
  transform:translateX(-50%);
  font-family:var(--f-mono);
  font-size:0.7rem;
  letter-spacing:0.15em;
  color:var(--muted);
  text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  z-index:1;
}
.hero__scroll span{
  width:1px; height:34px;
  background:linear-gradient(var(--muted), transparent);
  animation:scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes scroll-pulse{
  0%{ transform:scaleY(0); transform-origin:top; opacity:0.3; }
  50%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  51%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; opacity:0.3; }
}

body.home [data-animate-from-center]{ opacity:1; }

.home-hero{
  position:relative;
  height:100svh;
  min-height:560px;
  background:var(--orange);
  color:#0a0a0a;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:1.5rem 1.2rem 1.4rem;
  overflow:hidden;
}
.home-hero__logo{
  font-family:var(--f-display);
  font-size:3.125rem;
  letter-spacing:-0.01em;
  margin:0;
}
.home-hero__logo-anonima{ font-weight:500; }
.home-hero__logo-luci{ font-weight:800; }
.home-hero__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2.2rem;
  margin-top:calc(0.6rem - 3mm);
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.5625rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.home-hero__nav a{ color:#0a0a0a; }
.pulse-dot-center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.pulse-dot-wrap{
  position:absolute;
  top:50%;
  left:50%;
  width:1cm;
  height:1cm;
  margin:-0.5cm 0 0 -0.5cm;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pulse-dot{
  width:1cm; height:1cm;
  border-radius:50%;
  background:#0a0a0a;
  animation:pulse-breathe 1.8s ease-in-out infinite;
}
@keyframes pulse-breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(0.03); }
}
.home-hero__claim{
  max-width:620px;
  font-size:clamp(0.98rem, 2vw, 1.15rem);
  font-weight:700;
  line-height:1.45;
  margin-top:auto;
  margin-bottom:1.5cm;
}
.home-hero__scroll{
  margin-top:1.4rem;
  font-family:var(--f-mono);
  font-size:0.7rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
}

@media (max-width:700px){
  .home-hero{ padding:1cm 1.1rem 1.2rem; }
  .home-hero__logo{ font-size:1.3rem; }
  .home-hero__nav{ gap:1.4rem; font-size:0.8875rem; margin-top:0.5rem; }
  .home-hero__claim{ font-size:0.92rem; max-width:94vw; }
}

.categories{
  padding:3rem clamp(1.2rem, 4vw, 3rem) 6rem;
}
.categories__eyebrow{
  padding:0;
  margin-bottom:1.8rem;
}
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:2px;
  background:var(--line);
}
.cat-card{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--bg-elev);
}
.cat-card__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(0.85) brightness(0.7);
  transform:scale(1.02);
  transition:transform 1s cubic-bezier(.16,1,.3,1), filter 0.5s ease;
}
.cat-card:hover .cat-card__img{ transform:scale(1.08); filter:saturate(1) brightness(0.9); }
.cat-card__overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1.6rem;
  background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.8) 100%);
}
.cat-card__eyebrow{
  font-family:var(--f-mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:0.4rem;
}
.cat-card__title{
  font-family:var(--f-display);
  font-weight:500;
  font-size:1.5rem;
  margin:0 0 0.4rem;
}
.cat-card__desc{
  font-size:0.85rem;
  color:#cfcfcb;
}

/* =========================================================
   PROJECT GRID
   ========================================================= */
.grid-section{
  padding:5rem clamp(1.2rem, 4vw, 3rem) 6rem;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:2px;
  background:var(--line);
}
.card{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--bg-elev);
  display:block;
}
.card__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(0.85) brightness(0.78);
  transform:scale(1.02);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1), filter 0.6s ease;
}
.card:hover .card__img{
  transform:scale(1.08);
  filter:saturate(1) brightness(0.95);
}
.card__overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1.4rem;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75) 100%);
}
.card__num{
  font-family:var(--f-mono);
  font-size:0.7rem;
  color:var(--muted);
  letter-spacing:0.12em;
}
.card__title{
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.35rem;
  letter-spacing:-0.01em;
  margin:0.2rem 0 0;
}
.card__beams{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 0.5s ease;
  pointer-events:none;
}
.card:hover .card__beams{ opacity:1; }
.card__beams line{
  stroke:var(--green);
  stroke-width:1;
  opacity:0.5;
}

/* =========================================================
   PROJECT PAGE
   ========================================================= */
.project-hero{
  position:relative;
  width:100%;
  aspect-ratio:14/9;
  min-height:420px;
  max-height:92vh;
}
.project-hero img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(0.9) brightness(0.82);
}
.project-hero__meta{
  position:absolute;
  left:clamp(1.2rem, 4vw, 3rem);
  bottom:calc(2.4rem - 1.5cm);
  z-index:2;
}
.project-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.85) 100%);
}
.project-hero__meta{
  font-family:var(--f-mono);
}
.project-title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(2rem, 6vw, 4.2rem);
  letter-spacing:-0.02em;
  line-height:1;
  margin:0 0 10px;
  position:relative; z-index:2;
}
.project-meta-line{
  font-family:var(--f-display);
  font-weight:700;
  font-size:0.905rem;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:#fff;
  position:relative; z-index:2;
}
.project-hero__desc{
  margin:0.6rem 0 0;
  max-width:calc(420px + 3cm);
  text-align:left;
  font-family:var(--f-display);
  font-weight:500;
  font-style:italic;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  line-height:1.5;
  color:var(--muted);
  position:relative; z-index:2;
}

@media (max-width:700px){
  .project-hero__meta{
    right:clamp(1.2rem, 4vw, 3rem);
  }
  .project-title{
    font-size:calc(clamp(2rem, 6vw, 4.2rem) - 2px);
  }
  .project-meta-line{
    font-size:calc(0.905rem - 3px);
  }
  .project-hero__desc{
    font-size:calc(0.78rem - 5px);
  }
}

.project-body{
  max-width:680px;
  margin:0 auto;
  padding:5rem 1.4rem 2rem;
}
.project-body p{
  font-size:1.08rem;
  color:#dcdcd9;
}
.project-body .eyebrow{ margin-bottom:1rem; display:block; }

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:2px;
  background:var(--line);
  margin:3rem 0;
  padding:0 clamp(1.2rem, 4vw, 3rem);
}
.gallery img{
  width:100%; height:100%;
  object-fit:cover;
  background:var(--bg-elev);
  filter:saturate(0.9) brightness(0.85);
  transition:filter 0.4s ease;
}
.gallery a:hover img{ filter:saturate(1) brightness(1); }

.project-nav{
  display:flex;
  justify-content:space-between;
  border-top:2px solid #fff;
  border-bottom:2px solid #fff;
  margin-top:3rem;
}
.project-nav a{
  flex:1;
  padding:1.1rem clamp(1.2rem, 4vw, 3rem);
  font-family:var(--f-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:0.9675rem;
  color:var(--muted);
  transition:color 0.25s ease, background 0.25s ease;
}
.project-nav a:hover{ color:var(--fg); background:var(--bg-elev); }
.project-nav a.next{ text-align:right; }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-wrap{
  max-width:760px;
  margin:0 auto;
  padding:9rem 1.4rem 4rem;
}
.about-wrap h1{
  font-family:var(--f-display);
  font-size:clamp(2rem, 5vw, 3.2rem);
  margin-bottom:1.6rem;
}
.about-wrap p{ font-size:1.08rem; color:#dcdcd9; }
.contact-block{
  margin-top:2.8rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
  font-family:var(--f-mono);
  font-size:0.9rem;
}
.contact-block a{
  display:inline-block;
  margin-top:0.5rem;
  color:var(--green);
  border-bottom:1px solid var(--green-dim);
}
.contact-block .socials{
  margin-top:1.6rem;
  display:flex;
  gap:1.4rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:0.78rem;
  color:var(--muted);
}
.contact-block .socials a:hover{ color:var(--fg); }

.backstage-title{
  font-family:var(--f-mono);
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:0.72rem;
  color:var(--muted);
  padding:0 clamp(1.2rem, 4vw, 3rem);
  margin-bottom:1rem;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--bg);
  padding:3rem clamp(1.2rem, 4vw, 3rem) 40px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:space-between;
  align-items:center;
  font-family:var(--f-display);
  font-weight:500;
  font-size:0.78rem;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:0.16em;
}
.site-footer .brand-anonima{ font-weight:400; }
.site-footer .brand-luci{ font-weight:600; }
.site-footer .socials{ display:flex; gap:1.4rem; }
.site-footer a:hover{ color:var(--red); }

@media (max-width:700px){
  .site-footer .socials{
    flex-wrap:wrap;
    min-width:0;
  }
}

.press-item{
  border-bottom:1px solid var(--line);
  padding-bottom:1.6rem;
}
.press-item h3{
  font-family:var(--f-display);
  font-weight:500;
  font-size:1.2rem;
  margin:0.4rem 0 0;
}

/* placeholder marker (visible only as subtle dashed underline, for content editors) */
.ph{
  border-bottom:1px dashed var(--red-dim);
}

/* =========================================================
   PROJECTS — full-page scroll gallery with fixed sidebar
   ========================================================= */
html:has(body.projects-page){ height:100%; overflow:hidden; }
body.projects-page{
  margin:0;
  height:100vh;
  background:#000;
  color:#fff;
  overflow:hidden;
}

.proj-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  text-align:center;
  padding:1.5rem 1.2rem 0.8rem;
  pointer-events:none;
}
.proj-header a{ pointer-events:auto; }
.proj-header__logo{
  margin:0;
  font-family:var(--f-display);
  font-size:3.125rem;
  color:#fff;
  letter-spacing:-0.01em;
}
.proj-header__logo .is-medium{ font-weight:500; }
.proj-header__logo .is-extrabold{ font-weight:800; }
.proj-header__nav{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:2.2rem;
  margin-top:calc(0.6rem - 3mm);
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.5625rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.proj-header__nav a{ color:#fff; }
.proj-header__nav a.is-active{ color:var(--red); }

.proj-header__nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* light-installations.html: small "other projects / ANONIMAPROGETTI"
   pointer under the Projects link, deliberately kept narrower than
   PROJECTS above it since it's a secondary, quieter link. Smartphone
   only — on desktop the sidebar already links to the other category. */
.proj-header__subnav{
  display:none;
  flex-direction:column;
  align-items:center;
  margin-top:0.3rem;
  line-height:1.2;
}
.proj-header__subnav-eyebrow{
  font-style:italic;
  font-weight:500;
  font-size:0.55rem;
  letter-spacing:0.04em;
  text-transform:none;
  color:rgba(255,255,255,0.55);
}
.proj-header__subnav-label{
  font-weight:800;
  font-size:0.6rem;
  letter-spacing:0.08em;
  color:#fff;
}
.proj-header__subnav:hover .proj-header__subnav-eyebrow{ color:#fff; }
.proj-header__subnav:hover .proj-header__subnav-label{ color:var(--red); }

/* anonima-progetti.html: the 5 project categories under Projects,
   click jumps straight to the first project of that category. Smartphone
   only — on desktop the sidebar already lists every category. */
.proj-header__categories{
  display:none;
  flex-wrap:wrap;
  justify-content:center;
  gap:0 0.7rem;
  max-width:108px;
  margin-top:0.1rem;
}
.proj-header__categories a{
  font-style:italic;
  font-weight:500;
  font-size:0.6rem;
  line-height:1;
  letter-spacing:0.03em;
  text-transform:none;
  color:rgba(255,255,255,0.55);
  white-space:nowrap;
}
.proj-header__categories a:hover{ color:var(--red); }

.proj-sidebar{
  position:fixed;
  top:7.35rem;
  left:1.4rem;
  z-index:50;
  width:220px;
  max-height:calc(100vh - 9.85rem);
  overflow-y:auto;
  scrollbar-width:none;
  font-family:var(--f-display);
}
.proj-sidebar::-webkit-scrollbar{ display:none; }
.proj-sidebar__eyebrow{
  margin:0 0 0.35rem;
  padding:0 0.4rem;
  font-weight:700;
  font-size:1.0625rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
}
.proj-sidebar__list{
  list-style:none;
  margin:0 0 1.6rem;
  padding:0;
}
.proj-sidebar__list li{ margin-bottom:0.1rem; }
.proj-sidebar__list a{
  display:block;
  color:rgba(255,255,255,0.55);
  font-style:italic;
  font-weight:500;
  font-size:0.875rem;
  line-height:1.05;
  padding:0.02rem 0.4rem;
  border-radius:3px;
  transition:color 0.2s ease, background-color 0.2s ease;
}
.proj-sidebar__list a:hover{ color:#fff; }
.proj-sidebar__list a.is-active{
  color:#fff;
}
.proj-sidebar__other{
  margin:0 0 -1px;
  padding:0.02rem 0.4rem;
  color:rgba(255,255,255,0.55);
  font-style:italic;
  font-weight:500;
  font-size:0.875rem;
  line-height:1.05;
}
.proj-sidebar__all{
  display:block;
  padding:0 0.4rem;
  color:#fff;
  font-size:1.25rem;
}
.proj-sidebar__all .is-medium{ font-weight:500; }
.proj-sidebar__all .is-extrabold{ font-weight:800; }

.proj-scroll{
  height:100vh;
  overflow-y:scroll;
}
.proj-slide{
  position:relative;
  height:100vh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background-size:cover;
  background-position:center;
  background-color:#0a0a0a;
  padding-bottom:4.6rem;
}
.proj-slide__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.05) 38%, rgba(0,0,0,0.05) 55%, rgba(10,0,0,0.85) 100%);
}
.proj-slide__title{
  position:relative;
  z-index:2;
  font-family:var(--f-display);
  font-weight:800;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:0.01em;
  font-size:clamp(1.5rem, 3.2vw, 2.4rem);
  color:#fff;
}
.proj-slide__title:hover{ color:var(--red); }

/* Smartphone: each project used to take a full 100vh screen, so scrolling
   through 20-30 of them one at a time was a lot of scrolling. Shrink each
   to a compact full-width card instead, so the whole list scans quickly. */
@media (max-width:700px){
  html:has(body.projects-page){ height:auto; overflow:visible; }
  body.projects-page{
    height:auto;
    overflow:visible;
  }
  .proj-scroll{
    height:auto;
    overflow-y:visible;
  }
  .proj-slide{
    height:auto;
    aspect-ratio:4/3;
    padding-bottom:1.2rem;
  }
  .proj-slide__title{
    font-size:1.05rem;
  }
  .proj-header__subnav{
    display:flex;
  }
  .proj-header__categories{
    display:flex;
  }
}

@media (max-width:820px){
  .proj-sidebar{ display:none; }
  .proj-header__logo{ font-size:1.3rem; }
  .proj-header__nav{ gap:1.4rem; font-size:0.8875rem; }
}

/* =========================================================
   ABOUT — photo hero + bio / awards / contacts
   ========================================================= */
.about-hero{
  position:relative;
  height:92vh;
  min-height:560px;
  background-image:url(../images/about-hero.jpg);
  background-size:cover;
  background-position:center 22%;
  background-color:#0a0a0a;
}
.about-hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.08) 22%, rgba(0,0,0,0.04) 78%, rgba(0,0,0,0.35) 100%);
}

.about-content{
  background:var(--orange);
  color:#0a0a0a;
  padding:3rem clamp(1.2rem, 4vw, 3rem) 4.5rem;
}
.about-content__intro{
  max-width:920px;
  margin:0 0 1rem;
  font-family:var(--f-body);
  font-weight:700;
  font-size:1.2625rem;
  line-height:1.55;
}
.about-content h2{
  font-family:var(--f-display);
  font-weight:900;
  font-size:1.55rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  margin:2.4rem 0 1rem;
}
.about-content__title{
  margin-top:0 !important;
}
.about-awards{
  list-style:none;
  margin:0 0 2.4rem;
  padding:0;
}
.about-awards li{
  font-family:var(--f-body);
  font-weight:700;
  font-size:1.2325rem;
  margin-bottom:0.55rem;
}
.about-contacts p{
  font-family:var(--f-body);
  font-weight:700;
  font-size:1.2325rem;
  line-height:1.5;
  margin:0 0 1rem;
}
.about-contacts a{
  color:#0a0a0a;
  text-decoration:underline;
}
.about-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  border:1.5px solid #0a0a0a;
  border-radius:7px;
  margin-top:0.4rem;
}
.about-social svg{ width:16px; height:16px; }

@media (max-width:700px){
  .about-hero{ height:70vh; min-height:420px; background-position:center 15%; }
}

/* =========================================================
   PRESS — on-orange header + two-column listing
   ========================================================= */
.proj-header__nav a.is-active-dark{ color:#fff; }

.press-page{
  min-height:100vh;
  background:var(--orange);
  color:#0a0a0a;
  padding-top:11.5rem;
}
.press-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  padding:0 clamp(1.2rem, 4vw, 3rem) 5rem;
  max-width:1600px;
  margin:0 auto;
}
.press-col h2{
  font-family:var(--f-display);
  font-weight:900;
  font-size:1.675rem;
  text-transform:uppercase;
  margin:0 0 1.6rem;
}
.press-entry{
  margin-bottom:1.1rem;
}
.press-entry__title{
  font-family:var(--f-display);
  font-weight:900;
  font-size:1.5rem;
  line-height:1.15;
  margin:0;
}
.press-entry__date{ font-weight:400; }
.press-entry__link{
  display:block;
  font-family:var(--f-mono);
  font-weight:700;
  font-size:0.8675rem;
  letter-spacing:0.06em;
  color:#0a0a0a;
  text-decoration:none;
  margin-top:0.1rem;
}
.press-entry__link:hover{ text-decoration:underline; }

@media (max-width:820px){
  .press-columns{ grid-template-columns:1fr; }
  .press-page{ padding-top:8rem; }
}

/* =========================================================
   ANONIMA PROGETTI — back link
   ========================================================= */
.proj-backlink{
  position:fixed;
  top:1.5rem;
  left:1.4rem;
  z-index:70;
  padding:0 0.4rem;
  font-family:var(--f-display);
  font-weight:700;
  font-size:0.85rem;
  line-height:1.3;
  letter-spacing:0.02em;
}
.proj-backlink span{
  display:block;
  color:rgba(255,255,255,0.45);
  text-transform:lowercase;
}
.proj-backlink b{
  display:block;
  color:#fff;
  font-weight:700;
  text-transform:uppercase;
}
.proj-backlink:hover b{ color:var(--red); }

/* anonima-progetti.html: unlike project detail pages (which get the
   centered mobile header instead), this page still needs a way back to
   ANONIMALUCI on smartphone — bring the backlink back, smaller than the
   category links below Projects. */
@media (max-width:700px){
  body.projects-page .proj-backlink{
    display:block;
    top:1rem;
    left:1rem;
    font-size:0.5rem;
    line-height:1.15;
  }
  body.projects-page .proj-backlink span{
    font-size:0.4rem;
  }
}

/* =========================================================
   HGALLERY — mouse-position-controlled horizontal gallery
   ========================================================= */
.hgallery{
  position:relative;
  overflow:hidden;
  height:calc(72vh - 4cm);
  min-height:calc(380px - 4cm);
  margin:3rem 0;
  cursor:ew-resize;
}
.hgallery__track{
  display:flex;
  height:100%;
  gap:7px;
  will-change:transform;
}
.hgallery__track img{
  height:100%;
  width:auto;
  max-width:none;
  object-fit:cover;
  flex-shrink:0;
  filter:saturate(0.9) brightness(0.85);
}
.hgallery__video{
  position:relative;
  height:100%;
  flex-shrink:0;
  overflow:hidden;
  filter:saturate(0.9) brightness(0.85);
  /* aspect-ratio set inline per video, matching its real dimensions (no letterboxing) */
}
.hgallery__video iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
  pointer-events:none;
}
.hgallery__unmute{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  padding:.45em .9em;
  border-radius:999px;
  background:rgba(7,7,10,0.7);
  border:1px solid rgba(255,255,255,0.4);
  color:var(--fg);
  font-family:var(--f-mono);
  font-size:.6rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.hgallery__video:hover .hgallery__unmute{
  opacity:1;
  pointer-events:auto;
}

/* The mouse-driven horizontal scroller doesn't work with touch (no mousemove
   during a swipe, and overflow:hidden blocks native scroll too) — so on any
   touch device, not just narrow phones (tablets and landscape phones can be
   wider than 700px too), skip it and stack everything as a plain static
   vertical list instead. Videos still autoplay/mute as usual. */
@media (max-width:700px), (hover:none), (pointer:coarse){
  .hgallery{
    height:auto;
    min-height:0;
    overflow:visible;
    cursor:default;
  }
  .hgallery__track{
    flex-direction:column;
    transform:none !important;
  }
  .hgallery__track img{
    height:auto;
    width:100%;
    max-width:100%;
  }
  /* The first gallery image is always the same photo used as the hero
     cover just above it — redundant once the gallery is a static stack. */
  .hgallery__track img:first-child{
    display:none;
  }
  .hgallery__video{
    width:100%;
    height:auto;
  }
  .hgallery__unmute{
    opacity:1;
    pointer-events:auto;
  }
}