/* ============================================================
   SEBASTIANO ORIANI — Design System
   Electric cyan on near-black.
   Structure: editorial full-bleed hero + oversized wordmark.
   Atmosphere: deep ambient glow, rotated rail labels, thin outlines.
   Media: horizontal "shelf" browser.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  --ink:        #08090C;
  --ink-2:      #0D0F14;
  --ink-3:      #12151C;
  --ink-4:      #191D26;

  --fg:         #EDEFF3;   /* 17.0:1 on --ink */
  --fg-2:       #A2AAB8;   /*  8.6:1 */
  --fg-3:       #7C8595;   /*  5.2:1 */

  --cy:         #22D3EE;   /* 10.8:1 on --ink */
  --cy-2:       #67E8F9;
  --cy-ink:     #04161B;
  --cy-glow:    rgba(34, 211, 238, 0.16);
  --cy-line:    rgba(34, 211, 238, 0.32);
  --cy-soft:    rgba(34, 211, 238, 0.07);

  --line:       rgba(255, 255, 255, 0.11);
  --line-soft:  rgba(255, 255, 255, 0.06);

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-h1:      clamp(2.3rem, 5.6vw, 4.4rem);
  --fs-h2:      clamp(1.9rem, 4.2vw, 3.25rem);
  --fs-h3:      clamp(1.2rem, 2vw, 1.6rem);
  --fs-lead:    clamp(1.02rem, 1.4vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-label:   0.70rem;

  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;
  --s-4: 2.5rem;  --s-5: 4rem;   --s-6: 6rem;
  --section-y: clamp(3.25rem, 11vw, 9.5rem);
  --gutter:    clamp(1.15rem, 3.6vw, 3rem);
  --maxw:      1440px;

  --ease-out:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-io:   cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast:  180ms;
  --dur:       300ms;

  --r:    3px;    /* editorial: near-square, not pill */
  --r-md: 6px;
  --nav-h: 84px;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* background on html too: keeps the gap between page loads dark, so navigating
   never flashes white now that there is no transition curtain */
html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--cy); color: var(--cy-ink); }
:focus-visible { outline: 2px solid var(--cy); outline-offset: 3px; border-radius: 2px; }

/* Film grain — keeps cyan from reading sterile/crypto */
body::after {
  content: '';
  position: fixed; inset: -50%;
  z-index: 9998; pointer-events: none;
  opacity: 0.030;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 1080px; }
/* overflow:hidden contains the decorative .orb glows, which sit outside the
   box on purpose — without it they widen the document and cause h-scroll. */
.section { padding-block: var(--section-y); position: relative; overflow: hidden; }
.section--tight { padding-block: clamp(2.25rem, 7vw, 6rem); }
.section--line { border-top: 1px solid var(--line-soft); }

.skip-link {
  position: absolute; left: var(--s-2); top: var(--s-2);
  transform: translateY(-250%);
  background: var(--cy); color: var(--cy-ink);
  padding: 0.7rem 1.1rem; font-weight: 600; z-index: 10000;
}
.skip-link:focus { transform: translateY(0); }

/* Ambient glow orb — the Project-Twelve atmosphere, transform-only */
.orb {
  position: absolute;
  z-index: 0;
  width: 62vw; height: 62vw;
  max-width: 760px; max-height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cy-glow) 0%, transparent 66%);
  filter: blur(34px);
  pointer-events: none;
  animation: drift 20s var(--ease-io) infinite alternate;
}
.orb--tl { left: -18%; top: -14%; }
.orb--br { right: -20%; bottom: -18%; animation-delay: -8s; }
.orb--c  { left: 50%; top: 45%; transform: translate(-50%, -50%); }
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(7%, -6%, 0) scale(1.16); }
}
.orb--c { animation: drift-c 20s var(--ease-io) infinite alternate; }
@keyframes drift-c {
  from { transform: translate(-50%,-50%) scale(1); }
  to   { transform: translate(-46%,-54%) scale(1.16); }
}

/* ---------- 4. TYPOGRAPHY ---------- */
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); line-height: 0.96; }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; }

