:root {
  --black: #0a0a0a;
  --black-soft: #141412;
  --cream: #f5f1e8;
  --cream-soft: #ede8db;
  --white: #ffffff;
  --pink: #ff5fa0;
  --pink-deep: #d8417f;
  --brand-red: #e53412;     /* official Seltz red — used only for the logo dot */
  --green: #2d4a3d;
  --green-deep: #1f3528;
  --blue: #1f3a5c;
  --blue-deep: #142a44;
  --red: #c53020;
  --red-deep: #8a1d12;
  --ochre: #c8782a;
  --ochre-deep: #8a4f18;
  --plum: #5a2848;
  --plum-deep: #3a1530;
  --ink-mute: #8a8273;
  --hairline: rgba(245, 241, 232, 0.14);
  --hairline-dark: rgba(10, 10, 10, 0.14);

  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --side: clamp(1.4rem, 5vw, 4rem);
  --max: 1800px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-cinema: cubic-bezier(0.77, 0, 0.175, 1);
}

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

html, body {
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" 1, "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}
html { overflow-x: clip; }
body { overflow-x: clip; min-height: 100vh; }
@supports not (overflow-x: clip) { body, html { overflow-x: hidden; } }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; border: 0; background: 0; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--pink); color: var(--black); }

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

/* ============================================================
   STATUS DOT — official Seltz "punto" with idle float + pulse glow
   ============================================================ */
.status-dot {
  position: fixed; top: 1.6rem; right: 1.8rem;
  width: 32px; height: 30px;
  z-index: 200;
  filter: drop-shadow(0 0 14px rgba(229, 52, 18, 0.55));
  animation: dotFloat 5s ease-in-out infinite, dotGlow 2.4s ease-in-out infinite;
  will-change: transform, filter;
}
.status-dot img { width: 100%; height: 100%; display: block; }
@keyframes dotFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(-2px, -3px) rotate(-3deg); }
  50%      { transform: translate(2px, -1px) rotate(2deg); }
  75%      { transform: translate(-1px, 2px) rotate(-1deg); }
}
@keyframes dotGlow {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(229, 52, 18, 0.55)); }
  50%      { filter: drop-shadow(0 0 32px rgba(229, 52, 18, 0.95)); }
}
@media (max-width: 700px) { .status-dot { top: 1.05rem; right: 1rem; width: 28px; height: 26px; } }
@media (max-width: 480px) { .status-dot { width: 24px; height: 22px; } }

/* ============================================================
   HEADER — sticky, logo center appears on scroll
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.6rem var(--side);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  pointer-events: none;
  transition: background 0.5s var(--ease-out), border-color 0.5s, padding 0.5s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: var(--black);
  border-bottom-color: var(--hairline);
  padding: 1rem var(--side);
}
.nav.on-light.scrolled { background: var(--cream); border-bottom-color: var(--hairline-dark); }
.nav > * { pointer-events: auto; }
.nav-left, .nav-right {
  display: flex; gap: 1.6rem;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.nav-right { justify-content: flex-end; }
.nav a {
  color: inherit;
  position: relative;
  padding: 0.3rem 0;
  transition: opacity 0.3s;
}
.nav a:hover { opacity: 0.6; }
.nav a.active { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.nav-center {
  display: inline-flex; align-items: center;
  height: 32px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), height 0.4s var(--ease-out);
}
.nav.scrolled .nav-center { height: 26px; }
/* NAV-FIX: logo center visibile SUBITO (no scroll) in tutte le pagine tranne la home.
   WP aggiunge body.home solo su front-page; tutto il resto vede il logo a top. */
body:not(.home) .nav-center { opacity: 1; transform: translateY(0); }
@media (max-width: 1024px) {
  .nav-center { height: 28px; opacity: 1; transform: none; }
  .nav.scrolled .nav-center { height: 24px; }
}
@media (max-width: 480px) {
  .nav-center { height: 24px; }
}
.nav-center img {
  height: 100%; width: auto; display: block;
  pointer-events: none;
}
.nav-center .logo-light { display: block; }
.nav-center .logo-dark { display: none; }
.nav.on-light .nav-center .logo-light { display: none; }
.nav.on-light .nav-center .logo-dark { display: block; }
.nav.scrolled .nav-center { opacity: 1; transform: translateY(0); }
.nav.on-light { color: var(--black); }
/* NAV-FIX: sync nav sub-elements color when over light/cream section */
.nav.on-light a { color: var(--black); }
.nav.on-light .nav-search { color: var(--black); border-color: rgba(10,10,10,0.2); background: transparent; }
.nav.on-light .nav-search:hover { color: var(--black); border-color: rgba(10,10,10,0.5); background: rgba(10,10,10,0.04); }
.nav.on-light .nav-search kbd { background: rgba(10,10,10,0.05); color: var(--black); border-color: rgba(10,10,10,0.15); }
.nav.on-light .seltz-newsletter,
.nav.on-light .nav .seltz-newsletter,
.seltz-nav.on-light .seltz-newsletter { border-color: rgba(10,10,10,0.4); color: var(--black); }
/* NAV-FIX: status-dot on-light — softer red glow, less intense on cream */
.status-dot.on-light { filter: drop-shadow(0 0 10px rgba(229, 52, 18, 0.45)); }
@keyframes dotGlowLight {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(229, 52, 18, 0.4)); }
  50%      { filter: drop-shadow(0 0 22px rgba(229, 52, 18, 0.7)); }
}
.status-dot.on-light { animation: dotFloat 5s ease-in-out infinite, dotGlowLight 2.4s ease-in-out infinite; }
@media (max-width: 800px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-left { display: none; }
}

/* ============================================================
   HERO — massive logotype like il Nemico
   ============================================================ */
.hero {
  min-height: 100vh;
  background: var(--black);
  color: var(--cream);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 8rem var(--side) 4rem;
  position: relative;
  overflow: hidden;
}
.hero-mark {
  width: 100%;
  max-width: 1400px;
  display: block;
  position: relative;
  z-index: 2;
}
.hero-mark svg {
  width: 100%; height: auto; display: block;
  overflow: visible;
}
.hero-mark path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.hero-mark .l-s, .hero-mark .l-e,
.hero-mark .l-l, .hero-mark .l-t, .hero-mark .l-z {
  fill: var(--cream);
  transform: translateY(140%);
  opacity: 0;
  animation: heroLetterUp 1.3s var(--ease-cinema) forwards;
}
.hero-mark .l-s { animation-delay: 0.10s; }
.hero-mark .l-e { animation-delay: 0.20s; }
.hero-mark .l-l { animation-delay: 0.30s; }
.hero-mark .l-t { animation-delay: 0.40s; }
.hero-mark .l-z { animation-delay: 0.50s; }
.hero-mark .l-dot {
  fill: var(--brand-red);
  transform: translate(0, -200%) scale(0);
  opacity: 0;
  animation: heroDotIn 0.95s var(--ease-cinema) 0.95s forwards,
             heroDotIdle 6s ease-in-out 2s infinite;
}
@keyframes heroLetterUp {
  0%   { transform: translateY(140%); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes heroDotIn {
  0%   { transform: translate(0, -200%) scale(0); opacity: 0; }
  55%  { transform: translate(0, 0) scale(1.25); opacity: 1; }
  75%  { transform: translate(0, 0) scale(0.92); }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes heroDotIdle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(-3%, -6%) rotate(-3deg); }
  50%      { transform: translate(2%, -2%) rotate(2deg); }
  75%      { transform: translate(-1%, 4%) rotate(-1deg); }
}

.hero-tagline {
  margin-top: clamp(2rem, 5vh, 3.6rem);
  font-family: var(--font-ui);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cream);
  opacity: 0;
  position: relative; z-index: 2;
  animation: fadeUp 1.2s var(--ease-out) 0.9s forwards;
}
.hero-tagline span { color: var(--pink); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
   HERO BUBBLES — carbonated drink rising effect
   ============================================================ */
.hero-bubbles {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.bubble {
  position: absolute;
  bottom: -120px;
  left: var(--x, 50%);
  width: var(--size, 80px);
  aspect-ratio: 214.65 / 92.45;
  opacity: var(--opa, 0.55);
  animation: bubbleRise var(--dur, 14s) linear var(--delay, 0s) infinite;
  will-change: transform;
  filter: drop-shadow(0 1px 4px rgba(255, 255, 255, 0.04));
}
.bubble-push {
  width: 100%; height: 100%;
  display: block;
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.bubble img {
  width: 100%; height: 100%; display: block;
  user-select: none; -webkit-user-drag: none;
}
@keyframes bubbleRise {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--r0, 0deg)); }
  20%  { transform: translate3d(var(--swayA, 30px), -22vh, 0) rotate(calc(var(--r0, 0deg) + 14deg)); }
  40%  { transform: translate3d(var(--swayB, -25px), -45vh, 0) rotate(calc(var(--r0, 0deg) - 7deg)); }
  60%  { transform: translate3d(var(--swayC, 20px), -68vh, 0) rotate(calc(var(--r0, 0deg) + 22deg)); }
  80%  { transform: translate3d(var(--swayD, -18px), -90vh, 0) rotate(calc(var(--r0, 0deg) - 5deg)); }
  100% { transform: translate3d(0, -120vh, 0) rotate(calc(var(--r0, 0deg) + 12deg)); }
}

