/* FabuLAB — Meno parole. Piu racconto. */
:root {
  --story-ink: #242424;
  --story-paper: #f7f5f1;
  --story-cream: #fafafa;
  --story-muted: #d6d5d5;
  --story-copy: #54595f;
  --story-red: #e44269;
  --story-red-dark: #cc3366;
  --story-footer: #3e3e3e;
  --story-line: rgba(250, 250, 250, .2);
  --story-line-dark: rgba(36, 36, 36, .16);
  --maxw: 1420px;
}

.story-page {
  color: var(--story-cream);
  background: var(--story-ink);
}

.story-page .wrap { max-width: var(--maxw); }
.story-page .section { padding-block: clamp(88px, 12vw, 164px); }
.story-page .h-display,
.story-page .h-section {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.065em;
}
.story-page .h-display { font-size: clamp(58px, 8.2vw, 132px); max-width: 12ch; }
.story-page .h-section { font-size: clamp(46px, 6.1vw, 92px); max-width: 13ch; }
.story-page .eyebrow { color: var(--story-red); }
.story-page .eyebrow::before { background: var(--story-red); }
.story-page .lead { font-size: clamp(20px, 2vw, 28px); line-height: 1.18; letter-spacing: -.045em; }

/* Shared navigation: editorial rather than software-product chrome. */
.nav.story-nav,
.cms-content-page > .nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(22px, 4vw, 62px);
  padding: 18px clamp(20px, 3vw, 42px);
}
.nav.story-nav .nav-logo,
.cms-content-page > .nav .nav-logo { gap: 0; }
.nav.story-nav .nav-logo-mark,
.cms-content-page > .nav .nav-logo-mark { display: none; }
.nav.story-nav .nav-logo img,
.cms-content-page > .nav .nav-logo img { height: 23px; }
.nav.story-nav .nav-links,
.cms-content-page > .nav .nav-links { justify-content: center; gap: 4px; }
.nav.story-nav .nav-links a,
.cms-content-page > .nav .nav-links a { border-radius: 999px; padding-inline: 12px; }
.nav.story-nav.is-scrolled,
.cms-content-page > .nav.is-scrolled { background: rgba(36, 36, 36, .9); }