/* Compressed + heavy = impact voice (Explosive Energy) */
.tight {
  font-stretch: 82%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
}
/* Wide + light = reflective voice (Lucid Reflection) */
.airy {
  font-stretch: 112%;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.08;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--fg-2);
  font-weight: 400;
  max-width: 56ch;
  text-wrap: pretty;
}
.muted { color: var(--fg-2); }
.dim   { color: var(--fg-3); }
.cy    { color: var(--cy); }
.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
p + p { margin-top: 1.05em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cy);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: var(--s-3);
}
.eyebrow::after {
  content: '';
  flex: 1; height: 1px; max-width: 160px;
  background: linear-gradient(90deg, var(--cy-line), transparent);
}
.eyebrow--plain::after { display: none; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  content: ''; flex: 1; height: 1px; max-width: 160px;
  background: linear-gradient(270deg, var(--cy-line), transparent);
}

/* Masked line reveal */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; }
.line-mask > span { display: block; will-change: transform; }

/* Rotated vertical rail label (Project Twelve) */
.vlabel {
  display: none;
  position: absolute;
  left: calc(var(--gutter) * 0.35);
  top: var(--section-y);
  z-index: 3;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.vlabel::after {
  content: '';
  display: block;
  width: 1px; height: 64px;
  margin: 1.1rem auto 0;
  background: linear-gradient(180deg, var(--cy-line), transparent);
}

/* ---------- 5. BUTTONS (rectangular, editorial) ---------- */
.btn {
  --btn-bg: var(--cy);
  --btn-fg: var(--cy-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 54px;
  padding: 0.9rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--cy-2);
  transform: translateY(101%);
  transition: transform 440ms var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 44px -10px var(--cy-glow); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn svg { width: 15px; height: 15px; flex: none; transition: transform var(--dur) var(--ease-out); }
.btn:hover svg { transform: translate(2px, -2px); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border: 1px solid var(--line);
}
.btn--outline::before { background: rgba(255,255,255,0.055); }
.btn--outline:hover { border-color: var(--cy-line); box-shadow: none; }
.btn--outline:hover svg { transform: translateX(4px); }

.btn--lg { min-height: 62px; padding: 1.05rem 2.2rem; font-size: 0.8rem; }
.btn--block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  padding-block: 0.4rem;
  min-height: 44px;   /* area di tocco, non estetica */
  position: relative;
}
.link-arrow::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--cy);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 440ms var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left; }
.link-arrow svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- 6. HEADER / NAV ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  transition: transform 450ms var(--ease-out), background 350ms linear,
              backdrop-filter 350ms linear, border-color 350ms linear;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(8, 9, 12, 0.74);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
.site-header.is-hidden { transform: translateY(-102%); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); height: var(--nav-h);
}
.brand { display: block; white-space: nowrap; padding-block: 5px; }
.brand b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 84%;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
}
.brand small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cy);
  margin-top: 5px;
}

.nav-links { display: none; align-items: center; gap: 0.15rem; }
.nav-links a {
  padding: 0.6rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-2);
  transition: color var(--dur-fast) linear;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.3rem;
  height: 1px; background: var(--cy);
  transform: scaleX(0); transform-origin: right;
  transition: transform 420ms var(--ease-out);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links a[aria-current='page'] { color: var(--cy); }
.nav-links a[aria-current='page']::after { transform: scaleX(1); }
.nav-cta { display: none; }

.menu-btn { display: grid; place-items: center; width: 46px; height: 46px; margin-right: -10px; }
.menu-btn span {
  display: block; width: 24px; height: 1.5px;
  background: var(--fg);
  transition: transform 380ms var(--ease-out), opacity 200ms linear;
}
.menu-btn span + span { margin-top: 6px; }
.is-menu-open .menu-btn span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.is-menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.is-menu-open .menu-btn span:nth-child(3) { transform: translateY(-3.75px) rotate(-45deg); }