.hero-meta {
  position: absolute; bottom: 2rem; left: var(--side); right: var(--side);
  z-index: 2;
  display: flex; justify-content: space-between; align-items: end;
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream);
  opacity: 0.7;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-out) 1.2s forwards;
}
.hero-meta-issue::before {
  content: ''; display: inline-block; width: 22px; height: 1px;
  background: var(--pink); vertical-align: middle; margin-right: 0.6rem;
}
.hero-scroll {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
  animation: scrollFloat 2.4s ease-in-out 2s infinite;
}
.hero-scroll::after {
  content: ''; width: 1px; height: 24px;
  background: linear-gradient(to bottom, var(--cream), transparent);
}
@keyframes scrollFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ============================================================
   QUOTE BLOCK — full viewport pull quote (il Nemico-style)
   ============================================================ */
.quote-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 6rem var(--side);
  position: relative;
}
.quote-screen.dark { background: var(--black); color: var(--cream); border-top: 1px solid var(--hairline); }
.quote-screen.light { background: var(--cream); color: var(--black); border-top: 1px solid var(--hairline-dark); }
.quote-screen.pink { background: var(--pink); color: var(--black); }

.quote-text {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(2rem, 5.6vw, 5.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 1500px;
  text-align: center;
}
.quote-text em {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-weight: 400;
  color: var(--pink);
}
.quote-screen.pink .quote-text em { color: var(--black); font-weight: 700; }
.quote-screen.light .quote-text em { color: var(--red); }
.quote-attr {
  position: absolute; bottom: 2rem; left: var(--side);
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.55;
}
.quote-attr::before { content: '— '; opacity: 0.6; margin-right: 0.2rem; }

/* word reveal */
.quote-text .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.quote-text.in .w { opacity: 1; transform: translateY(0); }

/* ============================================================
   MARQUEE — scrolling text strip
   ============================================================ */
.marquee {
  background: var(--cream);
  color: var(--pink);
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  overflow: hidden;
  padding: 1.4rem 0;
}
.marquee.dark { background: var(--black); color: var(--pink); border-color: var(--hairline); }
.marquee.bw { background: var(--cream); color: var(--black); }
.marquee-track {
  display: flex; gap: 2.4rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.012em;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  will-change: transform;
}
.marquee-track > span { padding-right: 2.4rem; }
.marquee-track > span::after {
  content: '✱'; margin-left: 2.4rem;
  font-family: var(--font-ui); font-style: normal;
  vertical-align: middle;
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ============================================================
   DUO BLOCKS — 2-col cinematic blocks (like Bestiario)
   ============================================================ */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 90vh;
}
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } }

/* Single featured-post variant: full-bleed singolo blocco */
.duo--single { grid-template-columns: 1fr; min-height: 80vh; }
.duo--single .duo-block { min-height: 70vh; padding: clamp(3rem, 10vh, 8rem) clamp(2rem, 6vw, 6rem); }
.duo--single .duo-block-content { max-width: 820px; }
.duo--single .duo-headline { font-size: clamp(2.4rem, 6vw, 6rem); }
.duo--single .duo-deck { font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 620px; }
.duo--single .duo-corner-num {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  opacity: 0.6;
  top: 1.6rem; left: clamp(2rem, 6vw, 6rem);
}

.duo-block {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 6vh, 5rem) clamp(2rem, 4vw, 4rem);
  overflow: hidden;
  cursor: pointer;
  min-height: 60vh;
}
.duo-block.plum  { background: var(--plum); color: var(--cream); }
.duo-block.cream { background: var(--cream); color: var(--black); }
.duo-block.green { background: var(--green); color: var(--cream); }
.duo-block.blue  { background: var(--blue); color: var(--cream); }
.duo-block.red   { background: var(--red); color: var(--cream); }
.duo-block.ochre { background: var(--ochre); color: var(--black); }
.duo-block-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.55; mix-blend-mode: multiply;
  transition: transform 1.6s var(--ease-out), opacity 0.6s ease;
  transform: scale(1.04);
  will-change: transform;
}
.duo-block:hover .duo-block-bg { transform: scale(1.1); opacity: 0.75; }
.duo-block-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  gap: 1.2rem;
  max-width: 600px;
}
.duo-tag {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.85;
}
.duo-headline {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 4.4rem);
  line-height: 0.96;
  letter-spacing: -0.022em;
}
.duo-headline em {
  font-style: italic; font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.duo-deck {
  font-family: var(--font-ui);
  font-size: 0.96rem; line-height: 1.55;
  opacity: 0.85;
  max-width: 460px;
}
.duo-cta {
  margin-top: 0.6rem;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  transition: gap 0.4s;
}
.duo-block:hover .duo-cta { gap: 1rem; }
.duo-corner-num {
  position: absolute; top: 1.6rem; left: 2rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1;
  opacity: 0.45;
  letter-spacing: -0.02em;
}

/* ============================================================
   STORY BLOCKS — full-bleed colored sections, 1 per article
   ============================================================ */
.story-block {
  position: relative;
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(4rem, 9vh, 7rem) var(--side);
  overflow: hidden;
}
.story-block.reverse { grid-template-columns: 1fr 1.1fr; }
.story-block.reverse .story-block-text { order: 2; }
.story-block.reverse .story-block-art { order: 1; }
@media (max-width: 900px) {
  .story-block, .story-block.reverse { grid-template-columns: 1fr; gap: 2.4rem; }
  .story-block.reverse .story-block-text,
  .story-block.reverse .story-block-art { order: 0; }
}

.story-block.green { background: var(--green); color: var(--cream); }
.story-block.blue  { background: var(--blue); color: var(--cream); }
.story-block.red   { background: var(--red); color: var(--cream); }
.story-block.ochre { background: var(--ochre); color: var(--black); }
.story-block.plum  { background: var(--plum); color: var(--cream); }
.story-block.cream { background: var(--cream); color: var(--black); }

.story-block-art {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: rgba(0,0,0,0.2);
}
.story-block-art-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04);
  transition: transform 1.6s var(--ease-out);
  will-change: transform;
}
.story-block:hover .story-block-art-img { transform: scale(1.1); }
.story-block-art::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity: 0.07; mix-blend-mode: overlay;
}
.story-block-art-num {
  position: absolute; top: 1.4rem; right: 1.6rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  line-height: 1; letter-spacing: -0.02em;
  color: rgba(245, 241, 232, 0.9);
}
.story-block-text {
  display: flex; flex-direction: column; gap: 1.4rem;
  max-width: 720px;
}
.story-block-meta {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; gap: 0.7rem; align-items: center;
  flex-wrap: wrap;
  opacity: 0.85;
}
.story-block-meta-tag {
  padding: 0.4rem 0.7rem;
  background: currentColor;
  display: inline-block;
}
.story-block-meta-tag span { color: var(--black); display: inline-block; }
.story-block.green .story-block-meta-tag span,
.story-block.blue .story-block-meta-tag span,
.story-block.red .story-block-meta-tag span,
.story-block.plum .story-block-meta-tag span { color: var(--black); }
.story-block.ochre .story-block-meta-tag,
.story-block.cream .story-block-meta-tag { background: var(--black); }
.story-block.ochre .story-block-meta-tag span,
.story-block.cream .story-block-meta-tag span { color: var(--cream); }