.story-hero {
  min-height: 116svh;
  padding: calc(var(--nav-h) + 74px) var(--gutter) 74px;
  position: relative;
  background:
    radial-gradient(68vw 48vw at 100% 8%, rgba(228, 66, 105, .22), transparent 57%),
    linear-gradient(180deg, #2b2b2b, var(--story-ink));
  overflow: hidden;
}
.story-hero-grid {
  max-width: var(--maxw);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(150px, .55fr) minmax(560px, 2.1fr) minmax(150px, .55fr);
  gap: 30px;
  align-items: start;
}
.story-side-note,
.story-hero-note {
  padding-top: 142px;
  color: var(--story-muted);
  font-size: 13px;
  line-height: 1.4;
}
.story-side-note b { display: block; color: var(--story-cream); margin-bottom: 15px; }
.story-hero-note { text-align: right; }
.story-hero-note strong {
  display: block;
  color: var(--story-cream);
  font: 400 32px/.98 var(--font-serif);
  letter-spacing: -.06em;
  margin-bottom: 14px;
}
.story-hero-copy { text-align: center; }
.story-hero-badge {
  display: inline-flex;
  border: 1px solid rgba(228, 66, 105, .8);
  color: var(--story-red);
  border-radius: 999px;
  padding: 9px 18px 8px;
  margin-bottom: 42px;
  font-size: 12px;
  font-weight: 700;
  transform: rotate(-2deg);
}
.story-hero h1 {
  margin: 0 auto;
  color: var(--story-cream);
  font: 400 clamp(76px, 10vw, 164px)/.82 var(--font-serif);
  letter-spacing: -.09em;
  text-wrap: balance;
}
.story-hero h1 em { color: var(--story-red); font-weight: 400; }
.story-scribble { display: block; width: 94px; height: 22px; margin: 32px auto 28px; position: relative; }
.story-scribble::before,
.story-scribble::after {
  content: "";
  position: absolute;
  top: 9px;
  width: 38px;
  height: 4px;
  border-radius: 50%;
  background: var(--story-red);
  transform: rotate(-9deg);
}
.story-scribble::after { right: 0; transform: rotate(9deg); }
.story-hero-sub {
  max-width: 650px;
  margin: auto;
  color: var(--story-muted);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.28;
  letter-spacing: -.04em;
}
.story-hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.story-work-strip {
  position: relative;
  z-index: 3;
  max-width: var(--maxw);
  margin: 52px auto 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 18px;
  align-items: end;
}
.story-work-card {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #333;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .32);
  transform: rotate(var(--rotate, 0deg));
}
.story-work-card:nth-child(1) { --rotate: -3deg; }
.story-work-card:nth-child(2) { --rotate: 2deg; min-height: 344px; }
.story-work-card:nth-child(3) { --rotate: -1deg; min-height: 390px; }
.story-work-card:nth-child(4) { --rotate: 2.5deg; min-height: 276px; }
.story-work-card:nth-child(5) { --rotate: -2.5deg; min-height: 344px; }
.story-work-card:nth-child(6) { --rotate: 2deg; }
.story-work-card::after { content: none; }
.story-work-card span { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 7px 10px 6px; border-radius: 999px; background: rgba(250,250,250,.9); color: var(--story-ink); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.story-work-card.reveal { transform: translateY(32px) scale(.95) rotate(var(--rotate, 0deg)); }
.story-work-card.reveal.is-visible { transform: rotate(var(--rotate, 0deg)); }
.story-tile-identity { background: #f7dce5; }
.story-tile-story { background: var(--story-ink); }
.story-tile-content { background: var(--story-red); }
.story-tile-site { background: var(--story-paper); }
.story-tile-campaign { background: #2c626e; }
.story-tile-presence { background: var(--story-footer); }
.story-tile-story span,
.story-tile-campaign span,
.story-tile-presence span { color: var(--story-cream); background: rgba(228,66,105,.9); }
.story-ui-card {
  position: absolute;
  inset: 42px 25px auto;
  height: 158px;
  padding: 18px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 0 rgba(0,0,0,.1);
}
.story-ui-card i {
  display: block;
  height: 10px;
  margin-bottom: 12px;
  border-radius: 99px;
  background: var(--story-ink);
}
.story-ui-card i:nth-child(2) { width: 65%; background: var(--story-red); }
.story-ui-card i:nth-child(3) { width: 88%; background: var(--story-muted); }
.story-ui-card i:nth-child(4) { width: 48%; background: var(--story-muted); }
.story-mock-lines {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 28px;
  display: grid;
  gap: 10px;
}
.story-mock-lines i { height: 9px; border-radius: 10px; background: rgba(36,36,36,.18); }
.story-mock-lines i:nth-child(2) { width: 76%; }
.story-mock-lines i:nth-child(3) { width: 58%; }
.story-tile-story .story-mock-lines i,
.story-tile-campaign .story-mock-lines i,
.story-tile-presence .story-mock-lines i { background: rgba(250,250,250,.18); }
.story-big-letter {
  position: absolute;
  right: 10px;
  bottom: -20px;
  color: rgba(250,250,250,.78);
  font: 400 250px/.8 var(--font-serif);
  letter-spacing: -.13em;
}
.story-circlemark {
  position: absolute;
  right: 18px;
  bottom: 44px;
  width: 144px;
  height: 144px;
  border: 4px solid rgba(250,250,250,.78);
  border-radius: 50%;
}
.story-circlemark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 4px;
  height: 178px;
  border-radius: 99px;
  background: rgba(250,250,250,.78);
  transform: rotate(41deg);
}
.story-chart {
  position: absolute;
  left: 25px;
  right: 25px;
  top: 72px;
  height: 135px;
  padding: 18px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  border: 1px solid rgba(36,36,36,.18);
  background: rgba(255,255,255,.25);
}
.story-chart i { display: block; flex: 1; height: 38%; border-radius: 7px 7px 0 0; background: #53ce7a; }
.story-chart i:nth-child(2) { height: 74%; background: var(--story-ink); }
.story-chart i:nth-child(3) { height: 55%; background: #ffba00; }
.story-chart i:nth-child(4) { height: 90%; background: var(--story-red); }

.story-paper { background: var(--story-paper); color: var(--story-ink); }
.story-dark { background: var(--story-ink); color: var(--story-cream); }
.story-intro { padding-top: clamp(120px, 13vw, 180px) !important; }
.story-two-col { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(48px, 8vw, 120px); align-items: start; }
.story-copy-stack { display: grid; gap: 24px; }
.story-copy-stack p {
  max-width: 720px;
  color: var(--story-copy);
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.5;
  letter-spacing: -.03em;
}
.story-copy-stack p:first-child { color: var(--story-ink); font-size: clamp(23px, 2.2vw, 32px); line-height: 1.2; }
.story-dark .story-copy-stack p { color: var(--story-muted); }
.story-dark .story-copy-stack p:first-child { color: var(--story-cream); }
.story-ring-note {
  position: relative;
  display: inline-block;
  max-width: 340px;
  margin-top: 42px;
  padding: 28px 36px;
  border: 0px solid var(--story-red);
  border-radius: 50%;
  color: var(--story-red);
  font-weight: 700;
  text-align: center;
  transform: rotate(-3deg);
}

.story-positioning { border-block: 1px solid var(--story-line-dark); }
.story-positioning > .wrap { max-width: 960px; padding-block: clamp(52px, 7vw, 104px); }
.story-positioning h2 { margin: 0 0 24px; font: 400 clamp(48px, 5vw, 76px)/.9 var(--font-serif); letter-spacing: -.07em; }
.story-positioning p { color: var(--story-copy); font-size: 18px; line-height: 1.45; }

.story-section-head { display: flex; justify-content: space-between; gap: 60px; align-items: end; margin-bottom: 64px; }
.story-section-head > p { max-width: 470px; color: var(--story-muted); font-size: 18px; line-height: 1.4; }
.story-section-head > .story-copy-stack { flex: 0 1 470px; }
.story-section-head > h2 { flex: 1; }
.story-service-tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.story-service-tags li { padding: 8px 12px; border: 1px solid currentColor; border-radius: 999px; font-size: 14px; }
.story-service-list { border-top: 1px solid var(--story-line); }
.story-service-row {
  display: grid;
  grid-template-columns: 72px 1fr 1.2fr;
  gap: clamp(24px, 4vw, 64px);
  padding: 34px 0;
  border-bottom: 1px solid var(--story-line);
  align-items: start;
}
.story-service-row .num { color: var(--story-red); font-size: 13px; font-weight: 700; }
.story-service-row h3 { font: 400 clamp(34px, 3vw, 48px)/.95 var(--font-serif); letter-spacing: -.06em; }
.story-service-row p { color: var(--story-muted); font-size: 16px; line-height: 1.45; }
.story-service-row ul { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.story-service-row li { padding: 7px 10px; border: 1px solid var(--story-line); border-radius: 999px; color: var(--story-muted); font-size: 11px; }

.story-method-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(48px, 8vw, 120px); align-items: start; }
.story-method-intro { position: sticky; top: 110px; }
.story-method-copy { margin-top: 28px; max-width: 610px; color: var(--story-copy); font-size: 18px; line-height: 1.55; }
.story-steps { display: grid; }
.story-step { display: grid; grid-template-columns: 74px 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--story-line-dark); }
.story-step:first-child { border-top: 1px solid var(--story-line-dark); }
.story-step span { color: var(--story-red); font-size: 12px; font-weight: 700; }
.story-step h3 { font: 400 clamp(32px, 3vw, 44px)/1 var(--font-serif); letter-spacing: -.055em; margin-bottom: 10px; }
.story-step p { color: var(--story-copy); line-height: 1.5; }

.story-projects { background: var(--story-ink); }
.story-project-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; margin-top: 54px; }
.story-project-featured { position: relative; min-height: 590px; overflow: hidden; background: var(--story-red); }
.story-project-featured img { width: 100%; height: 100%; object-fit: cover; }
.story-project-featured::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(20, 20, 20, .88)); }
.story-project-featured div { position: absolute; inset: auto 34px 34px; z-index: 2; }
.story-project-featured h3 { font: 400 clamp(48px, 5vw, 76px)/.92 var(--font-serif); letter-spacing: -.07em; margin-bottom: 16px; }
.story-project-featured p { max-width: 520px; color: var(--story-muted); }
.story-project-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.story-project-mini { min-height: 285px; padding: 24px; border: 1px solid var(--story-line); display: flex; flex-direction: column; justify-content: space-between; background: var(--story-footer); }
.story-project-mini:nth-child(2) { color: var(--story-ink); background: #ffba00; }
.story-project-mini:nth-child(3) { background: #2c626e; }
.story-project-mini:nth-child(4) { color: var(--story-ink); background: #f7dce5; }
.story-project-mini h3 { font: 400 34px/.95 var(--font-serif); letter-spacing: -.06em; }
.story-project-mini p { font-size: 14px; opacity: .75; }

.story-audience { background: var(--story-paper); color: var(--story-ink); }
.story-audience-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(48px, 8vw, 120px); }
.story-audience-list { border-top: 1px solid var(--story-line-dark); }
.story-audience-list p { padding: 22px 0; border-bottom: 1px solid var(--story-line-dark); color: var(--story-copy); font-size: 18px; line-height: 1.45; }
.story-audience-list .story-audience-close { margin-top: 30px; border: 0; color: var(--story-red); font: 400 clamp(34px, 4vw, 56px)/1 var(--font-serif); letter-spacing: -.06em; }

.story-footer.footer,
.story-page .footer { padding-top: clamp(74px, 9vw, 126px); background: var(--story-footer); }
.story-footer .footer-claim,
.story-page .footer .footer-claim { max-width: 12ch; margin-left: 0; text-align: left; font-size: clamp(62px, 9vw, 140px); line-height: .85; letter-spacing: -.08em; }
.story-footer .footer-claim b,
.story-page .footer .footer-claim b { color: var(--story-red); font-weight: 400; }
.story-footer .footer-brand p,
.story-page .footer .footer-brand p { max-width: 42ch; }

/* Editorial internal pages use the same components as the homepage. */
.story-internal-hero { min-height: 76svh; display: flex; align-items: end; padding-top: calc(var(--nav-h) + 70px) !important; background: radial-gradient(55vw 45vw at 90% 20%, rgba(228, 66, 105, .18), transparent 58%); }
.story-internal-hero .story-two-col { align-items: end; }
.story-internal-hero .lead { margin-left: auto; }
.story-prose { max-width: 900px; }
.story-prose p { font: 400 clamp(30px, 4.2vw, 62px)/1.08 var(--font-serif); letter-spacing: -.055em; margin-bottom: 1em; }
.story-prose p:nth-child(even) { color: var(--story-red); }
.story-cta { text-align: center; background: var(--story-ink); }
.story-cta .h-section { margin-inline: auto; }
.story-cta .lead { margin: 26px auto 34px; }

/* Dynamic stories and insights inherit the new verbal identity. */
.cms-content-page .fabulab-archive-hero { background: radial-gradient(55vw 40vw at 90% 10%, rgba(228, 66, 105, .16), transparent 60%); }
.cms-content-page .fabulab-archive-hero .h-display { font-size: clamp(56px, 7vw, 112px); letter-spacing: -.065em; }
.cms-content-page .fabulab-case-next h2,
.cms-content-page .fabulab-article-closing h2 { font-family: var(--font-serif); letter-spacing: -.055em; }

@media (max-width: 1080px) {
  .nav.story-nav .nav-links,
  .cms-content-page > .nav .nav-links { display: none; }
  .nav.story-nav,
  .cms-content-page > .nav { display: flex; }
  .nav.story-nav .nav-toggle,
  .cms-content-page > .nav .nav-toggle { display: flex; }
  .story-hero-grid { grid-template-columns: 1fr; }
  .story-side-note, .story-hero-note { display: none; }
  .story-work-strip { grid-template-columns: repeat(2, 1fr); }
  .story-work-card:nth-child(n) { transform: none; }
  .story-work-card:nth-child(n+5) { display: none; }
  .story-two-col, .story-method-grid, .story-project-grid, .story-audience-grid { grid-template-columns: 1fr; }
  .story-method-intro { position: static; }
}

@media (max-width: 720px) {
  .story-hero { min-height: auto; padding-inline: 20px; }
  .story-hero-copy { text-align: left; }
  .story-hero h1 { margin-left: 0; font-size: clamp(66px, 21vw, 100px); }
  .story-scribble { margin-left: 0; }
  .story-hero-sub { margin-left: 0; }
  .story-hero-actions { justify-content: flex-start; }
  .story-work-strip { grid-template-columns: 1fr 1fr; margin-bottom: -110px; }
  .story-work-card { min-height: 220px !important; }
  .story-intro { padding-top: 190px !important; }
  .story-section-head { display: block; }
  .story-section-head > p { margin-top: 24px; }
  .story-section-head > .story-copy-stack { margin-top: 24px; }
  .story-service-row { grid-template-columns: 46px 1fr; }
  .story-service-row > div:last-child { grid-column: 2; }
  .story-project-minis { grid-template-columns: 1fr; }
  .story-footer .footer-claim { font-size: clamp(58px, 18vw, 92px); }
}