.menu-overlay {
  position: fixed; inset: 0; z-index: 190;
  background: var(--ink);
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 640ms var(--ease-io);
  visibility: hidden;
  overflow-y: auto;
}
.is-menu-open .menu-overlay { clip-path: inset(0 0 0 0); visibility: visible; }
.menu-nav a {
  display: flex; align-items: baseline; gap: 0.9rem;
  padding: 0.5rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8.5vw, 3rem);
  font-weight: 800;
  font-stretch: 86%;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.12;
  opacity: 0; transform: translateY(26px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.is-menu-open .menu-nav a { opacity: 1; transform: none; }
.is-menu-open .menu-nav li:nth-child(1) a { transition-delay: 150ms; }
.is-menu-open .menu-nav li:nth-child(2) a { transition-delay: 205ms; }
.is-menu-open .menu-nav li:nth-child(3) a { transition-delay: 260ms; }
.is-menu-open .menu-nav li:nth-child(4) a { transition-delay: 315ms; }
.is-menu-open .menu-nav li:nth-child(5) a { transition-delay: 370ms; }
.menu-nav a[aria-current='page'] { color: var(--cy); }
.menu-nav .idx {
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.1em; color: var(--fg-3);
}
.menu-foot {
  opacity: 0; transition: opacity 500ms 410ms linear;
  padding-top: var(--s-4); border-top: 1px solid var(--line-soft);
}
.is-menu-open .menu-foot { opacity: 1; }

/* ============================================================
   7. HERO — full-bleed portrait, meta rail, bleeding wordmark
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--nav-h) + 1rem);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 26%;
  filter: saturate(0.68) contrast(1.08) brightness(0.80);
  will-change: transform;
}
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,9,12,0.90) 0%, rgba(8,9,12,0.34) 30%, rgba(8,9,12,0.80) 68%, var(--ink) 97%),
    linear-gradient(94deg, rgba(8,9,12,0.94) 0%, rgba(8,9,12,0.52) 42%, rgba(8,9,12,0.10) 100%);
}
.hero-glow {
  position: absolute; z-index: 1;
  width: 70vw; height: 70vw; max-width: 800px; max-height: 800px;
  left: -14%; bottom: 4%;
  background: radial-gradient(circle, var(--cy-glow) 0%, transparent 65%);
  filter: blur(36px);
  pointer-events: none;
  animation: drift 20s var(--ease-io) infinite alternate;
}

.hero-body {
  position: relative; z-index: 2;
  display: grid;
  gap: var(--s-5);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}
.hero-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cy);
  margin-bottom: var(--s-3);
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.35rem, min(6.2vw, 8.4vh), 4.15rem);
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.02;
  letter-spacing: -0.038em;
  margin-bottom: var(--s-3);
  text-wrap: balance;
}
.hero-title .em { color: var(--cy); font-weight: 800; font-stretch: 92%; }
.hero-sub {
  max-width: 40ch;
  color: var(--fg-2);
  font-size: var(--fs-lead);
  line-height: 1.6;
  margin-bottom: clamp(1.25rem, 2.6vh, 2.25rem);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Right meta rail.
   Hidden under 600px: every item is repeated elsewhere on the page
   (evento, promessa, social) and it costs ~290px of a phone hero. */
.rail { display: none; gap: var(--s-3); align-content: start; }
.rail-item { border-top: 1px solid var(--line-soft); padding-top: 0.9rem; }
.rail-item dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cy);
  margin-bottom: 0.5rem;
}
.rail-item dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--fg);
  font-weight: 450;
}
.rail-item dd small { display: block; color: var(--fg-3); font-size: 0.8rem; font-weight: 400; }

/* Oversized bleeding wordmark */
.wordmark {
  position: relative; z-index: 2;
  padding-inline: var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
}
.wordmark-type {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 clamp(0.4rem, 1.1vw, 1.3rem);
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 66%;
  text-transform: uppercase;
  line-height: 0.80;
  letter-spacing: -0.028em;
  color: var(--fg);
}
.wordmark-type > span { white-space: nowrap; display: block; }
.wordmark-type .w1 { font-size: min(14.4vw, 20vh, 15rem); }
.wordmark-type .w2 {
  font-size: min(9.6vw, 13.3vh, 9.4rem);
  font-stretch: 72%;
  color: var(--fg);
}
.hero-foot {
  position: relative; z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--gutter) calc(1.4rem + env(safe-area-inset-bottom));
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
}
.hero-foot-txt {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.9;
}
.hero-foot-txt b { color: var(--fg-2); font-weight: 500; }

/* Inner-page hero */
.page-hero {
  position: relative;
  padding-top: clamp(9rem, 17vw, 13rem);
  padding-bottom: var(--section-y);
  overflow: hidden;
}
.page-hero-inner { position: relative; z-index: 2; }
.page-hero .h1 { margin-bottom: var(--s-3); }