.dot { display: inline-block; width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: 0.6; }
.story-block-headline {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
  font-weight: 700;
  font-size: clamp(2.2rem, 5.4vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.024em;
}
.story-block-headline em {
  font-style: italic; font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.story-block-deck {
  font-family: var(--font-ui);
  font-size: 1.02rem; line-height: 1.58;
  opacity: 0.85;
  max-width: 540px;
}
.story-block-author {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 0.8rem;
  font-family: var(--font-ui);
  font-size: 12px;
  opacity: 0.85;
}
.story-block-author b { font-weight: 600; opacity: 1; }
.story-block-cta {
  margin-top: 0.4rem;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  transition: gap 0.4s;
}
.story-block:hover .story-block-cta { gap: 1rem; }

/* image gradient placeholders (cinematic duotone) */
.art-1 { background-image: linear-gradient(135deg, #1a0a06 0%, #5a1810 50%, #ff5fa0 100%); }
.art-2 { background-image: linear-gradient(160deg, #0f1e2a 0%, #1a3a4a 50%, #4a6878 100%); }
.art-3 { background-image: linear-gradient(135deg, #2a2014 0%, #6b5028 50%, #c8782a 100%); }
.art-4 { background-image: linear-gradient(135deg, #0e1818 0%, #1a3838 50%, #4a7878 100%); }
.art-5 { background-image: linear-gradient(160deg, #1a2818 0%, #2d4a3d 50%, #4a6850 100%); }
.art-6 { background-image: linear-gradient(135deg, #2a1428 0%, #5a2848 50%, #ff5fa0 100%); }
.art-7 { background-image: linear-gradient(135deg, #2a1810 0%, #6b2418 50%, #c53020 100%); }

/* ============================================================
   AUTORI — side scrolling row
   ============================================================ */
.autori {
  background: var(--black);
  color: var(--cream);
  padding: clamp(4rem, 9vh, 7rem) 0 0;
  border-top: 1px solid var(--hairline);
}
.autori-head {
  display: flex; justify-content: space-between; align-items: end;
  flex-wrap: wrap; gap: 1.4rem;
  padding: 0 var(--side);
  margin-bottom: clamp(2rem, 5vh, 4rem);
}
.section-eyebrow {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pink);
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 0.8rem;
}
.section-eyebrow::before {
  content: ''; display: inline-block; width: 30px; height: 1px;
  background: var(--pink);
}
.section-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-weight: 700;
  font-size: clamp(2.4rem, 5.6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.024em;
}
.section-title em { font-style: italic; font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.section-link {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--pink);
  transition: gap 0.4s;
}
.section-link:hover { gap: 0.9rem; color: var(--pink); }

.autori-rail {
  display: flex; gap: 1.4rem;
  padding: 0 var(--side) clamp(4rem, 9vh, 7rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--side);
  scrollbar-width: none;
}
.autori-rail::-webkit-scrollbar { display: none; }
.autore {
  flex: 0 0 clamp(260px, 26vw, 380px);
  display: flex; flex-direction: column; gap: 1rem;
  scroll-snap-align: start;
  cursor: pointer;
}
.autore-art {
  position: relative; aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--black-soft);
}
.autore-art-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(0.7);
  transform: scale(1.04);
  transition: transform 1.4s var(--ease-out), filter 0.6s ease;
}
.autore:hover .autore-art-img { filter: saturate(1.1); transform: scale(1.1); }
.autore-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
}
.autore-name {
  position: absolute; bottom: 1rem; left: 1rem; right: 1rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--cream);
  z-index: 2;
}
.autore-role {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--pink);
}
.autore-bio {
  font-family: var(--font-ui);
  font-size: 0.94rem; line-height: 1.55;
  color: var(--cream);
  opacity: 0.75;
}

/* ============================================================
   ACRONYM REVEAL — what SELTZ stands for (decorated edition)
   ============================================================ */
.acronym {
  background: var(--black);
  color: var(--cream);
  padding: clamp(8rem, 16vh, 12rem) var(--side);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.acronym-eyebrow {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--pink);
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
  opacity: 0;
  transform: translateY(20px);
}
.acronym-eyebrow::before, .acronym-eyebrow::after {
  content: '✱'; margin: 0 0.7rem; opacity: 0.5;
}
.acronym.in .acronym-eyebrow {
  animation: fadeUp 0.8s var(--ease-out) forwards;
}

.acronym-grid {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(1.4rem, 4vw, 4rem);
  flex-wrap: wrap;
  margin-bottom: clamp(3rem, 7vh, 5rem);
  position: relative;
}
.acro-block {
  display: flex; flex-direction: column; align-items: center;
  position: relative;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem);
}
/* Letter rendered as <img> of the brand SVG; filter colors the black source */
.acro-letter {
  display: inline-block;
  height: clamp(4.5rem, 13vw, 11rem);
  width: auto;
  /* black source -> cream/white via brightness(0) invert(1) */
  filter: brightness(0) invert(1);
  transform: translateY(120%);
  opacity: 0;
  position: relative; z-index: 2;
  will-change: transform, opacity;
  -webkit-user-drag: none; user-select: none;
}
.acronym.in .acro-letter {
  animation: heroLetterUp 1s var(--ease-cinema) var(--delay-letter, 0.1s) forwards;
}
.acro-block:nth-child(1) .acro-letter { --delay-letter: 0.10s; }
.acro-block:nth-child(2) .acro-letter { --delay-letter: 0.20s; }
.acro-block:nth-child(3) .acro-letter { --delay-letter: 0.30s; }
.acro-block:nth-child(4) .acro-letter { --delay-letter: 0.40s; }
.acro-block:nth-child(5) .acro-letter {
  --delay-letter: 0.50s;
  /* black source -> brand red #e53412 */
  filter: brightness(0) saturate(100%) invert(31%) sepia(82%) saturate(2840%) hue-rotate(355deg) brightness(95%) contrast(91%);
}

.acro-rest {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: var(--pink);
  margin-top: clamp(0.3rem, 1.2vw, 0.9rem);
  white-space: nowrap;
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  position: relative; z-index: 2;
}
.acronym.in .acro-rest {
  animation: clipReveal 0.7s cubic-bezier(0.65, 0, 0.35, 1) var(--delay-word, 1.4s) forwards;
}
.acro-block:nth-child(1) .acro-rest { --delay-word: 1.40s; }
.acro-block:nth-child(2) .acro-rest { --delay-word: 1.65s; }
.acro-block:nth-child(3) .acro-rest { --delay-word: 1.90s; }
.acro-block:nth-child(4) .acro-rest { --delay-word: 2.20s; }
.acro-block:nth-child(5) .acro-rest { --delay-word: 2.55s; }
@keyframes clipReveal { to { clip-path: inset(0 0 0 0); } }

/* DECOR LAYER — sits behind the letter, above the bg */
.acro-decor {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ============== EYES (S — Sguardi) ============== */
.eye {
  position: absolute;
  width: var(--es, 32px);
  height: calc(var(--es, 32px) * 0.78);
  background: var(--cream);
  border-radius: 50%;
  border: 1.5px solid var(--black);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.3);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.acronym.in .eye {
  animation: eyeIn 0.5s var(--ease-cinema) var(--ed, 2.6s) forwards;
}
@keyframes eyeIn {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: scale(1); }
}
.eye .lid {
  position: absolute; inset: 0;
  background: var(--black);
  transform: scaleY(0); transform-origin: top;
  z-index: 2;
}
.acronym.in .eye .lid {
  animation: lidBlink 5s ease-in-out var(--bd, 0s) infinite;
}
@keyframes lidBlink {
  0%, 92%, 100% { transform: scaleY(0); }
  94%, 96% { transform: scaleY(1); }
}
.eye .pupil {
  width: 50%; height: 65%;
  background: var(--black);
  border-radius: 50%;
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 0.12s linear;
  position: relative;
  z-index: 1;
}
.eye .pupil::after {
  content: ''; position: absolute;
  top: 18%; left: 22%;
  width: 28%; height: 28%;
  background: var(--cream);
  border-radius: 50%;
  opacity: 0.9;
}
.eye.e1 { top: -10%; left: -25%; --es: 38px; --ed: 2.65s; --bd: 0s; }
.eye.e2 { top: -25%; left: 35%; --es: 28px; --ed: 2.75s; --bd: 0.8s; }
.eye.e3 { top: -8%; right: -22%; --es: 34px; --ed: 2.85s; --bd: 1.6s; }
.eye.e4 { top: 45%; left: -38%; --es: 26px; --ed: 2.95s; --bd: 2.3s; }
.eye.e5 { top: 55%; right: -32%; --es: 30px; --ed: 3.05s; --bd: 1.0s; }
.eye.e6 { bottom: -12%; left: 5%; --es: 24px; --ed: 3.15s; --bd: 3.4s; }
.eye.e7 { bottom: 0%; right: 15%; --es: 28px; --ed: 3.25s; --bd: 0.4s; }

/* ============== HEARTS (E — Etici) ============== */
.heart {
  position: absolute;
  width: var(--hs, 24px); height: var(--hs, 24px);
  color: var(--brand-red);
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(229, 52, 18, 0.5));
}
.heart svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.acronym.in .heart {
  animation: heartPop 0.5s var(--ease-cinema) var(--hd, 2.7s) forwards,
             heartPulse 1.4s ease-in-out calc(var(--hd, 2.7s) + 0.5s) infinite;
}
@keyframes heartPop {
  from { opacity: 0; transform: scale(0) rotate(-15deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.heart.h1 { top: -15%; left: -20%; --hs: 22px; --hd: 2.7s; }
.heart.h2 { top: -28%; right: 15%; --hs: 28px; --hd: 2.85s; }
.heart.h3 { top: 30%; right: -28%; --hs: 18px; --hd: 3.0s; }
.heart.h4 { bottom: 0%; left: -28%; --hs: 24px; --hd: 3.15s; }
.heart.h5 { bottom: -10%; right: -10%; --hs: 20px; --hd: 3.3s; }

/* ============== STARS (L — Libere) ============== */
.star {
  position: absolute;
  width: var(--ss, 22px); height: var(--ss, 22px);
  color: var(--pink);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255, 95, 160, 0.6));
}
.star svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.acronym.in .star {
  animation: starIn 0.6s var(--ease-cinema) var(--sd, 2.8s) forwards,
             starTwinkle 2.4s ease-in-out calc(var(--sd, 2.8s) + 0.6s) infinite;
}
@keyframes starIn {
  from { opacity: 0; transform: scale(0) rotate(-180deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0.45; transform: scale(0.85) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(15deg); }
}
.star.st1 { top: -22%; left: -15%; --ss: 22px; --sd: 2.8s; }
.star.st2 { top: -8%; right: -25%; --ss: 26px; --sd: 2.95s; }
.star.st3 { top: 60%; left: -32%; --ss: 18px; --sd: 3.1s; }
.star.st4 { bottom: 5%; right: -12%; --ss: 24px; --sd: 3.25s; }
.star.st5 { bottom: -18%; left: 10%; --ss: 20px; --sd: 3.4s; }

/* ============== WEAVE (T — Trame di) ============== */
.weave {
  position: absolute;
  inset: -15% -25%;
  width: 150%; height: 130%;
  pointer-events: none;
  opacity: 0.55;
}
.weave path {
  stroke: var(--pink);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  stroke-linecap: round;
}
.acronym.in .weave path {
  animation: drawLine 1.6s ease-out var(--ld, 2.7s) forwards;
}
.weave path:nth-child(1) { --ld: 2.7s; }
.weave path:nth-child(2) { --ld: 2.78s; }
.weave path:nth-child(3) { --ld: 2.86s; }
.weave path:nth-child(4) { --ld: 2.94s; }
.weave path:nth-child(5) { --ld: 3.02s; }
.weave path:nth-child(6) { --ld: 3.10s; }
.weave path:nth-child(7) { --ld: 3.18s; }
.weave path:nth-child(8) { --ld: 3.26s; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* ============== ZONE (Z — Zona) ============== */
.zone-circle {
  position: absolute;
  inset: -25%;
  width: 150%; height: 150%;
  opacity: 0;
  pointer-events: none;
}
.zone-circle circle {
  fill: none;
  stroke: var(--pink);
  stroke-width: 1.2;
  stroke-dasharray: 5 7;
}
.acronym.in .zone-circle {
  animation: zoneIn 1s var(--ease-out) 2.85s forwards,
             zoneRotate 22s linear 3.85s infinite;
}
@keyframes zoneIn {
  from { opacity: 0; transform: scale(0.5) rotate(0deg); }
  to { opacity: 0.7; transform: scale(1) rotate(0deg); }
}
@keyframes zoneRotate {
  from { transform: scale(1) rotate(0deg); }
  to { transform: scale(1) rotate(360deg); }
}
.zone-pin {
  position: absolute;
  top: -8%; right: -18%;
  display: inline-flex; align-items: center; gap: 4px;
  opacity: 0;
  transform: translateY(-12px) scale(0.5);
  z-index: 3;
}
.acronym.in .zone-pin {
  animation: pinPop 0.6s var(--ease-cinema) 3.3s forwards;
}
@keyframes pinPop {
  from { opacity: 0; transform: translateY(-12px) scale(0.5); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.zone-pin .pin-mark {
  width: 18px; height: 18px;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.zone-pin .pin-mark svg { width: 100%; height: 100%; fill: var(--brand-red); display: block; }
.zone-label {
  font-family: var(--font-ui);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--black);
  background: var(--cream);
  padding: 3px 7px;
  border-radius: 2px;
  white-space: nowrap;
}
.zone-coords {
  position: absolute;
  bottom: -25%; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 9px; letter-spacing: 0.16em;
  color: var(--pink); opacity: 0;
}
.acronym.in .zone-coords {
  animation: fadeUp 0.8s var(--ease-out) 3.5s forwards;
}

.acronym-tagline {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--cream);
  margin-top: clamp(2rem, 5vh, 3.5rem);
  opacity: 0;
  transform: translateY(20px);
  position: relative; z-index: 2;
}
.acronym-tagline em { color: var(--brand-red); }
.acronym.in .acronym-tagline {
  animation: fadeUp 1s var(--ease-out) 3.6s forwards;
}

@media (max-width: 760px) {
  .acronym { padding: clamp(4rem, 10vh, 7rem) var(--side); text-align: center; }
  .acronym-eyebrow { text-align: center; margin-bottom: clamp(2rem, 5vh, 3rem); }
  /* stack each block vertically — each is a self-contained mini-module
     with its own decor around the letter (like desktop, but in column) */
  .acronym-grid {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(4.5rem, 10vh, 6rem);
    margin: 0 auto clamp(2rem, 5vh, 3rem);
  }
  .acro-block {
    flex-direction: column;
    align-items: center;
    padding: 1rem 1rem 0.4rem;
    gap: 0.4rem;
    width: auto;
    position: relative;
    overflow: visible;
  }
  .acro-decor { display: block; }
  /* shrink all decor primitives — keep ALL of them visible */
  .eye, .heart, .star { transform: scale(0.45); }
  /* EYES — full set of 7. Tight vertical (no overflow) + wide horizontal spread */
  .decor-s .eye.e1 { top: -8%;  left: -38%; }
  .decor-s .eye.e2 { top: -8%;  left: 35%; }
  .decor-s .eye.e3 { top: -4%;  right: -38%; left: auto; }
  .decor-s .eye.e4 { top: 38%;  left: -50%; }
  .decor-s .eye.e5 { top: 42%;  right: -48%; left: auto; }
  .decor-s .eye.e6 { bottom: 0%; left: -32%; top: auto; }
  .decor-s .eye.e7 { bottom: 4%; right: -28%; top: auto; left: auto; }
  /* HEARTS — full set of 5 */
  .decor-e .heart.h1 { top: 0%;  left: -32%; }
  .decor-e .heart.h2 { top: -10%; right: -8%; left: auto; }
  .decor-e .heart.h3 { top: 38%; right: -38%; left: auto; }
  .decor-e .heart.h4 { bottom: 5%; left: -38%; top: auto; }
  .decor-e .heart.h5 { bottom: 0%; right: -22%; left: auto; top: auto; }
  /* STARS — full set of 5 */
  .decor-l .star.st1 { top: -4%;  left: -32%; }
  .decor-l .star.st2 { top: 4%;   right: -38%; left: auto; }
  .decor-l .star.st3 { top: 50%; left: -46%; }
  .decor-l .star.st4 { bottom: 8%; right: -22%; top: auto; left: auto; }
  .decor-l .star.st5 { bottom: 12%; left: -28%; top: auto; }
  /* trama and zone tighter vertically too */
  .decor-t .weave { inset: -10% -25%; }
  .decor-z .zone-circle { inset: -12% -22%; }
  .decor-z .zone-pin { top: -4%; right: -16%; }
  .decor-z .zone-coords { font-size: 8px; bottom: -10%; }
  .decor-t .weave { inset: -18% -25%; opacity: 0.5; }
  .decor-z .zone-circle { inset: -22%; }
  .decor-z .zone-pin { top: -12%; right: -18%; }
  .decor-z .zone-coords { font-size: 8px; bottom: -22%; }
  .acro-letter { height: clamp(4rem, 18vw, 7rem); }
  .acro-rest {
    font-size: clamp(1.1rem, 5vw, 1.6rem);
    margin-top: 0.3rem;
    color: var(--pink);
  }
  .acronym-tagline {
    text-align: center;
    margin-top: clamp(2rem, 5vh, 3rem);
    font-size: clamp(1.4rem, 6.5vw, 2rem);
  }
}

/* ============================================================
   MANIFESTO — long centered text
   ============================================================ */
.manifesto {
  background: var(--cream);
  color: var(--black);
  padding: clamp(6rem, 14vh, 10rem) var(--side);
  border-top: 1px solid var(--hairline-dark);
  position: relative;
  overflow: hidden;
}
.manifesto-bubbles {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.manifesto-inner { max-width: 1000px; margin: 0 auto; position: relative; z-index: 2; }
.manifesto-eyebrow {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--red);
  text-align: center;
  margin-bottom: 2.4rem;
}
.manifesto-eyebrow::before, .manifesto-eyebrow::after {
  content: '✱'; margin: 0 0.7rem; opacity: 0.6;
}
.manifesto-body {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60, "SOFT" 30;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: var(--black);
  text-align: center;
}
.manifesto-body p { margin-bottom: 1.4rem; }
.manifesto-body em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--red);
  position: relative;
  display: inline-block;
}
.manifesto-body em::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--brand-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-cinema);
}
.manifesto.in .manifesto-body em::after {
  transform: scaleX(1);
  transition-delay: var(--ud, 1.2s);
}
.manifesto-body em:nth-of-type(1) { --ud: 1.2s; }
.manifesto-body em:nth-of-type(2) { --ud: 1.5s; }
.manifesto-body em:nth-of-type(3) { --ud: 1.8s; }
.manifesto-body em:nth-of-type(4) { --ud: 2.1s; }
.manifesto-body strong {
  font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
/* word stagger reveal — set on every word span split by JS */
.manifesto-body .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-cinema);
  will-change: opacity, transform;
}
.manifesto.in .manifesto-body .word {
  opacity: 1; transform: translateY(0);
}
/* PAYOFF — final line "non è tavola calda" big and centered */
.manifesto-body p:last-of-type {
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-top: clamp(1.6rem, 4vh, 2.4rem);
  border-top: 1px solid var(--hairline-dark);
}
.manifesto-body p:last-of-type strong {
  display: inline-block;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--black);
  position: relative;
}
.manifesto-body p:last-of-type strong::before,
.manifesto-body p:last-of-type strong::after {
  content: '✱';
  font-style: normal;
  color: var(--brand-red);
  font-size: 0.5em;
  vertical-align: middle;
  display: inline-block;
  opacity: 0;
  transition: opacity 0.5s ease 2.4s, transform 0.6s var(--ease-cinema) 2.4s;
}
.manifesto-body p:last-of-type strong::before {
  margin-right: 0.6em;
  transform: translateX(-10px) rotate(0deg);
}
.manifesto-body p:last-of-type strong::after {
  margin-left: 0.6em;
  transform: translateX(10px) rotate(0deg);
}
.manifesto.in .manifesto-body p:last-of-type strong::before,
.manifesto.in .manifesto-body p:last-of-type strong::after {
  opacity: 1;
  transform: translateX(0) rotate(180deg);
}
.manifesto-sign {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
  margin-top: 3rem;
}
.manifesto-sign span { color: var(--black); font-weight: 600; }

/* ============================================================
   NEWSLETTER — bold cta block
   ============================================================ */
.nl {
  background: var(--green-deep);
  color: var(--cream);
  padding: clamp(5rem, 12vh, 8rem) var(--side);
  position: relative;
  overflow: hidden;
}
.nl-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
  position: relative; z-index: 2;
}
@media (max-width: 800px) { .nl-inner { grid-template-columns: 1fr; align-items: start; gap: 2.4rem; } }
.nl-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-weight: 700;
  font-size: clamp(2.4rem, 5.4vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.024em;
}
.nl-title em {
  font-style: italic; font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--pink);
}
.nl-deck {
  font-family: var(--font-ui);
  font-size: 1.02rem; line-height: 1.55;
  color: var(--cream);
  opacity: 0.85;
  margin-top: 1.2rem;
  max-width: 460px;
}
.nl-form {
  display: flex; flex-direction: column;
  gap: 1.2rem;
  max-width: 540px;
}
.nl-row {
  display: flex; align-items: center;
  border-bottom: 2px solid var(--cream);
  padding-bottom: 0.6rem;
}
.nl-input {
  flex: 1; min-width: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 0.7rem 0;
  outline: none;
  color: var(--cream);
}
.nl-input::placeholder { color: rgba(245, 241, 232, 0.5); }
.nl-button {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  background: var(--cream);
  color: var(--black);
  white-space: nowrap;
  transition: background 0.3s, color 0.3s;
}
.nl-button:hover { background: var(--pink); color: var(--black); }
.nl-stats {
  display: flex; gap: 1.6rem; flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--cream);
  opacity: 0.7;
}
.nl-stats b { font-weight: 700; opacity: 1; }
.nl-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,95,160,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(255,95,160,0.10) 0%, transparent 60%);
  pointer-events: none;
}

/* ============================================================
   FOOTER — minimal nero with massive logotype
   ============================================================ */
.foot {
  background: var(--black);
  color: var(--cream);
  padding: clamp(4rem, 10vh, 7rem) var(--side) clamp(2rem, 4vh, 3rem);
  border-top: 1px solid var(--hairline);
  position: relative; overflow: hidden;
}
.foot-mast {
  display: block;
  width: 100%;
  margin-bottom: 4vh;
  user-select: none;
}
.foot-mast img {
  display: block; width: 100%; height: auto;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-top: 3rem;
  border-top: 1px solid var(--hairline);
}
@media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-block-title {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 1rem;
}
.foot-block p {
  font-family: var(--font-ui);
  font-size: 0.94rem; line-height: 1.6;
  color: var(--cream); opacity: 0.7;
  max-width: 360px;
}
.foot-block ul { list-style: none; }
.foot-block li { margin-bottom: 0.55rem; }
/* UX-FIX: globale | footer link altezza < 36px su mobile (WCAG 2.5.5).
 * Aumentato min-height inline-block + padding verticale per touch target
 * AAA-compliant 44px su mobile. */
.foot-block a {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--cream);
  opacity: 0.75;
  transition: opacity 0.3s, padding-left 0.3s;
  display: inline-block;
  min-height: 24px;
  padding: 4px 0;
  line-height: 1.4;
}
.foot-block a:hover { opacity: 1; color: var(--pink); padding-left: 6px; }
@media (max-width: 700px) {
  /* UX-FIX: globale | mobile touch target — link footer 44px altezza */
  .foot-block li { margin-bottom: 0.85rem; }
  .foot-block a { min-height: 36px; padding: 8px 0; }
}
.foot-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream); opacity: 0.5;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
/* ============================================================
   NAV SEARCH BUTTON (desktop, pill with kbd shortcut)
   ============================================================ */
.nav-search {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  padding: 0.45rem 0.7rem 0.45rem 0.85rem;
  background: transparent;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.nav-search:hover {
  background: var(--bg-2);
  color: var(--ink);
  border-color: var(--ink-2);
}
.nav-search svg { width: 14px; height: 14px; flex-shrink: 0; }
.nav-search span { line-height: 1; }
.nav-search kbd {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  color: var(--ink-mute);
  margin-left: 0.2rem;
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.search-overlay {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.search-overlay.open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}
.search-overlay::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(229, 52, 18, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(255, 95, 160, 0.10) 0%, transparent 60%);
  pointer-events: none;
}
.search-inner {
  position: relative; z-index: 2;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(5rem, 12vh, 9rem) var(--side) clamp(2rem, 5vh, 3.5rem);
  display: flex; flex-direction: column;
  gap: clamp(1.4rem, 3vh, 2.4rem);
}
.search-close {
  position: absolute; top: 1.6rem; right: 1.8rem;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--hairline-2);
  color: var(--cream);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, color 0.3s, border-color 0.3s;
}
.search-close:hover { background: var(--cream); color: var(--black); transform: scale(1.06); border-color: var(--cream); }
.search-close svg { width: 16px; height: 16px; }

.search-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--pink);
  display: flex; align-items: center; gap: 0.7rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease 0.18s, transform 0.6s var(--ease-cinema) 0.18s;
}
.search-overlay.open .search-eyebrow { opacity: 1; transform: translateY(0); }
.search-eyebrow::before {
  content: ''; display: inline-block; width: 28px; height: 1px;
  background: var(--pink);
}