/* ---------- 8. MARQUEE ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  padding-block: 1.1rem;
  background: var(--ink-2);
  user-select: none;
  position: relative; z-index: 2;
}
.marquee-track {
  display: flex; width: max-content; will-change: transform;
  animation: marq 42s linear infinite;
}
@keyframes marq { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > span {
  display: flex; align-items: center; gap: 2.2rem; padding-right: 2.2rem;
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 80%;
  font-size: clamp(1.05rem, 2.3vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marquee-track em { font-style: normal; color: var(--cy); }
.marquee-dot { color: var(--cy); font-size: 0.62em; }

/* ---------- 9. SECTION HEAD ---------- */
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); position: relative; z-index: 2; }
.section-head--split { display: grid; gap: var(--s-3); align-items: end; }
.section-head .h2 { margin-bottom: var(--s-2); }
.section-head--center { text-align: center; }
.section-head--center .lead { margin-inline: auto; }

/* ---------- 10. CARDS & GRIDS ---------- */
.grid { display: grid; gap: var(--s-3); position: relative; z-index: 2; }
.grid-2, .grid-3 { grid-template-columns: 1fr; }
/* .grid-4 contiene solo foto. A una colonna sul telefono diventava una sfilata
   di immagini a tutta larghezza una dietro l'altra: due colonne la trasformano
   in un mosaico e tagliano ~1300px di scroll per pagina. */
.grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }

.card {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
  transition: border-color var(--dur) linear, transform 500ms var(--ease-out), background var(--dur) linear;
}
.card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cy-line), transparent);
  opacity: 0; transition: opacity 400ms linear;
}
.card:hover { border-color: var(--line); background: var(--ink-3); transform: translateY(-3px); }
.card:hover::before { opacity: 1; }
.card .idx {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  color: var(--cy);
  display: block;
  margin-bottom: var(--s-2);
}
.card .h3 { margin-bottom: 0.7rem; }
.card p { color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.62; }

.frame { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--ink-2); }
.frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* per-photo crop: set --zoom / --focus inline on the <figure> */
  object-position: var(--focus, 50% 50%);
  transform: scale(var(--zoom, 1));
  filter: saturate(0.78) contrast(1.05);
  transition: transform 900ms var(--ease-out), filter 600ms linear;
}
.frame--hover:hover img {
  transform: scale(calc(var(--zoom, 1) * 1.045));
  filter: saturate(0.92) contrast(1.02);
}
/* Parallax images are oversized so the shift never exposes the frame edge */
.frame > img[data-parallax] { height: 118%; margin-top: -9%; }
.frame--hover:hover img[data-parallax] { transform: none; }
.frame::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line-soft);
  border-radius: inherit; pointer-events: none;
}
.ar-4-5 { aspect-ratio: 4/5; } .ar-3-4 { aspect-ratio: 3/4; }
.ar-1-1 { aspect-ratio: 1/1; } .ar-3-2 { aspect-ratio: 3/2; }
.ar-16-9 { aspect-ratio: 16/9; } .ar-21-9 { aspect-ratio: 16/9; }

.caption {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 0.8rem;
}

/* ---------- 11. SPLIT ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; position: relative; z-index: 2; }
/* Grid children default to min-width:auto, so one wide child can blow out a
   column. Zero it so the fr ratios always hold. */
.split > * { min-width: 0; }
.split-media .frame { will-change: transform; }

/* ---------- 12. PILLARS ---------- */
.pillar {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 0.4rem 2rem;
}
.pillar:last-child { border-bottom: 1px solid var(--line-soft); }
.pillar-n {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em; color: var(--cy); padding-top: 0.4rem;
}
.pillar-t {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 700; font-stretch: 90%;
  letter-spacing: -0.03em; line-height: 1.06;
  text-transform: uppercase;
}
.pillar p { color: var(--fg-2); font-size: var(--fs-sm); max-width: 50ch; }

/* ---------- 13. TIMELINE ---------- */
.timeline { position: relative; padding-left: 1.75rem; z-index: 2; }
.timeline::before {
  content: '';
  position: absolute; left: 3px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, var(--cy-line), var(--line-soft) 45%, transparent);
}
.tl-item { position: relative; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: '';
  position: absolute; left: -1.75rem; top: 0.6rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cy);
  box-shadow: 0 0 0 4px rgba(34,211,238,0.14);
}
.tl-year {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cy); display: block; margin-bottom: 0.55rem;
}
.tl-item .h3 { margin-bottom: 0.6rem; }
.tl-item p { color: var(--fg-2); max-width: 58ch; }
.tl-media { margin-top: var(--s-3); max-width: 460px; }
/* Ritratto decorativo di fianco alla timeline: su desktop accompagna la lettura,
   sul telefono finirebbe da solo in fondo, 471px che non raccontano niente. */