.search-field {
  display: flex; align-items: baseline; gap: 0.8rem;
  position: relative;
  border-bottom: 1.5px solid var(--cream);
  padding-bottom: clamp(0.6rem, 1.5vh, 1rem);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.22s, transform 0.7s var(--ease-cinema) 0.22s;
}
.search-overlay.open .search-field { opacity: 1; transform: translateY(0); }
.search-icon {
  width: clamp(28px, 4vw, 44px); height: clamp(28px, 4vw, 44px);
  flex-shrink: 0;
  color: var(--cream);
  align-self: center;
}
.search-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; }
.search-input {
  flex: 1;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
  font-weight: 600;
  font-size: clamp(2rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cream);
  background: transparent;
  border: 0;
  outline: 0;
  width: 100%;
  caret-color: var(--brand-red);
  padding: 0;
}
.search-input::placeholder {
  color: var(--ink-mute);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-weight: 400;
}
.search-clear {
  align-self: center;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--hairline-2);
  color: var(--cream);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s;
  font-size: 14px;
}
.search-clear.visible { opacity: 1; }
.search-clear:hover { background: var(--cream); color: var(--black); }

.search-meta {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease 0.32s, transform 0.6s var(--ease-cinema) 0.32s;
}
.search-overlay.open .search-meta { opacity: 1; transform: translateY(0); }
.search-meta b { color: var(--cream); font-weight: 600; font-feature-settings: "tnum" 1; }

.search-section-title {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.9rem;
}

.search-tags {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.search-tag {
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cream);
  padding: 0.5rem 0.95rem;
  background: var(--bg-soft, var(--night-2));
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
  opacity: 0;
  transform: translateY(10px);
}
.search-tag:hover {
  background: var(--brand-red);
  color: var(--cream);
  border-color: var(--brand-red);
  transform: translateY(-2px);
}
.search-overlay.open .search-tag {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease var(--td, 0.4s), transform 0.5s var(--ease-cinema) var(--td, 0.4s), background 0.3s, color 0.3s, border-color 0.3s;
}
.search-tag:nth-child(1) { --td: 0.40s; }
.search-tag:nth-child(2) { --td: 0.46s; }
.search-tag:nth-child(3) { --td: 0.52s; }
.search-tag:nth-child(4) { --td: 0.58s; }
.search-tag:nth-child(5) { --td: 0.64s; }
.search-tag:nth-child(6) { --td: 0.70s; }
.search-tag:nth-child(7) { --td: 0.76s; }
.search-tag:nth-child(8) { --td: 0.82s; }

.search-trending {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
@media (max-width: 800px) { .search-trending { grid-template-columns: 1fr; } }
.search-trend-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem;
  background: var(--bg-soft, var(--night-2));
  border: 1px solid var(--hairline-2);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
  opacity: 0;
  transform: translateY(14px);
}
.search-overlay.open .search-trend-card {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.5s ease var(--ttd, 0.55s), transform 0.6s var(--ease-cinema) var(--ttd, 0.55s), background 0.3s, border-color 0.3s, transform 0.3s;
}
.search-trend-card:nth-child(1) { --ttd: 0.55s; }
.search-trend-card:nth-child(2) { --ttd: 0.62s; }
.search-trend-card:nth-child(3) { --ttd: 0.69s; }
.search-trend-card:hover {
  background: var(--bg-3, #2a241a);
  border-color: var(--pink);
  transform: translateY(-3px);
}
.search-trend-thumb {
  width: 56px; height: 56px;
  border-radius: 4px;
  background-size: cover; background-position: center;
  flex-shrink: 0;
}
.search-trend-text { flex: 1; min-width: 0; }
.search-trend-tag {
  font-family: var(--font-ui);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 0.3rem;
}
.search-trend-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--cream);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.8rem;
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-mute);
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}
.search-foot kbd {
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hairline-2);
  border-radius: 4px;
  color: var(--cream);
  margin: 0 0.2rem;
}