.tl-aside { display: none; }

/* ---------- 14. QUOTE ---------- */
.quote {
  position: relative; z-index: 2;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-block: 1px solid var(--line-soft);
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 4vw, 2.9rem);
  font-weight: 300; font-stretch: 108%;
  line-height: 1.12; letter-spacing: -0.02em;
  max-width: 24ch; text-wrap: balance;
}
.quote blockquote b { font-weight: 700; color: var(--cy); }
/* Quote sitting inside a split — the rules belong to the section, not the quote */
.quote--plain { border: 0; padding-block: 0; }
.quote cite {
  display: block; margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.68rem; font-style: normal;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3);
}

/* ---------- 15. STATS ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); position: relative; z-index: 2; }
.stat { border-top: 1px solid var(--line-soft); padding-top: var(--s-2); }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  font-weight: 800; font-stretch: 84%;
  letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block; margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-3); line-height: 1.55;
}

/* ---------- 16. CHECK LISTS ---------- */
.checks li {
  display: flex; gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.55;
}
.checks li:last-child { border-bottom: 0; }
.checks svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--cy); }
.checks b { color: var(--fg); font-weight: 550; }
.checks--no svg { color: var(--fg-3); }

/* ---------- 17. ACCORDION ---------- */
.acc-item { border-bottom: 1px solid var(--line-soft); }
.acc-item:first-child { border-top: 1px solid var(--line-soft); }
.acc-btn {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3); padding: 1.4rem 0; text-align: left;
  font-size: 1.05rem; font-weight: 500; line-height: 1.4;
  letter-spacing: -0.015em; min-height: 56px;
  transition: color var(--dur-fast) linear;
}
.acc-btn:hover { color: var(--cy); }
.acc-ico { position: relative; flex: none; width: 22px; height: 22px; margin-top: 3px; }
.acc-ico::before, .acc-ico::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 13px; height: 1.5px; background: var(--cy);
  transform: translate(-50%,-50%);
  transition: transform 420ms var(--ease-out);
}
.acc-ico::after { transform: translate(-50%,-50%) rotate(90deg); }
.acc-btn[aria-expanded='true'] .acc-ico::after { transform: translate(-50%,-50%) rotate(0deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 480ms var(--ease-io); }
.acc-panel > div { overflow: hidden; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel p { color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.65; max-width: 62ch; padding-bottom: 1.5rem; }

/* ============================================================
   18. SHELF — horizontal media browser
   ============================================================ */
.shelf-wrap { position: relative; z-index: 2; }

.shelf-tabs {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.shelf-tab {
  padding: 0.7rem 1.15rem;
  min-height: 46px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-right: 1px solid var(--line);
  transition: color var(--dur-fast) linear, background var(--dur-fast) linear;
  white-space: nowrap;
}
.shelf-tab:last-child { border-right: 0; }
.shelf-tab:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
.shelf-tab[aria-selected='true'] { background: var(--fg); color: var(--ink); }

.shelf {
  display: flex;
  align-items: flex-start; /* stop stretch: width + aspect-ratio must drive height */
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: 0.5rem 2rem;
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.shelf::-webkit-scrollbar { display: none; }
.shelf.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.shelf.is-dragging * { pointer-events: none; }

/* Spine — the VHS-shelf item */
.spine {
  position: relative;
  flex: 0 0 auto;
  width: clamp(148px, 36vw, 208px);
  aspect-ratio: 2 / 3.35;
  scroll-snap-align: center;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  transition: transform 620ms var(--ease-out), border-color 400ms linear,
              box-shadow 620ms var(--ease-out), width 620ms var(--ease-out);
  transform-origin: bottom center;
  will-change: transform;
}
.spine[hidden] { display: none; }
.spine-media { position: absolute; inset: 0; }
.spine-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* per-card crop: set --zoom / --focus inline on .spine-media when a photo
     needs to sit tighter than a plain cover crop */
  transform: scale(var(--zoom, 1));
  object-position: var(--focus, 50% 50%);
  filter: saturate(0.6) contrast(1.1) brightness(0.55);
  transition: filter 620ms linear, transform 900ms var(--ease-out);
}
.spine::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,9,12,0.28) 0%, rgba(8,9,12,0.55) 46%, rgba(8,9,12,0.94) 100%);
  transition: background 620ms linear;
}
.spine-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1rem 0.95rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.spine-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cy);
  display: flex; align-items: center; gap: 0.45rem;
}
.spine-tag s { color: var(--fg-3); text-decoration: none; }
.spine-t {
  font-family: var(--font-display);
  font-weight: 700; font-stretch: 86%;
  font-size: clamp(0.98rem, 2.4vw, 1.12rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-wrap: balance;
}
.spine-d {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--fg-2);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  transition: max-height 560ms var(--ease-out), opacity 400ms linear;
}
.spine-play {
  position: absolute;
  z-index: 2;
  left: 50%; top: 44%;
  transform: translate(-50%, -50%) scale(0.86);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--cy-line);
  background: rgba(8,9,12,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 400ms linear, transform 560ms var(--ease-out), background var(--dur) linear;
}
.spine-play svg { width: 17px; height: 17px; color: var(--cy); margin-left: 2px; transition: color var(--dur) linear; }