@media (max-width: 1024px) {
  .nav-search span, .nav-search kbd { display: none; }
  .nav-search { padding: 0.45rem; width: 36px; height: 36px; justify-content: center; }
  .nav-search svg { width: 16px; height: 16px; }
}
@media (max-width: 700px) {
  .search-close { top: 1rem; right: 1rem; width: 32px; height: 32px; }
  .search-input { font-size: clamp(1.7rem, 8vw, 2.6rem); }
  .search-icon { width: 22px; height: 22px; }
}

/* ============================================================
   HAMBURGER + FULL-SCREEN MENU OVERLAY
   ============================================================ */
body.menu-open { overflow: hidden; }

.hamburger {
  position: fixed;
  top: 1.55rem;
  right: calc(1.8rem + 44px);
  width: 32px; height: 30px;
  z-index: 210;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
@media (max-width: 1024px) {
  .hamburger { display: flex; }
}
.hamburger-line {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--cream);
  transition: transform 0.55s var(--ease-cinema), opacity 0.3s ease, width 0.4s var(--ease-cinema), background 0.3s;
  transform-origin: center;
  border-radius: 1px;
}
.hamburger-line:nth-child(2) { width: 18px; align-self: flex-end; }
.hamburger.on-light .hamburger-line { background: var(--black); }
.hamburger.open .hamburger-line { background: var(--cream); }
.hamburger.open .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); width: 26px; }
.hamburger.open .hamburger-line:nth-child(2) { opacity: 0; width: 0; }
.hamburger.open .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 700px) {
  .hamburger { right: calc(1rem + 38px); top: 1.05rem; width: 28px; height: 26px; }
  .hamburger-line { width: 22px; }
  .hamburger-line:nth-child(2) { width: 16px; }
}
@media (max-width: 480px) {
  .hamburger { right: calc(1rem + 32px); width: 26px; height: 24px; }
}

/* OVERLAY */
.menu-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: var(--black);
  visibility: hidden;
  pointer-events: none;
  --menu-origin-x: calc(100% - 4.6rem);
  --menu-origin-y: 2.55rem;
  clip-path: circle(0% at var(--menu-origin-x) var(--menu-origin-y));
  -webkit-clip-path: circle(0% at var(--menu-origin-x) var(--menu-origin-y));
  transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1),
              -webkit-clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1),
              visibility 0s linear 0.9s;
  overflow: hidden;
}
.menu-overlay.open {
  visibility: visible;
  pointer-events: auto;
  clip-path: circle(170% at var(--menu-origin-x) var(--menu-origin-y));
  -webkit-clip-path: circle(170% at var(--menu-origin-x) var(--menu-origin-y));
  transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1),
              -webkit-clip-path 1s cubic-bezier(0.77, 0, 0.175, 1),
              visibility 0s linear 0s;
}
@media (max-width: 700px) {
  .menu-overlay {
    --menu-origin-x: calc(100% - 3.2rem);
    --menu-origin-y: 1.9rem;
  }
}
@media (max-width: 480px) {
  .menu-overlay {
    --menu-origin-x: calc(100% - 2.8rem);
    --menu-origin-y: 1.85rem;
  }
}
.menu-overlay::before {
  /* subtle brand red glow accent */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(229,52,18,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 0% 100%, rgba(255,95,160,0.10) 0%, transparent 55%);
  pointer-events: none;
}

.menu-inner {
  position: relative; z-index: 2;
  height: 100%;
  padding: clamp(5rem, 10vh, 7rem) var(--side) clamp(2rem, 4vh, 3rem);
  display: flex; flex-direction: column;
}
.menu-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 60, "SOFT" 80, "WONK" 1;
  font-weight: 400;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  letter-spacing: 0.02em;
  color: var(--pink);
  margin-bottom: clamp(2rem, 5vh, 3rem);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease 0.5s, transform 0.6s var(--ease-cinema) 0.5s;
}
.menu-overlay.open .menu-tagline { opacity: 1; transform: translateY(0); }

.menu-list {
  list-style: none;
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: clamp(0.4rem, 1.2vw, 1rem);
}
.menu-item { overflow: hidden; }
.menu-item a {
  display: inline-block;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--cream);
  text-decoration: none;
  position: relative;
  transform: translateY(105%);
  transition: transform 0.7s var(--ease-cinema) 0s, color 0.3s ease;
}
.menu-item a em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--brand-red);
  font-weight: 400;
}
.menu-item a:hover { color: var(--pink); }

.menu-overlay.open .menu-item:nth-child(1) a { transition-delay: 0.30s; transform: translateY(0); }
.menu-overlay.open .menu-item:nth-child(2) a { transition-delay: 0.38s; transform: translateY(0); }
.menu-overlay.open .menu-item:nth-child(3) a { transition-delay: 0.46s; transform: translateY(0); }
.menu-overlay.open .menu-item:nth-child(4) a { transition-delay: 0.54s; transform: translateY(0); }
.menu-overlay.open .menu-item:nth-child(5) a { transition-delay: 0.62s; transform: translateY(0); }
.menu-overlay.open .menu-item:nth-child(6) a { transition-delay: 0.70s; transform: translateY(0); }
.menu-overlay.open .menu-item:nth-child(7) a { transition-delay: 0.78s; transform: translateY(0); }