.spine.is-active,
.shelf:not(.is-dragging) .spine:hover {
  border-color: var(--cy-line);
  transform: translateY(-10px);
  box-shadow: 0 26px 60px -20px rgba(0,0,0,0.9), 0 0 0 1px var(--cy-soft);
}
.spine.is-active .spine-media img,
.shelf:not(.is-dragging) .spine:hover .spine-media img { filter: saturate(0.9) contrast(1.05) brightness(0.72); }
.spine.is-active::after,
.shelf:not(.is-dragging) .spine:hover::after {
  background: linear-gradient(180deg, rgba(8,9,12,0.14) 0%, rgba(8,9,12,0.48) 44%, rgba(8,9,12,0.96) 100%);
}
.spine.is-active .spine-d,
.shelf:not(.is-dragging) .spine:hover .spine-d { max-height: 4.4em; opacity: 1; }
.spine.is-active .spine-play,
.shelf:not(.is-dragging) .spine:hover .spine-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.spine.is-active .spine-play { background: var(--cy); }
.spine.is-active .spine-play svg { color: var(--cy-ink); }

.spine--soon { opacity: 0.62; }
.spine--soon .spine-media img { filter: grayscale(1) brightness(0.45); }
.spine--soon .spine-play { display: none; }

.shelf-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-top: var(--s-2);
}
.shelf-arrows { display: flex; gap: 0.5rem; }
.shelf-arrow {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--fg-2);
  transition: color var(--dur-fast) linear, border-color var(--dur-fast) linear,
              background var(--dur-fast) linear;
}
.shelf-arrow:hover:not(:disabled) { color: var(--cy); border-color: var(--cy-line); background: var(--cy-soft); }
.shelf-arrow:disabled { opacity: 0.3; cursor: default; }
.shelf-arrow svg { width: 17px; height: 17px; }
.shelf-hint {
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fg-3);
}

/* Video lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(4,5,7,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center;
  padding: var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity 400ms linear, visibility 400ms linear;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-inner {
  width: min(1120px, 100%);
  transform: scale(0.97) translateY(12px);
  transition: transform 520ms var(--ease-out);
}
.lightbox.is-open .lightbox-inner { transform: none; }
.lightbox video, .lightbox iframe {
  width: 100%; aspect-ratio: 16/9;
  background: #000; border: 1px solid var(--line); border-radius: var(--r-md);
}
.lightbox-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-2);
}
.lightbox-close {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r);
  color: var(--fg-2);
  transition: color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.lightbox-close:hover { color: var(--cy); border-color: var(--cy-line); }
.lightbox-close svg { width: 17px; height: 17px; }
.lightbox-note {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3);
}

/* ---------- 19. CTA BAND ---------- */
.cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--line-soft); }
.cta-inner { position: relative; z-index: 2; text-align: center; }
.cta-inner .h1 { margin-bottom: var(--s-3); }
.cta-inner .lead { margin-inline: auto; margin-bottom: var(--s-4); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.cta-promise {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3); line-height: 2;
}

/* ---------- 20. FOOTER ---------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  position: relative; overflow: hidden;
}
.foot-grid { display: grid; gap: var(--s-4); position: relative; z-index: 2; }
.foot-sig {
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 84%;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: -0.035em; line-height: 1.02;
  max-width: 14ch;
}
.foot-sig em { font-style: normal; color: var(--cy); }
.foot-h {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: var(--s-2);
}
.foot-list li { padding: 0.2rem 0; }
.foot-list a {
  color: var(--fg-2); font-size: var(--fs-sm);
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px;
  min-width: 44px;   /* parole corte tipo "Home" restavano a 41px */
  transition: color var(--dur-fast) linear;
}
.foot-list a:hover { color: var(--cy); }
.foot-bottom {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap;
  gap: 0.75rem var(--s-3); justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3);
  position: relative; z-index: 2;
}
.socials { display: flex; gap: 0.5rem; }
.socials a {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  color: var(--fg-2);
  transition: color var(--dur-fast) linear, border-color var(--dur-fast) linear, transform var(--dur) var(--ease-out);
}
.socials a:hover { color: var(--cy); border-color: var(--cy-line); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }

/* ---------- 21. MOBILE STICKY CTA ---------- */
.mobile-cta {
  position: fixed;
  left: var(--s-2); right: var(--s-2);
  bottom: calc(var(--s-2) + env(safe-area-inset-bottom));
  z-index: 180;
  transform: translateY(calc(100% + 2rem));
  transition: transform 520ms var(--ease-out);
  box-shadow: 0 18px 50px -12px rgba(0,0,0,0.85);
}
.mobile-cta.is-in { transform: translateY(0); }
.is-menu-open .mobile-cta,
.is-lightbox-open .mobile-cta { transform: translateY(calc(100% + 2rem)); }

/* ---------- 22. (page transition removed — see main.js §11) ---------- */

/* ---------- 23. REVEAL (JS-gated) ---------- */
.js [data-reveal] { opacity: 0; }
/* 14px, non 26: la salita si deve percepire, non guardare */
.js [data-reveal='up'] { transform: translateY(14px); }

/* ---------- 24. UTILITIES ---------- */
.stack > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.center { text-align: center; }
.rel { position: relative; z-index: 2; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tag {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--cy-line);
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: 0.63rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cy);
  background: var(--cy-soft);
}
.tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--cy); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ============================================================
   25. BREAKPOINTS
   ============================================================ */
@media (min-width: 600px) {
  .rail { display: grid; }
  .grid-4 { gap: var(--s-3); }
  .grid-2, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .pillar { grid-template-columns: auto 1fr; }
  .pillar-t, .pillar p { grid-column: 2; }
}

@media (min-width: 860px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide { grid-template-columns: 1.15fr 0.85fr; }
  .split--narrow { grid-template-columns: 0.85fr 1.15fr; }
  .section-head--split { grid-template-columns: 1.3fr 1fr; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
  .tl-aside { display: block; }
  .timeline { padding-left: 2.5rem; }
  .tl-item::before { left: -2.5rem; }
  .ar-21-9 { aspect-ratio: 21/9; }
  .pillar { grid-template-columns: 5rem 1fr 1.05fr; align-items: start; }
  .pillar-t { grid-column: 2; }
  .pillar p { grid-column: 3; padding-top: 0.3rem; }
  .hero-body { grid-template-columns: 1.55fr 0.45fr; gap: var(--s-5); align-items: start; }
  .rail { padding-top: clamp(3rem, 7vh, 5.5rem); }
  .spine { width: clamp(180px, 17vw, 236px); }
  .vlabel { display: block; }
  .section .wrap, .page-hero .wrap { padding-left: max(var(--gutter), 4.5rem); }
}

@media (min-width: 1040px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .menu-btn { display: none; }
  .mobile-cta { display: none; }
}

/* ============================================================
   26. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .orb, .hero-glow, .tag i { animation: none; }
  .marquee-track { transform: none !important; }
  .shelf { scroll-behavior: auto; }
}

/* ---------- 27. NO-JS ---------- */
.no-js .menu-overlay { display: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
.no-js .spine-d { max-height: 4.4em; opacity: 1; }