.menu-item a::after {
  content: ' →';
  display: inline-block;
  margin-left: 0.4rem;
  opacity: 0;
  transform: translateX(-10px);
  color: var(--pink);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.menu-item a:hover::after { opacity: 1; transform: translateX(0); }

.menu-foot {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease 0.85s, transform 0.6s var(--ease-cinema) 0.85s;
}
.menu-overlay.open .menu-foot { opacity: 1; transform: translateY(0); }
.menu-foot a { color: var(--cream); transition: color 0.3s; }
.menu-foot a:hover { color: var(--pink); }
.menu-foot-social { display: flex; gap: 1.4rem; }

/* MENU BUBBLES — riuso di .bubble ma scoped al menu */
.menu-bubbles {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease 0.6s;
}
.menu-overlay.open .menu-bubbles { opacity: 1; }

@media (max-width: 480px) {
  .menu-item a { font-size: clamp(2rem, 12vw, 3.6rem); }
  .menu-foot { font-size: 10px; gap: 0.6rem; }
  .menu-foot-social { gap: 1rem; }
}

/* On tablet/desktop nav: hide standard nav links so hamburger is the only entry */
@media (max-width: 1024px) {
  .nav-left, .nav-right { display: none; }
  .nav { grid-template-columns: 1fr; }
  .nav-center { justify-self: center; }
}

/* ============================================================
   GLOBAL RESPONSIVE FINE-TUNING
   ============================================================ */
@media (max-width: 1024px) {
  .nav { padding: 1.2rem var(--side); }
  .nav.scrolled { padding: 0.8rem var(--side); }
  .nav-center { height: 22px; }
  .story-block { min-height: auto; padding: clamp(3rem, 7vh, 5rem) var(--side); }
  .story-block, .story-block.reverse { gap: 2rem; }
}

@media (max-width: 768px) {
  /* HERO */
  .hero { padding: 6rem var(--side) 3rem; min-height: 88vh; }
  .hero-mark { max-width: 92vw; }
  .hero-tagline { font-size: 0.78rem; letter-spacing: 0.26em; margin-top: 1.6rem; }
  .hero-meta {
    bottom: 1.2rem;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
  }
  .hero-meta-issue { font-size: 10px; }

  /* QUOTE SCREEN */
  .quote-screen { min-height: 70vh; padding: 4rem var(--side); }
  .quote-text { font-size: clamp(1.5rem, 5.6vw, 2.2rem); line-height: 1.18; }
  .quote-attr { left: var(--side); bottom: 1.2rem; font-size: 10px; }

  /* MARQUEE */
  .marquee { padding: 1rem 0; }
  .marquee-track { font-size: clamp(1.8rem, 8vw, 3rem); gap: 1.6rem; }
  .marquee-track > span { padding-right: 1.6rem; }
  .marquee-track > span::after { margin-left: 1.6rem; }

  /* DUO */
  .duo-block { min-height: 48vh; padding: 3rem 1.6rem; }
  .duo-headline { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .duo-corner-num { top: 1rem; left: 1.2rem; font-size: clamp(2rem, 9vw, 3rem); }

  /* STORY BLOCKS */
  .story-block, .story-block.reverse { padding: 3.5rem var(--side); gap: 1.8rem; }
  .story-block-text { gap: 1rem; }
  .story-block-headline { font-size: clamp(1.7rem, 8vw, 2.6rem); line-height: 1; }
  .story-block-art { aspect-ratio: 4/3; }
  .story-block-art-num { font-size: clamp(2rem, 9vw, 3rem); top: 1rem; right: 1.2rem; }

  /* SECTION HEADS */
  .section-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .autori-head, .section-head { gap: 1rem; }

  /* AUTORI rail */
  .autori-rail { padding: 0 var(--side) 4rem; }
  .autore { flex: 0 0 clamp(220px, 78vw, 320px); }

  /* MANIFESTO */
  .manifesto { padding: clamp(4rem, 10vh, 7rem) var(--side); }
  .manifesto-body { font-size: clamp(1.05rem, 4.6vw, 1.3rem); }

  /* NEWSLETTER */
  .nl { padding: clamp(3.5rem, 9vh, 6rem) var(--side); }
  .nl-title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .nl-button { padding: 0.6rem 1rem; font-size: 11px; letter-spacing: 0.16em; }

  /* FOOTER */
  .foot { padding: 4rem var(--side) 2rem; }
  .foot-mast { font-size: clamp(5rem, 32vw, 12rem); margin-bottom: 2vh; }
  .foot-grid { padding-top: 2rem; gap: 2rem; }
}

@media (max-width: 480px) {
  /* HERO */
  .hero { padding: 5rem var(--side) 2.5rem; }
  .hero-tagline { font-size: 0.7rem; letter-spacing: 0.22em; }
  .hero-meta-issue::before { display: none; }
  .hero-scroll::after { height: 18px; }

  /* QUOTE */
  .quote-text { font-size: clamp(1.35rem, 6vw, 1.8rem); }
  .quote-attr { letter-spacing: 0.16em; }

  /* DUO */
  .duo-block { min-height: 44vh; padding: 2.4rem 1.2rem; }
  .duo-deck { font-size: 0.88rem; }

  /* STORY BLOCKS */
  .story-block, .story-block.reverse { padding: 3rem var(--side); gap: 1.4rem; }
  .story-block-headline { font-size: clamp(1.5rem, 8.4vw, 2rem); }
  .story-block-deck { font-size: 0.92rem; }

  /* AUTORI */
  .autore { flex: 0 0 88vw; }

  /* TOPICS list (sezioni list, if present) reduce padding */
  .topics-list .topic { padding-left: 0.8rem; padding-right: 0.8rem; }

  /* NEWSLETTER */
  .nl-row { flex-direction: column; align-items: stretch; gap: 0.8rem; padding-bottom: 0; border-bottom: 0; }
  .nl-input { border-bottom: 1.5px solid var(--cream); padding-bottom: 0.7rem; }
  .nl-button { width: 100%; padding: 0.85rem 1rem; }
  .nl-stats { gap: 1rem; flex-wrap: wrap; font-size: 10px; }

  /* ACRONYM xs tweaks */
  .acro-letter { height: clamp(2.8rem, 14vw, 4rem); }
  .acro-rest { font-size: clamp(0.9rem, 5vw, 1.1rem); }
  .acronym-tagline { font-size: clamp(1.1rem, 6.5vw, 1.6rem); }
  .eye { transform: scale(0.55); }
  .heart { transform: scale(0.6); }
  .star { transform: scale(0.6); }
  .acronym-eyebrow { font-size: 10px; letter-spacing: 0.22em; }
  .acronym-eyebrow::before, .acronym-eyebrow::after { display: none; }

  /* STATUS DOT scaled smaller */
  .status-dot { width: 30px; height: 27px; }

  /* MARQUEE smaller chevrons */
  .marquee-track { font-size: clamp(1.4rem, 9vw, 2.4rem); }

  /* FOOTER mast smaller */
  .foot-mast { font-size: clamp(4rem, 36vw, 9rem); }
  .foot-bottom { font-size: 10px; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
}

/* very small (iphone SE etc.) */
@media (max-width: 360px) {
  :root { --side: 1.1rem; }
  .hero-tagline { letter-spacing: 0.18em; }
  .quote-text { font-size: 1.2rem; }
  .acronym-tagline { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track { animation: none; }
  .hero-mark path { transform: none; opacity: 1; }
  .hero-tagline, .hero-meta { transform: none; opacity: 1; }
  .quote-text .w { opacity: 1; transform: none; }
  .status-dot { animation: none; }
  .bubble { animation: none; opacity: 0; }
  .acro-letter, .acro-rest, .acronym-eyebrow, .acronym-tagline {
    transform: none; opacity: 1; clip-path: inset(0 0 0 0);
  }
}

/* ============================================================
   ARCHIVE PAGE — index storie + category/tag/author
   ============================================================ */
.archive-page { background: var(--black); color: var(--cream); }

.archive-hero {
  padding: clamp(7rem, 18vh, 14rem) var(--side) clamp(4rem, 8vh, 7rem);
  border-bottom: 1px solid var(--hairline);
}
.archive-hero-inner { max-width: 1100px; margin: 0 auto; }

.archive-eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--black);
  background: var(--pink);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 2rem;
}

.archive-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
  font-weight: 700;
  font-size: clamp(4.5rem, 14vw, 14rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin-bottom: 1.4rem;
}
.archive-title-dot { color: var(--brand-red); }

.archive-deck {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  line-height: 1.4;
  color: var(--cream-soft);
  max-width: 820px;
  margin-bottom: clamp(2rem, 4vh, 3.5rem);
}
.archive-deck .hi {
  font-style: italic;
  color: var(--pink);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

.archive-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  padding-top: 2.4rem;
  border-top: 1px solid var(--hairline);
}
@media (max-width: 700px) { .archive-stats { grid-template-columns: 1fr 1fr; } }
.archive-stat {
  display: flex; flex-direction: column; gap: 0.4rem;
}
.archive-stat-num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1;
  color: var(--cream);
}
.archive-stat-label {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
}

.archive-marquee { margin: 0; }

.archive-filters {
  display: flex; flex-wrap: wrap;
  gap: 0.7rem;
  padding: clamp(2rem, 5vh, 3.5rem) var(--side);
  max-width: 1400px;
  margin: 0 auto;
  justify-content: center;
}
.archive-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream); opacity: 0.75;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.3s, color 0.3s, background 0.3s, border-color 0.3s;
}
.archive-pill:hover { opacity: 1; border-color: var(--cream); }
.archive-pill.is-active {
  opacity: 1;
  background: var(--pink);
  border-color: var(--pink);
  color: var(--black);
}

.archive-stories {
  display: flex; flex-direction: column;
}

/* Story-block adapt for archive (uses .story-block-bg invece di .story-block-art) */
.story-block-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.45; mix-blend-mode: multiply;
  transition: transform 1.6s var(--ease-out), opacity 0.6s ease;
  transform: scale(1.04);
  will-change: transform;
}
.archive-stories .story-block { position: relative; min-height: 70vh; padding: clamp(3rem, 8vh, 6rem) var(--side); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.archive-stories .story-block:hover .story-block-bg { transform: scale(1.1); opacity: 0.6; }
.archive-stories .story-block-text { position: relative; z-index: 2; max-width: 820px; }

.archive-pagination {
  padding: clamp(3rem, 6vh, 5rem) var(--side);
  display: flex; justify-content: center;
  font-family: var(--font-ui);
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
}
.archive-pagination .nav-links {
  display: inline-flex; gap: 0.5rem; flex-wrap: wrap;
}
.archive-pagination a, .archive-pagination .current {
  padding: 0.6rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--cream); opacity: 0.75;
  text-decoration: none;
  transition: opacity 0.3s, background 0.3s, color 0.3s;
}
.archive-pagination a:hover { opacity: 1; border-color: var(--cream); }
.archive-pagination .current { background: var(--pink); color: var(--black); border-color: var(--pink); opacity: 1; }

.archive-empty {
  padding: clamp(5rem, 12vh, 10rem) var(--side);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  color: var(--ink-mute);
}

/* HIGHLIGHT — em.hi pink italic wonk */
.hi {
  font-style: italic;
  color: var(--pink);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
/* ============================================================
   SELTZ KIT — design system (importato da home-premium)
   ============================================================ */
@font-face { font-family: __seltz_kit_marker; src: local("Inter"); }

/* GRAIN */
.seltz-grain {
  position: fixed; inset: 0; z-index: 9990;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* STATUS DOT — official Seltz "punto" */
.seltz-dot {
  position: fixed; top: 1.6rem; right: 1.8rem;
  width: 32px; height: 30px;
  z-index: 200;
  filter: drop-shadow(0 0 14px rgba(229, 52, 18, 0.55));
  animation: seltzDotFloat 5s ease-in-out infinite, seltzDotGlow 2.4s ease-in-out infinite;
  will-change: transform, filter;
  pointer-events: none;
}
.seltz-dot img { width: 100%; height: 100%; display: block; }
@keyframes seltzDotFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(-2px, -3px) rotate(-3deg); }
  50%      { transform: translate(2px, -1px) rotate(2deg); }
  75%      { transform: translate(-1px, 2px) rotate(-1deg); }
}
@keyframes seltzDotGlow {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(229, 52, 18, 0.55)); }
  50%      { filter: drop-shadow(0 0 32px rgba(229, 52, 18, 0.95)); }
}
@media (max-width: 700px) { .seltz-dot { top: 1.05rem; right: 1rem; width: 28px; height: 26px; } }
@media (max-width: 480px) { .seltz-dot { width: 24px; height: 22px; } }

/* NAV — sticky, logo center appears on scroll */
.seltz-nav {
  --side: clamp(1.4rem, 5vw, 4rem);
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.6rem var(--side);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  pointer-events: none;
  transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s, padding 0.5s;
  border-bottom: 1px solid transparent;
  font-family: 'Inter', -apple-system, sans-serif;
  color: #f5f1e8;
}
.seltz-nav.scrolled {
  background: #0a0a0a;
  border-bottom-color: rgba(245, 241, 232, 0.14);
  padding: 1rem var(--side);
}
.seltz-nav > * { pointer-events: auto; }
.seltz-nav-left, .seltz-nav-right {
  display: flex; gap: 1.6rem;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.seltz-nav-right { justify-content: flex-end; align-items: center; }
.seltz-nav a {
  color: inherit;
  text-decoration: none;
  position: relative;
  padding: 0.3rem 0;
  transition: opacity 0.3s;
}
.seltz-nav a:hover { opacity: 0.6; }
.seltz-nav a.active { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.seltz-nav-center {
  display: inline-flex; align-items: center;
  height: 32px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), height 0.4s;
}
.seltz-nav.scrolled .seltz-nav-center { height: 26px; opacity: 1; transform: translateY(0); }
@media (max-width: 1024px) { .seltz-nav-center { height: 28px; opacity: 1; transform: none; } }
@media (max-width: 480px) { .seltz-nav-center { height: 24px; } }
.seltz-nav-center img { height: 100%; width: auto; display: block; pointer-events: none; }
.seltz-nav-center .logo-light { display: block; }
.seltz-nav-center .logo-dark { display: none; }
@media (max-width: 800px) {
  .seltz-nav { grid-template-columns: 1fr auto; }
  .seltz-nav-left { display: none; }
}
.seltz-nav .seltz-newsletter {
  border: 1px solid rgba(245, 241, 232, 0.4);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 11px;
  letter-spacing: 0.22em;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.seltz-nav .seltz-newsletter:hover { background: #ff5fa0; border-color: #ff5fa0; color: #0a0a0a; opacity: 1; }

/* MARQUEE TOP STRIP */
.seltz-strip {
  --side: clamp(1.4rem, 5vw, 4rem);
  position: relative;
  margin-top: 88px;
  padding: 0.7rem var(--side);
  background: #0a0a0a;
  border-top: 1px solid rgba(245, 241, 232, 0.14);
  border-bottom: 1px solid rgba(245, 241, 232, 0.14);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ff5fa0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.seltz-strip .seltz-strip-left { color: #f5f1e8; opacity: 0.7; }
.seltz-strip .seltz-strip-right { display: inline-flex; align-items: center; gap: 0.5rem; }
.seltz-strip .seltz-strip-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #e53412;
  animation: seltzDotGlow 2.4s ease-in-out infinite;
}

/* FOOTER */
.seltz-foot {
  --side: clamp(1.4rem, 5vw, 4rem);
  background: #0a0a0a;
  color: #f5f1e8;
  padding: clamp(4rem, 10vh, 7rem) var(--side) clamp(2rem, 4vh, 3rem);
  border-top: 1px solid rgba(245, 241, 232, 0.14);
  position: relative; overflow: hidden;
  font-family: 'Inter', sans-serif;
}
.seltz-foot-mast {
  display: block; width: 100%;
  margin-bottom: 4vh;
  user-select: none;
}
.seltz-foot-mast img { display: block; width: 100%; height: auto; }
.seltz-foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-top: 3rem;
  border-top: 1px solid rgba(245, 241, 232, 0.14);
}
@media (max-width: 700px) { .seltz-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .seltz-foot-grid { grid-template-columns: 1fr; } }
.seltz-foot-title {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #ff5fa0;
  margin-bottom: 1rem;
}
.seltz-foot-block p {
  font-size: 0.94rem; line-height: 1.6;
  opacity: 0.7; max-width: 360px;
  margin: 0;
}
.seltz-foot-block ul { list-style: none; padding: 0; margin: 0; }
.seltz-foot-block li { margin-bottom: 0.55rem; }
.seltz-foot-block a {
  font-size: 13px;
  color: #f5f1e8;
  opacity: 0.75;
  text-decoration: none;
  transition: opacity 0.3s, padding-left 0.3s, color 0.3s;
  display: inline-block;
}
.seltz-foot-block a:hover { opacity: 1; color: #ff5fa0; padding-left: 6px; }
.seltz-foot-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 241, 232, 0.14);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.5;
}

/* ============================================================
   END SELTZ KIT
   ============================================================ */

/* ============================================================
   RWD-FIX BLOCK — Audit responsive 2026-05-07
   Touch targets WCAG 2.5.5 (min 44x44 mobile), search overlay
   scrollability, footer links tap area, CLS via aspect-ratio.
   Tutti i fix sono prefissati con un commento RWD-FIX inline.
   ============================================================ */
@media (max-width: 700px) {
  /* RWD-FIX: mobile/hamburger — enlarge tap target to WCAG 44×44 (was 26×24).
     Visual line widths preserved via inner span; we expand container only. */
  .hamburger {
    width: 44px;
    height: 44px;
    /* recenter to keep visual position roughly identical */
    right: calc(1rem + 30px);
    top: 0.85rem;
  }

  /* RWD-FIX: mobile/status-dot — keep distance from enlarged hamburger so
     they don't overlap (hamburger now 44px wide). */
  .status-dot {
    top: 0.95rem;
    right: 0.6rem;
  }

  /* RWD-FIX: mobile/nav-center — give the centered logo link a 44×44 hit area
     while keeping the visual logo size unchanged. */
  a.nav-center {
    min-height: 44px;
    min-width: 44px;
    padding: 11px 8px;
    box-sizing: border-box;
  }

  /* RWD-FIX: mobile/footer-link — expand tap target without changing the visual
     font size; vertical padding makes each li link 44px tall. */
  .foot-block li {
    margin-bottom: 0.25rem;
  }
  .foot-block a {
    display: inline-block;
    padding: 0.7rem 0;
    line-height: 1.2;
  }
  .foot-bottom {
    gap: 0.6rem 1rem;
  }
  .foot-bottom a {
    display: inline-block;
    padding: 0.4rem 0;
  }

  /* RWD-FIX: mobile/story-block-cta — enlarge tap height of "Continua →" CTAs. */
  .story-block-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0;
  }

  /* RWD-FIX: mobile/section-link — author/section index links need 44px height. */
  .section-link, a.section-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0;
  }
}

@media (max-width: 480px) {
  /* RWD-FIX: mobile-S/hamburger — keep 44×44 tap area on small screens too,
     overrides previous 26×24 size. */
  .hamburger {
    width: 44px;
    height: 44px;
    right: calc(1rem + 30px);
  }
}

/* RWD-FIX: tablet/hamburger — also enlarge on tablet 701-1024 where it
   was 32×30, below WCAG 2.5.5 minimum 44×44. */
@media (min-width: 701px) and (max-width: 1024px) {
  .hamburger {
    width: 44px;
    height: 44px;
    top: 1.1rem;
  }
}

/* RWD-FIX: search-overlay — make scrollable on short mobile viewports so trending
   cards/tags don't get cut off (iOS Safari dynamic toolbar reduces height). */
.search-overlay {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 700px) {
  .search-inner {
    height: auto;
    min-height: 100%;
    padding-bottom: clamp(3rem, 7vh, 4.5rem);
  }
}

/* RWD-FIX: prevent text overflow — long Italian compound words and email/url
   strings can blow past narrow mobile columns. */
@media (max-width: 700px) {
  body, .story-block-text, .foot-block, .nav, .archive-card,
  .page-contatti__card, .page-chi-siamo__card,
  .article-body, .article-longform__body, .article-editorial__body {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* RWD-FIX: image CLS — without width/height attrs on <img>, browsers can't
   reserve space. Set a default aspect-ratio fallback; explicit per-context
   ratios already exist via the surrounding card CSS.
   Esclude logo nav, status-dot e lettere acronimo che hanno altezza ereditata. */
img:not([width]):not([height]):not(.logo-light):not(.logo-dark):not(.acro-letter) {
  height: auto;
  max-width: 100%;
}
/* RWD-FIX restore: protezione esplicita per logo nav e status-dot (ereditano dal padre). */
.nav-center img, .seltz-nav-center img, .status-dot img, .seltz-dot img {
  height: 100%; width: auto; display: block;
}

/* RWD-FIX: flex/grid descendants min-width — guard against intrinsic content
   widths (long words, code, monospace numbers) breaking out of grid cells
   on narrow viewports. */
@media (max-width: 700px) {
  .story-block,
  .foot-grid,
  .page-contatti__form-inner,
  .page-contatti__address,
  .page-chi-siamo__values,
  .page-chi-siamo__team,
  .archive-grid,
  .autori-grid {
    min-width: 0;
  }
  .story-block > *,
  .foot-grid > *,
  .page-contatti__form-inner > *,
  .page-contatti__address > *,
  .archive-grid > *,
  .autori-grid > * {
    min-width: 0;
  }
}

/* RWD-FIX: side padding floor — ensure --side never collapses below 1rem on
   tiny mobile viewports where clamp() lower bound might bottom out. */
@media (max-width: 480px) {
  :root {
    --side: max(1rem, var(--side, 1.4rem));
  }
}