/* ==========================================================================
   DOTT.SSA MARTINA ROSSI — NUTRITION & FITNESS
   Design System & Editorial Stylesheet
   Art Direction: Premium Editorial Wellness
   ========================================================================== */

@layer reset, tokens, base, layout, components, sections, utilities;

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

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  body {
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
  }

  img, picture, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul, ol {
    list-style: none;
  }
}

@layer tokens {
  :root {
    /* Brand Palette derived from official logo */
    --bordeaux-primary: #8C051E;
    --bordeaux-deep: #5C0214;
    --bordeaux-darkest: #32010A;
    --bordeaux-vivid: #A70825;
    --bordeaux-tint: #EFE0E3;
    --bordeaux-border: rgba(140, 5, 30, 0.28);

    /* Neutrals & Surfaces — Rich Warm Atelier Palette (No sterile white) */
    --bg-ivory: #EFECE6;
    --bg-logo-match: #F7F7F7;
    --bg-stone: #E5DFD7;
    --bg-taupe: #DBD3C9;
    --bg-white: #FBF9F6;
    --bg-card-warm: #F7F4EF;
    --bg-anthracite: #161516;
    --bg-anthracite-elevated: #222022;
    --bg-charcoal-plum: #1E1618;

    /* Typography & Graphite Scale — High Contrast Editorial */
    --text-anthracite: #141314;
    --text-graphite: #2D2C2E;
    --text-silver-dark: #545256;
    --text-silver-light: #9E9B9F;
    --text-on-dark: #FAF8F6;
    --text-on-dark-muted: #E3DBDD;

    /* Hairlines & Borders */
    --border-hairline: #CFC7BC;
    --border-hairline-strong: #B5ABA0;
    --border-on-dark: rgba(250, 248, 246, 0.2);
    --border-bordeaux-on-dark: rgba(232, 165, 178, 0.45);

    /* Validation & Feedback */
    --status-error: #B3192B;
    --status-error-bg: #FDF2F4;
    --status-valid: #2D6A4F;

    /* Typography Families */
    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Fluid Type Scale — Stronger Hierarchy ("Less is More") */
    --text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
    --text-sm: clamp(0.875rem, 0.85rem + 0.14vw, 0.9375rem);
    --text-base: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
    --text-md: clamp(1.15rem, 1.08rem + 0.32vw, 1.325rem);
    --text-lg: clamp(1.375rem, 1.22rem + 0.65vw, 1.75rem);
    --text-xl: clamp(1.75rem, 1.48rem + 1.15vw, 2.5rem);
    --text-2xl: clamp(2.35rem, 1.85rem + 2.1vw, 3.75rem);
    --text-display: clamp(2.85rem, 2.15rem + 3vw, 4.85rem);

    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 5.5rem;
    --space-16: 7.5rem;

    /* Layout Constraints */
    --container-max: 1320px;
    --container-narrow: 920px;
    --gutter: clamp(1.25rem, 4vw, 3.5rem);

    /* Motion */
    --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 200ms;
    --duration-base: 380ms;

    /* 3D Depth & Multi-Layered Elevation System */
    --shadow-subtle:
      0 2px 4px rgba(20, 19, 20, 0.04),
      0 8px 20px -4px rgba(20, 19, 20, 0.07);
    --shadow-card:
      0 4px 10px -2px rgba(20, 19, 20, 0.06),
      0 18px 38px -8px rgba(20, 19, 20, 0.11),
      0 1px 0 rgba(255, 255, 255, 0.85) inset;
    --shadow-card-hover:
      0 10px 22px -4px rgba(20, 19, 20, 0.1),
      0 28px 56px -12px rgba(140, 5, 30, 0.16),
      0 1px 0 rgba(255, 255, 255, 0.95) inset;
    --shadow-hero-3d:
      0 12px 24px -6px rgba(20, 19, 20, 0.18),
      0 34px 68px -14px rgba(20, 19, 20, 0.34),
      14px 14px 0 -2px rgba(140, 5, 30, 0.14);
    --shadow-btn-primary:
      0 4px 12px rgba(140, 5, 30, 0.28),
      0 10px 24px -6px rgba(140, 5, 30, 0.36),
      0 1px 0 rgba(255, 255, 255, 0.22) inset;
    --shadow-btn-primary-hover:
      0 8px 18px rgba(92, 2, 20, 0.36),
      0 16px 32px -6px rgba(92, 2, 20, 0.45),
      0 1px 0 rgba(255, 255, 255, 0.28) inset;
    --shadow-btn-secondary:
      0 2px 6px rgba(20, 19, 20, 0.06),
      0 6px 14px -4px rgba(20, 19, 20, 0.08);
    --shadow-dark-card:
      0 10px 24px -4px rgba(0, 0, 0, 0.45),
      0 26px 52px -12px rgba(0, 0, 0, 0.65),
      0 1px 0 rgba(255, 255, 255, 0.09) inset;
  }
}

@layer base {
  body {
    background-color: var(--bg-ivory);
    color: var(--text-anthracite);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.68;
    font-weight: 400;
  }

  h1, h2, h3, .serif-heading {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: inherit;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
    max-width: 66ch;
  }

  strong {
    font-weight: 600;
  }

  em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 1.08em;
  }

  /* Focus States */
  :focus-visible {
    outline: 2px solid var(--bordeaux-primary);
    outline-offset: 3px;
  }

  .theme-dark :focus-visible {
    outline-color: #F2B8C2;
  }

  ::selection {
    background-color: var(--bordeaux-primary);
    color: var(--bg-white);
  }
}

@layer layout {
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--narrow {
    max-width: var(--container-narrow);
  }

  .section {
    padding-block: clamp(4.25rem, 8vw, 7.5rem);
    position: relative;
  }

  .section--compact {
    padding-block: clamp(3rem, 5.5vw, 5rem);
  }

  .section--ivory {
    background: linear-gradient(180deg, #EFECE6 0%, #E7E1D8 100%);
    color: var(--text-anthracite);
    border-bottom: 1px solid var(--border-hairline);
  }

  .section--stone {
    background:
      radial-gradient(circle at 12% 20%, rgba(140, 5, 30, 0.06) 0%, transparent 55%),
      linear-gradient(180deg, #E3DCD2 0%, #DAD1C5 100%);
    color: var(--text-anthracite);
    border-bottom: 1px solid var(--border-hairline-strong);
  }

  .section--white {
    background:
      radial-gradient(circle at 85% 25%, rgba(140, 5, 30, 0.22) 0%, transparent 55%),
      linear-gradient(160deg, #1E181A 0%, #161416 60%, #241318 100%);
    color: var(--text-on-dark);
    border-top: 1px solid rgba(250, 248, 246, 0.12);
    border-bottom: 1px solid rgba(250, 248, 246, 0.12);
  }

  .section--bordeaux {
    background-color: var(--bordeaux-deep);
    color: var(--text-on-dark);
  }

  .section--anthracite {
    background-color: var(--bg-anthracite);
    color: var(--text-on-dark);
  }

  /* Editorial 12-column grid */
  .editorial-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
  }

  @media (max-width: 960px) {
    .editorial-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  @media (max-width: 640px) {
    .editorial-grid {
      grid-template-columns: 1fr;
    }
  }
}

@layer components {
  /* Skip Link */
  .skip-link {
    position: absolute;
    top: -100px;
    left: var(--gutter);
    z-index: 1000;
    background: var(--bordeaux-primary);
    color: var(--bg-white);
    padding: 0.75rem 1.25rem;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: top var(--duration-fast) ease;
  }

  .skip-link:focus {
    top: 1rem;
  }

  /* Editorial Kicker / Eyebrow */
  .kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--bordeaux-primary);
    margin-bottom: var(--space-4);
  }

  .kicker::before {
    content: "";
    display: inline-block;
    width: 1.75rem;
    height: 1px;
    background-color: currentColor;
  }

  .theme-dark .kicker {
    color: #E8A5B2;
  }

  /* Section Header Architecture */
  .section-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-hairline);
  }

  .theme-dark .section-header {
    border-bottom-color: var(--border-on-dark);
  }

  @media (min-width: 860px) {
    .section-header--split {
      grid-template-columns: 7fr 5fr;
      align-items: end;
      gap: var(--space-8);
    }
  }

  .section-title {
    font-size: var(--text-2xl);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--text-anthracite);
  }

  .section-title em {
    color: var(--bordeaux-primary);
    font-weight: 500;
  }

  .theme-dark .section-title {
    color: var(--bg-white);
  }

  .theme-dark .section-title em {
    color: #F4C2CC;
  }

  .section-lead {
    font-size: var(--text-md);
    color: var(--text-graphite);
    line-height: 1.58;
    font-weight: 400;
  }

  .theme-dark .section-lead {
    color: var(--text-on-dark-muted);
  }

  /* Buttons — Architectural Sharp Edges (2px radius) */
  .btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 3.125rem;
    padding: 0.85rem 1.75rem;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 3px;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-editorial),
      color var(--duration-fast) var(--ease-editorial),
      border-color var(--duration-fast) var(--ease-editorial),
      box-shadow var(--duration-fast) var(--ease-editorial),
      transform var(--duration-fast) var(--ease-editorial);
  }

  .btn--primary {
    background: linear-gradient(180deg, #9B0723 0%, var(--bordeaux-primary) 100%);
    color: var(--bg-white);
    border-color: var(--bordeaux-deep);
    box-shadow: var(--shadow-btn-primary);
  }

  .btn--primary:hover {
    background: linear-gradient(180deg, var(--bordeaux-primary) 0%, var(--bordeaux-deep) 100%);
    border-color: var(--bordeaux-darkest);
    box-shadow: var(--shadow-btn-primary-hover);
    transform: translateY(-2px);
  }

  .btn--secondary {
    background-color: var(--bg-white);
    color: var(--text-anthracite);
    border-color: var(--border-hairline-strong);
    box-shadow: var(--shadow-btn-secondary);
  }

  .btn--secondary:hover {
    border-color: var(--bordeaux-primary);
    color: var(--bordeaux-primary);
    background-color: var(--bg-white);
    box-shadow: 0 6px 18px -4px rgba(140, 5, 30, 0.16);
    transform: translateY(-2px);
  }

  .btn--on-dark {
    background-color: var(--bg-ivory);
    color: var(--bordeaux-deep);
    border-color: var(--bg-ivory);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
  }

  .btn--on-dark:hover {
    background-color: var(--bg-white);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
  }

  .btn--outline-light {
    background-color: transparent;
    color: var(--text-on-dark);
    border-color: rgba(250, 248, 246, 0.35);
  }

  .btn--outline-light:hover {
    border-color: var(--bg-ivory);
    background-color: rgba(250, 248, 246, 0.07);
  }

  .btn__arrow {
    display: inline-block;
    transition: transform var(--duration-fast) var(--ease-editorial);
  }

  .btn:hover .btn__arrow {
    transform: translateX(3px);
  }

  /* Header & Navigation — Deep Luxury Anthracite Bar */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(180deg, #1A181A 0%, #141214 100%);
    border-bottom: 2px solid var(--bordeaux-primary);
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.28),
      0 1px 0 rgba(255, 255, 255, 0.06) inset;
    transition: box-shadow var(--duration-fast) ease;
  }

  .site-header.is-scrolled {
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.42),
      0 1px 0 rgba(255, 255, 255, 0.08) inset;
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.85rem;
    gap: clamp(0.75rem, 2vw, 1.5rem);
  }

  .brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 1;
    min-width: 0;
  }

  .brand-lockup__symbol {
    width: 2.65rem;
    height: 2.65rem;
    object-fit: contain;
    border-radius: 4px;
    background-color: var(--bg-logo-match);
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
  }

  .brand-lockup__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
  }

  .brand-lockup__name {
    font-family: var(--font-sans);
    font-size: clamp(0.76rem, 0.68rem + 0.35vw, 0.925rem);
    font-weight: 700;
    letter-spacing: clamp(0.04em, 0.8vw, 0.08em);
    text-transform: uppercase;
    color: var(--bg-white);
    white-space: nowrap;
  }

  .brand-lockup__name strong {
    color: #F25A75;
    font-weight: 700;
  }

  .brand-lockup__sub {
    font-family: var(--font-sans);
    font-size: clamp(0.56rem, 0.5rem + 0.25vw, 0.65rem);
    font-weight: 600;
    letter-spacing: clamp(0.14em, 1.8vw, 0.24em);
    text-transform: uppercase;
    color: #E8A5B2;
    margin-top: 0.15rem;
    padding-top: 0.15rem;
    border-top: 1px solid rgba(250, 248, 246, 0.18);
    white-space: nowrap;
  }

  .brand-lockup__sub span {
    color: #B8B2B6;
  }

  .primary-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.15rem, 2vw, 2.15rem);
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1.8vw, 1.85rem);
  }

  .nav-link {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #DFD9DC;
    padding-block: 0.35rem;
    position: relative;
    transition: color var(--duration-fast) ease;
  }

  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #F25A75;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-base) var(--ease-editorial);
  }

  .nav-link:hover,
  .nav-link[aria-current="page"],
  .nav-link.is-active {
    color: var(--bg-white);
  }

  .nav-link:hover::after,
  .nav-link[aria-current="page"]::after,
  .nav-link.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .header-cta {
    padding: 0.65rem 1.25rem;
    min-height: 2.65rem;
    font-size: 0.75rem;
  }

  /* Mobile Menu Button & Drawer */
  .menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(250, 248, 246, 0.25);
    border-radius: 3px;
    padding: 0.55rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bg-white);
    cursor: pointer;
  }

  .menu-toggle__bars {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 16px;
  }

  .menu-toggle__bars span {
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: var(--bg-white);
    transition: transform var(--duration-fast) ease, opacity var(--duration-fast) ease;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  @media (max-width: 1024px) {
    .menu-toggle {
      display: inline-flex;
    }

    .primary-nav {
      position: fixed;
      top: 4.85rem;
      left: 0;
      right: 0;
      background-color: #181618;
      border-bottom: 2px solid var(--bordeaux-primary);
      padding: var(--space-6) var(--gutter);
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-5);
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
      transform: translateY(-12px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        transform var(--duration-fast) var(--ease-editorial),
        opacity var(--duration-fast) ease,
        visibility var(--duration-fast) ease;
    }

    .primary-nav.is-open {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .nav-list {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      width: 100%;
    }

    .nav-list li {
      width: 100%;
      border-bottom: 1px solid rgba(250, 248, 246, 0.12);
    }

    .nav-link {
      display: block;
      padding-block: 0.95rem;
      font-size: var(--text-base);
    }

    .header-cta {
      width: 100%;
      justify-content: center;
      min-height: 3.1rem;
    }
  }
}

@layer sections {
  /* ==========================================================================
     1. HERO — ASYMMETRIC EDITORIAL SPREAD (WARM ATELIER CANVAS)
     ========================================================================== */
  .hero {
    padding-top: clamp(2.5rem, 5vw, 4.5rem);
    padding-bottom: clamp(4rem, 7vw, 6.5rem);
    background:
      radial-gradient(ellipse at 78% 35%, rgba(140, 5, 30, 0.12) 0%, rgba(140, 5, 30, 0.03) 45%, transparent 72%),
      linear-gradient(135deg, #EFEBE4 0%, #E4DDD3 55%, #DFD5CA 100%);
    border-bottom: 1px solid var(--border-hairline-strong);
    box-shadow: 0 -10px 24px -12px rgba(20, 19, 20, 0.08) inset;
    position: relative;
  }

  .hero__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(2rem, 3.5vw, 3.5rem);
    align-items: center;
  }

  .hero__content {
    grid-column: 1 / 8;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__identity-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-hairline-strong);
    width: 100%;
    max-width: 36rem;
  }

  .hero__name-tag {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bordeaux-primary);
  }

  .hero__pillars-tag {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-silver-dark);
  }

  .hero__title {
    font-size: var(--text-display);
    line-height: 1.03;
    letter-spacing: -0.02em;
    color: var(--text-anthracite);
    margin-bottom: var(--space-5);
  }

  .hero__title em {
    color: var(--bordeaux-primary);
    font-weight: 500;
    display: inline-block;
  }

  .hero__subtitle {
    font-size: var(--text-md);
    line-height: 1.65;
    color: var(--text-graphite);
    margin-bottom: var(--space-6);
    max-width: 54ch;
  }

  .hero__meta-strip {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-hairline);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    width: 100%;
  }

  .hero__meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .hero__meta-num {
    font-family: var(--font-serif);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--bordeaux-primary);
    font-weight: 600;
  }

  .hero__meta-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-anthracite);
  }

  .hero__meta-desc {
    font-size: 0.8125rem;
    color: var(--text-silver-dark);
    line-height: 1.45;
  }

  /* Hero Visual Column */
  .hero__visual {
    grid-column: 8 / 13;
    position: relative;
  }

  .hero__frame {
    position: relative;
    background-color: var(--bg-anthracite);
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    box-shadow: var(--shadow-hero-3d);
    transition: transform var(--duration-base) var(--ease-editorial), box-shadow var(--duration-base) var(--ease-editorial);
  }

  .hero__frame:hover {
    transform: translateY(-4px);
    box-shadow:
      0 18px 34px -8px rgba(20, 19, 20, 0.24),
      0 42px 80px -16px rgba(20, 19, 20, 0.38),
      16px 16px 0 -2px rgba(140, 5, 30, 0.2);
  }

  .hero__frame::before {
    content: "";
    position: absolute;
    top: -0.85rem;
    right: -0.85rem;
    width: 48%;
    height: 48%;
    border-top: 3px solid var(--bordeaux-primary);
    border-right: 3px solid var(--bordeaux-primary);
    pointer-events: none;
  }

  .hero__img-wrap {
    position: relative;
    aspect-ratio: 386 / 540;
    overflow: hidden;
    background-color: #121112;
  }

  .hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
    transition: transform 900ms var(--ease-editorial);
  }

  .hero__frame:hover .hero__img {
    transform: scale(1.02);
  }

  .hero__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.85rem 0.5rem 0.25rem;
    color: var(--text-on-dark-muted);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }

  .hero__caption-name {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bg-ivory);
  }

  .hero__caption-role {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.925rem;
    color: #E8A5B2;
  }

  @media (max-width: 960px) {
    .hero__grid {
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }

    .hero__content,
    .hero__visual {
      grid-column: 1 / -1;
    }

    .hero__visual {
      max-width: min(100%, 26rem);
      margin-inline: auto;
      width: 100%;
      padding-right: 0.5rem;
    }
  }

  @media (max-width: 640px) {
    .hero {
      padding-top: 1.5rem;
      padding-bottom: 3rem;
    }

    .hero__content {
      display: contents;
    }

    .hero__identity-bar {
      order: 1;
      margin-bottom: 0.25rem;
      padding-bottom: 0.65rem;
      gap: 0.35rem 1rem;
    }

    .hero__title {
      order: 2;
      font-size: clamp(2.5rem, 11vw, 3.15rem);
      margin-bottom: 0.25rem;
    }

    .hero__visual {
      order: 3;
      max-width: 100%;
      margin-block: 0.35rem 0.5rem;
    }

    .hero__img-wrap {
      aspect-ratio: 4 / 4.5;
    }

    .hero__img {
      object-position: center 8%;
    }

    .hero__caption {
      padding: 0.65rem 0.25rem 0.15rem;
      font-size: 0.68rem;
      white-space: nowrap;
    }

    .hero__caption-role {
      font-size: 0.82rem;
    }

    .hero__subtitle {
      order: 4;
      font-size: 1.025rem;
      line-height: 1.58;
      margin-bottom: 0.5rem;
    }

    .hero .btn-group {
      order: 5;
      width: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: 0.65rem;
    }

    .hero .btn-group .btn {
      width: 100%;
    }

    .hero__meta-strip {
      order: 6;
      margin-top: 1rem;
      padding-top: 1.15rem;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.6rem;
    }

    .hero__meta-item {
      padding-left: 0.55rem;
      border-left: 2px solid var(--bordeaux-primary);
    }

    .hero__meta-num {
      font-size: 0.72rem;
    }

    .hero__meta-label {
      font-size: 0.68rem;
      letter-spacing: 0.04em;
      line-height: 1.25;
    }
  }

  /* ==========================================================================
     2. MANIFESTO / FRASE IDENTITARIA (CAP. 13)
     ========================================================================== */
  .manifesto {
    background: radial-gradient(circle at 82% 22%, #7D041B 0%, var(--bordeaux-deep) 58%, #3E010D 100%);
    color: var(--text-on-dark);
    padding-block: clamp(4.5rem, 9vw, 8rem);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border-on-dark);
    box-shadow:
      0 14px 32px -12px rgba(0, 0, 0, 0.45) inset,
      0 -12px 28px -12px rgba(0, 0, 0, 0.35) inset;
  }

  .manifesto__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: center;
  }

  .manifesto__label-col {
    grid-column: 1 / 4;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-left: 2px solid #E8A5B2;
    padding-left: var(--space-4);
  }

  .manifesto__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #E8A5B2;
    font-weight: 600;
  }

  .manifesto__principle {
    font-size: var(--text-sm);
    color: var(--text-on-dark-muted);
    line-height: 1.5;
  }

  .manifesto__quote-col {
    grid-column: 4 / 13;
  }

  .manifesto__blockquote {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 1.35rem + 1.8vw, 3rem);
    font-weight: 500;
    line-height: 1.22;
    color: var(--bg-white);
    margin-bottom: var(--space-6);
    position: relative;
  }

  .manifesto__blockquote span {
    color: #F4C2CC;
    font-style: italic;
  }

  .manifesto__attribution {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-on-dark);
  }

  .manifesto__author {
    display: flex;
    flex-direction: column;
  }

  .manifesto__author-name {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bg-white);
  }

  .manifesto__author-sub {
    font-size: var(--text-xs);
    color: var(--text-on-dark-muted);
    margin-top: 0.15rem;
  }

  .manifesto__axiom {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #F4C2CC;
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--border-bordeaux-on-dark);
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
  }

  .manifesto__axiom:hover {
    background-color: var(--bg-ivory);
    color: var(--bordeaux-deep);
  }

  @media (max-width: 900px) {
    .manifesto__label-col,
    .manifesto__quote-col {
      grid-column: 1 / -1;
    }
    .manifesto__label-col {
      margin-bottom: var(--space-3);
    }
  }

  /* ==========================================================================
     3. CHI SONO & FORMAZIONE ACCADEMICA (CAP. 10, 11, 19, 23)
     ========================================================================== */
  .about-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .about-narrative {
    grid-column: 1 / 7;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .about-narrative__lead {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    line-height: 1.26;
    color: var(--text-anthracite);
    font-weight: 600;
  }

  .about-cta-row {
    margin-top: var(--space-3);
  }

  .about-narrative p {
    color: var(--text-graphite);
  }

  /* Brand Identity Emblem Box inside Chi Sono */
  .symbol-story-box {
    margin-top: var(--space-4);
    background-color: var(--bg-white);
    border: 1px solid var(--border-hairline-strong);
    border-left: 4px solid var(--bordeaux-primary);
    border-radius: 3px;
    padding: var(--space-5);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-5);
    align-items: center;
    box-shadow: var(--shadow-card);
    transition: transform var(--duration-fast) var(--ease-editorial), box-shadow var(--duration-fast) var(--ease-editorial);
  }

  .symbol-story-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
  }

  .symbol-story-box__img {
    width: 5.5rem;
    height: 5.5rem;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(20, 19, 20, 0.08));
  }

  .symbol-story-box__title {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bordeaux-primary);
    margin-bottom: 0.35rem;
  }

  .symbol-story-box__text {
    font-size: var(--text-sm);
    color: var(--text-graphite);
    line-height: 1.55;
  }

  @media (max-width: 520px) {
    .symbol-story-box {
      grid-template-columns: 1fr;
    }
  }

  /* Academic Progression Column */
  .academic-column {
    grid-column: 7 / 13;
    background-color: var(--bg-white);
    border: 1px solid var(--border-hairline-strong);
    border-top: 4px solid var(--bordeaux-primary);
    border-radius: 3px;
    padding: clamp(1.75rem, 3.5vw, 3rem);
    box-shadow: var(--shadow-card);
  }

  .academic-column__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-hairline);
  }

  .academic-column__title {
    font-size: var(--text-lg);
    color: var(--text-anthracite);
  }

  .academic-column__tag {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bordeaux-primary);
    font-weight: 600;
  }

  .academic-steps {
    display: flex;
    flex-direction: column;
  }

  .academic-step {
    position: relative;
    padding-left: var(--space-6);
    padding-bottom: var(--space-6);
    border-left: 1px solid var(--border-hairline-strong);
  }

  .academic-step:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
  }

  .academic-step::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 0.35rem;
    width: 9px;
    height: 9px;
    background-color: var(--bordeaux-primary);
    border: 2px solid var(--bg-white);
  }

  .academic-step--ongoing::before {
    background-color: var(--bg-white);
    border-color: var(--bordeaux-primary);
  }

  .academic-step__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.2rem 0.55rem;
    margin-bottom: 0.45rem;
    background-color: var(--bordeaux-tint);
    color: var(--bordeaux-primary);
  }

  .academic-step--ongoing .academic-step__badge {
    background-color: var(--bg-stone);
    color: var(--text-graphite);
  }

  .academic-step__title {
    font-family: var(--font-serif);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-anthracite);
    margin-bottom: 0.35rem;
  }

  .academic-step__desc {
    font-size: var(--text-sm);
    color: var(--text-graphite);
    line-height: 1.58;
  }

  .academic-disclaimer {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-hairline);
    font-size: var(--text-xs);
    color: var(--text-silver-dark);
    line-height: 1.5;
  }

  @media (max-width: 960px) {
    .about-narrative,
    .academic-column {
      grid-column: 1 / -1;
    }
  }

  /* ==========================================================================
     4. FILOSOFIA PROFESSIONALE — I TRE PRINCIPI (CAP. 12)
     ========================================================================== */
  .principles-editorial {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .principle-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding: clamp(2rem, 3.8vw, 3rem);
    background-color: var(--bg-white);
    border: 1px solid var(--border-hairline-strong);
    border-left: 4px solid var(--bordeaux-primary);
    border-radius: 3px;
    box-shadow: var(--shadow-card);
    align-items: start;
    transition:
      transform var(--duration-base) var(--ease-editorial),
      box-shadow var(--duration-base) var(--ease-editorial),
      border-color var(--duration-fast) ease;
  }

  .principle-row:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
  }

  .principle-row__index {
    grid-column: 1 / 3;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 500;
    font-style: italic;
    color: var(--bordeaux-primary);
    line-height: 1;
  }

  .principle-row__heading {
    grid-column: 3 / 7;
  }

  .principle-row__title {
    font-size: var(--text-xl);
    color: var(--text-anthracite);
    margin-bottom: 0.4rem;
  }

  .principle-row__subtitle {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-silver-dark);
  }

  .principle-row__body {
    grid-column: 7 / 13;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .principle-row__text {
    font-size: var(--text-base);
    color: var(--text-graphite);
  }

  .principle-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .principle-tag {
    font-size: var(--text-xs);
    padding: 0.35rem 0.85rem;
    background-color: var(--bg-ivory);
    border: 1px solid var(--border-hairline-strong);
    border-radius: 2px;
    color: var(--text-graphite);
    box-shadow: 0 2px 5px rgba(20, 19, 20, 0.04);
  }

  @media (max-width: 860px) {
    .principle-row {
      grid-template-columns: auto 1fr;
      gap: 0.75rem 1.15rem;
      padding: 1.5rem 1.25rem;
    }
    .principle-row__index {
      grid-column: 1 / 2;
      font-size: 2.15rem;
      padding-top: 0.1rem;
    }
    .principle-row__heading {
      grid-column: 2 / 3;
    }
    .principle-row__body {
      grid-column: 1 / -1;
      padding-top: 0.25rem;
    }
  }

  /* ==========================================================================
     5. IL MIO METODO — 6 TAPPE EDITORIALI (CAP. 20)
     ========================================================================== */
  .method-architecture {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  .method-aside {
    grid-column: 1 / 5;
    position: sticky;
    top: 6.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    background: linear-gradient(165deg, #6E0318 0%, var(--bordeaux-deep) 65%, #3B010C 100%);
    border: 1px solid var(--border-bordeaux-on-dark);
    border-top: 4px solid #F25A75;
    border-radius: 3px;
    box-shadow: var(--shadow-dark-card);
  }

  .method-aside__quote {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-style: italic;
    line-height: 1.35;
    color: var(--bg-white);
  }

  .method-aside__text {
    font-size: var(--text-sm);
    color: var(--text-on-dark-muted);
  }

  .method-steps {
    grid-column: 5 / 13;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .method-step {
    padding: clamp(1.65rem, 2.6vw, 2.25rem);
    border: 1px solid rgba(250, 248, 246, 0.16);
    border-bottom: 3px solid #D93854;
    border-radius: 3px;
    background: linear-gradient(180deg, #272225 0%, #1E1B1D 100%);
    box-shadow: var(--shadow-dark-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition:
      transform var(--duration-base) var(--ease-editorial),
      box-shadow var(--duration-base) var(--ease-editorial),
      border-color var(--duration-fast) ease;
  }

  .method-step:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 165, 178, 0.45);
    box-shadow:
      0 14px 30px -6px rgba(0, 0, 0, 0.55),
      0 28px 56px -12px rgba(140, 5, 30, 0.25);
  }

  .method-step__num {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F4C2CC;
  }

  .method-step__title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--bg-white);
  }

  .method-step__desc {
    font-size: var(--text-sm);
    color: var(--text-on-dark-muted);
    line-height: 1.6;
  }

  @media (max-width: 960px) {
    .method-aside,
    .method-steps {
      grid-column: 1 / -1;
    }
    .method-aside {
      position: static;
    }
  }

  @media (max-width: 600px) {
    .method-steps {
      grid-template-columns: 1fr;
    }
    .method-step {
      padding: 1.35rem 1.25rem;
      gap: 0.4rem;
    }
    .method-aside {
      padding: 1.5rem 1.25rem;
      gap: 1rem;
    }
    .method-aside .btn {
      width: 100%;
    }
  }

  /* ==========================================================================
     6. PERCORSI — AMBITI D'INTERVENTO (CAP. 21)
     ========================================================================== */
  .domains-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .domain-panel {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    background-color: var(--bg-white);
    border: 1px solid var(--border-hairline-strong);
    border-radius: 3px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition:
      transform var(--duration-base) var(--ease-editorial),
      box-shadow var(--duration-base) var(--ease-editorial);
  }

  .domain-panel:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }

  .domain-panel--featured {
    border: 1.5px solid var(--bordeaux-primary);
    box-shadow:
      0 10px 26px -6px rgba(140, 5, 30, 0.16),
      0 28px 60px -14px rgba(140, 5, 30, 0.24);
  }

  .domain-panel__meta {
    grid-column: 1 / 5;
    padding: clamp(1.75rem, 3.5vw, 3rem);
    background: linear-gradient(160deg, #272225 0%, #1B181B 100%);
    color: var(--text-on-dark);
    border-right: 1px solid rgba(250, 248, 246, 0.14);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-5);
  }

  .domain-panel--featured .domain-panel__meta {
    background: linear-gradient(160deg, #75041A 0%, var(--bordeaux-deep) 65%, #3D010C 100%);
    color: var(--text-on-dark);
    border-right-color: var(--bordeaux-deep);
  }

  .domain-panel__kicker {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #F4C2CC;
  }

  .domain-panel--featured .domain-panel__kicker {
    color: #F4C2CC;
  }

  .domain-panel__title {
    font-size: var(--text-xl);
    margin-top: var(--space-2);
    color: var(--bg-white);
  }

  .domain-panel__focus {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-on-dark-muted);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(250, 248, 246, 0.16);
  }

  .domain-panel--featured .domain-panel__focus {
    color: var(--text-on-dark-muted);
    border-top-color: var(--border-on-dark);
  }

  .domain-panel__content {
    grid-column: 5 / 13;
    padding: clamp(1.75rem, 3.5vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-5);
  }

  .domain-panel__desc {
    font-size: var(--text-base);
    color: var(--text-graphite);
  }

  .domain-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-hairline);
  }

  .domain-points li {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: var(--text-sm);
    color: var(--text-anthracite);
    font-weight: 500;
  }

  .domain-points li::before {
    content: "—";
    color: var(--bordeaux-primary);
    font-weight: 700;
    flex-shrink: 0;
  }

  .domain-panel__action {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-hairline);
    display: flex;
    align-items: center;
  }

  .domain-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bordeaux-primary);
    transition: gap var(--duration-fast) var(--ease-editorial), color var(--duration-fast) ease;
  }

  .domain-link:hover {
    gap: 0.8rem;
    color: var(--bordeaux-deep);
  }

  .domains-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background-color: var(--bordeaux-tint);
    border: 1px solid var(--bordeaux-border);
  }

  .domains-notice__text {
    max-width: 62ch;
  }

  .domains-notice__title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--bordeaux-deep);
    margin-bottom: 0.35rem;
  }

  .domains-notice__desc {
    font-size: var(--text-sm);
    color: var(--text-graphite);
  }

  @media (max-width: 860px) {
    .domain-panel__meta,
    .domain-panel__content {
      grid-column: 1 / -1;
    }
    .domain-panel__meta {
      border-right: none;
      border-bottom: 1px solid var(--border-hairline-strong);
    }
  }

  @media (max-width: 560px) {
    .domain-points {
      grid-template-columns: 1fr;
    }
  }

  /* ==========================================================================
     7. PERCORSO SPORTIVO & GALLERIA GARE (CAP. 8, 9, 22, 29)
     ========================================================================== */
  .sport-section {
    background-color: var(--bg-anthracite);
    color: var(--text-on-dark);
    border-top: 1px solid var(--border-on-dark);
    border-bottom: 1px solid var(--border-on-dark);
  }

  .sport-intro-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: clamp(3rem, 6vw, 5rem);
    align-items: end;
  }

  .sport-intro__left {
    grid-column: 1 / 8;
  }

  .sport-intro__lead-text {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.35;
    color: var(--bg-white);
    margin-bottom: 1rem;
  }

  .sport-intro__right {
    grid-column: 8 / 13;
    border-left: 2px solid var(--bordeaux-vivid);
    padding-left: var(--space-5);
  }

  .sport-intro__quote {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--bg-white);
    line-height: 1.38;
    margin-bottom: var(--space-3);
  }

  .sport-intro__note {
    font-size: var(--text-sm);
    color: var(--text-on-dark-muted);
  }

  /* Editorial Competition Gallery */
  .sport-gallery {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1.5rem, 2.5vw, 2.25rem);
    align-items: stretch;
  }

  .gallery-card {
    background-color: var(--bg-anthracite-elevated);
    border: 1px solid rgba(250, 248, 246, 0.2);
    border-radius: 3px;
    box-shadow: var(--shadow-dark-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition:
      transform var(--duration-base) var(--ease-editorial),
      box-shadow var(--duration-base) var(--ease-editorial),
      border-color var(--duration-fast) ease;
  }

  .gallery-card:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 165, 178, 0.45);
    box-shadow:
      0 16px 34px -6px rgba(0, 0, 0, 0.6),
      0 34px 68px -12px rgba(140, 5, 30, 0.28);
  }

  .gallery-card--primary {
    grid-column: 1 / 6;
  }

  .gallery-card--secondary {
    grid-column: 6 / 10;
  }

  .gallery-card--tertiary {
    grid-column: 10 / 13;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background-color: transparent;
    border: none;
  }

  .gallery-card__trigger {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .gallery-card__img-wrap {
    position: relative;
    overflow: hidden;
    background-color: #100F10;
  }

  .gallery-card--primary .gallery-card__img-wrap {
    aspect-ratio: 386 / 540;
  }

  .gallery-card--secondary .gallery-card__img-wrap {
    aspect-ratio: 472 / 594;
  }

  .gallery-card--CloseUp .gallery-card__img-wrap {
    aspect-ratio: 370 / 244;
  }

  .gallery-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms var(--ease-editorial);
  }

  .gallery-card__trigger:hover .gallery-card__img {
    transform: scale(1.03);
  }

  .gallery-card__zoom-badge {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background-color: rgba(24, 23, 24, 0.85);
    color: var(--bg-ivory);
    border: 1px solid var(--border-on-dark);
    padding: 0.35rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color var(--duration-fast) ease;
  }

  .gallery-card__trigger:hover .gallery-card__zoom-badge {
    background-color: var(--bordeaux-primary);
    border-color: var(--bordeaux-primary);
  }

  .gallery-card__caption {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-on-dark);
  }

  .gallery-card__kicker {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #E8A5B2;
    margin-bottom: 0.25rem;
  }

  .gallery-card__title {
    font-family: var(--font-serif);
    font-size: var(--text-md);
    color: var(--bg-white);
    margin-bottom: 0.35rem;
  }

  .gallery-card__desc {
    font-size: 0.825rem;
    color: var(--text-on-dark-muted);
    line-height: 1.5;
  }

  .sport-editorial-note {
    flex: 1;
    background: linear-gradient(160deg, #75041A 0%, var(--bordeaux-deep) 65%, #42010E 100%);
    border: 1px solid var(--border-bordeaux-on-dark);
    border-radius: 3px;
    box-shadow: var(--shadow-dark-card);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .sport-editorial-note__title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--bg-white);
    line-height: 1.25;
  }

  .sport-editorial-note__text {
    font-size: var(--text-sm);
    color: var(--text-on-dark-muted);
    line-height: 1.58;
  }

  @media (max-width: 1024px) {
    .sport-intro__left,
    .sport-intro__right {
      grid-column: 1 / -1;
    }
    .gallery-card--primary {
      grid-column: 1 / 7;
    }
    .gallery-card--secondary {
      grid-column: 7 / 13;
    }
    .gallery-card--tertiary {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 680px) {
    .gallery-card--primary,
    .gallery-card--secondary,
    .gallery-card--tertiary {
      grid-column: 1 / -1;
    }
    .gallery-card--tertiary {
      grid-template-columns: 1fr;
    }
    .gallery-card--primary .gallery-card__img-wrap,
    .gallery-card--secondary .gallery-card__img-wrap {
      aspect-ratio: 4 / 4.3;
    }
    .gallery-card__img {
      object-position: center 10%;
    }
    .sport-editorial-note .btn {
      width: 100%;
    }
  }

  /* Mobile-First Editorial Refinements (<640px) */
  @media (max-width: 640px) {
    .section {
      padding-block: 3.25rem;
    }

    .section-header {
      margin-bottom: 2rem;
      padding-bottom: 1.15rem;
      gap: 0.75rem;
    }

    .kicker {
      margin-bottom: 0.5rem;
      font-size: 0.7rem;
      letter-spacing: 0.13em;
    }

    .kicker::before {
      width: 1.15rem;
    }

    .manifesto {
      padding-block: 3.25rem;
    }

    .manifesto__blockquote {
      font-size: 1.65rem;
      line-height: 1.26;
      margin-bottom: 1.5rem;
    }

    .manifesto__axiom {
      width: 100%;
      text-align: center;
    }

    .about-cta-row .btn,
    .faq-intro .btn {
      width: 100%;
    }

    .academic-column {
      padding: 1.5rem 1.25rem;
    }

    .academic-step {
      padding-left: 1.15rem;
      padding-bottom: 1.35rem;
    }

    .domain-panel__meta,
    .domain-panel__content {
      padding: 1.4rem 1.25rem;
      gap: 1rem;
    }

    .domain-panel__focus {
      padding-top: 0.65rem;
    }

    .domain-panel--featured .domain-panel__action .btn {
      width: 100%;
    }

    .faq-summary {
      padding-block: 1.15rem;
      font-size: 1.225rem;
    }

    .contact-form-card {
      padding: 1.5rem 1.25rem;
    }
  }

  /* Lightbox Modal (<dialog closedby="any">) */
  .lightbox-dialog {
    margin: auto;
    max-width: min(92vw, 960px);
    max-height: 90vh;
    width: 100%;
    background-color: var(--bg-anthracite);
    color: var(--text-on-dark);
    border: 1px solid var(--border-on-dark);
    padding: 0;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65);
  }

  .lightbox-dialog::backdrop {
    background-color: rgba(12, 10, 11, 0.86);
    backdrop-filter: blur(4px);
  }

  .lightbox-dialog__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: stretch;
  }

  .lightbox-dialog__media {
    background-color: #0E0D0E;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 82vh;
    overflow: hidden;
  }

  .lightbox-dialog__img {
    max-height: 80vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .lightbox-dialog__info {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-5);
    border-left: 1px solid var(--border-on-dark);
  }

  .lightbox-dialog__close {
    align-self: flex-end;
    background: transparent;
    color: var(--text-on-dark);
    border: 1px solid var(--border-on-dark);
    padding: 0.45rem 0.9rem;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
  }

  .lightbox-dialog__close:hover {
    border-color: #E8A5B2;
    color: #E8A5B2;
  }

  @media (max-width: 760px) {
    .lightbox-dialog__inner {
      grid-template-columns: 1fr;
    }
    .lightbox-dialog__media {
      max-height: 55vh;
    }
    .lightbox-dialog__img {
      max-height: 52vh;
    }
    .lightbox-dialog__info {
      border-left: none;
      border-top: 1px solid var(--border-on-dark);
    }
  }

  /* ==========================================================================
     8. FAQ ESSENZIALI — NATIVE EXCLUSIVE ACCORDION (CAP. 32)
     ========================================================================== */
  .faq-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  .faq-intro {
    grid-column: 1 / 5;
  }

  .faq-list {
    grid-column: 5 / 13;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

  .faq-item {
    background-color: var(--bg-white);
    border: 1px solid var(--border-hairline-strong);
    border-radius: 3px;
    padding-inline: clamp(1.25rem, 2.5vw, 1.85rem);
    box-shadow: var(--shadow-subtle);
    transition:
      box-shadow var(--duration-fast) ease,
      border-color var(--duration-fast) ease,
      transform var(--duration-fast) var(--ease-editorial);
  }

  .faq-item:hover {
    box-shadow: var(--shadow-card);
  }

  .faq-item[open] {
    border-left: 4px solid var(--bordeaux-primary);
    box-shadow: var(--shadow-card);
  }

  .faq-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: 1.45rem;
    padding-right: 0.35rem;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-anthracite);
    cursor: pointer;
    transition: color var(--duration-fast) ease;
  }

  .faq-summary::-webkit-details-marker {
    display: none;
  }

  .faq-summary:hover {
    color: var(--bordeaux-primary);
  }

  .faq-icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--border-hairline-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    color: var(--bordeaux-primary);
    transition: transform var(--duration-fast) var(--ease-editorial), background-color var(--duration-fast) ease;
  }

  .faq-item[open] .faq-icon {
    transform: rotate(45deg);
    background-color: var(--bordeaux-primary);
    border-color: var(--bordeaux-primary);
    color: var(--bg-white);
  }

  .faq-answer {
    padding-bottom: 1.65rem;
    padding-right: var(--space-6);
    color: var(--text-graphite);
    font-size: var(--text-base);
    line-height: 1.68;
  }

  @media (max-width: 900px) {
    .faq-intro,
    .faq-list {
      grid-column: 1 / -1;
    }
  }

  /* ==========================================================================
     9. CONTATTI & CONVERSIONE (CAP. 30, 39)
     ========================================================================== */
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(2rem, 4.5vw, 4rem);
    align-items: start;
  }

  .contact-editorial {
    grid-column: 1 / 6;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .contact-channels {
    margin-top: var(--space-3);
    border-top: 1px solid var(--border-hairline-strong);
  }

  .contact-channel {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .contact-channel__label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bordeaux-primary);
  }

  .contact-channel__value {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-anthracite);
  }

  .contact-channel__placeholder {
    font-size: var(--text-xs);
    color: var(--text-silver-dark);
  }

  .contact-form-card {
    grid-column: 6 / 13;
    background-color: var(--bg-white);
    border: 1px solid var(--border-hairline-strong);
    border-top: 4px solid var(--bordeaux-primary);
    border-radius: 3px;
    padding: clamp(1.75rem, 4vw, 3.25rem);
    box-shadow:
      0 10px 24px -4px rgba(20, 19, 20, 0.08),
      0 32px 64px -12px rgba(20, 19, 20, 0.16);
  }

  .contact-form__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
  }

  .contact-form__subtitle {
    font-size: var(--text-sm);
    color: var(--text-graphite);
    margin-bottom: var(--space-6);
  }

  .form-field {
    margin-bottom: var(--space-5);
    display: flex;
    flex-direction: column;
  }

  .form-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-anthracite);
    margin-bottom: 0.35rem;
  }

  .form-hint {
    font-size: 0.8125rem;
    color: var(--text-silver-dark);
    margin-bottom: 0.45rem;
  }

  .form-control {
    width: 100%;
    padding: 0.85rem 1rem;
    background-color: var(--bg-ivory);
    border: 1px solid var(--border-hairline-strong);
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(20, 19, 20, 0.04) inset;
    font-size: var(--text-base);
    color: var(--text-anthracite);
    transition:
      border-color var(--duration-fast) ease,
      background-color var(--duration-fast) ease,
      box-shadow var(--duration-fast) ease;
  }

  .form-control:focus {
    background-color: var(--bg-white);
    border-color: var(--bordeaux-primary);
    box-shadow: 0 0 0 3px rgba(140, 5, 30, 0.12), 0 2px 6px rgba(20, 19, 20, 0.05);
    outline: none;
  }

  textarea.form-control {
    min-height: 8.5rem;
    resize: vertical;
  }

  /* Post-interaction validation (:user-invalid + fallback) */
  .form-control:user-invalid,
  .form-control.user-invalid-fallback {
    border-color: var(--status-error);
    background-color: var(--status-error-bg);
  }

  .form-control:user-valid,
  .form-control.user-valid-fallback {
    border-color: var(--status-valid);
  }

  .field-error {
    display: none;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--status-error);
  }

  .form-control:user-invalid + .field-error,
  .form-control.user-invalid-fallback + .field-error {
    display: block;
  }

  .form-privacy-note {
    background-color: var(--bg-stone);
    padding: var(--space-3) var(--space-4);
    font-size: 0.8125rem;
    color: var(--text-graphite);
    margin-bottom: var(--space-5);
    border-left: 2px solid var(--text-silver-dark);
  }

  .checkbox-field {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    margin-bottom: var(--space-6);
  }

  .checkbox-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    accent-color: var(--bordeaux-primary);
    cursor: pointer;
  }

  .checkbox-label {
    font-size: var(--text-sm);
    color: var(--text-graphite);
    line-height: 1.5;
  }

  .checkbox-label a,
  .inline-link {
    color: var(--bordeaux-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  .form-feedback {
    margin-top: var(--space-5);
    padding: var(--space-4);
    background-color: var(--bordeaux-tint);
    border: 1px solid var(--bordeaux-primary);
    color: var(--bordeaux-deep);
    font-size: var(--text-sm);
    display: none;
  }

  .form-feedback.is-visible {
    display: block;
  }

  @media (max-width: 960px) {
    .contact-editorial,
    .contact-form-card {
      grid-column: 1 / -1;
    }
  }

  /* ==========================================================================
     10. FOOTER (CAP. 45)
     ========================================================================== */
  .site-footer {
    background-color: var(--bg-anthracite);
    color: var(--text-on-dark);
    border-top: 3px solid var(--bordeaux-primary);
    padding-top: clamp(3.5rem, 6vw, 5.5rem);
    padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  }

  .footer-top {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    border-bottom: 1px solid var(--border-on-dark);
  }

  .footer-brand {
    grid-column: 1 / 6;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .footer-logo-frame {
    display: inline-block;
    background-color: var(--bg-logo-match);
    padding: 0.75rem 1rem;
    border-radius: 2px;
    max-width: 15.5rem;
    border: 1px solid var(--border-hairline-strong);
  }

  .footer-logo-img {
    width: 100%;
    height: auto;
  }

  .footer-quote {
    font-family: var(--font-serif);
    font-size: var(--text-md);
    font-style: italic;
    color: #F4C2CC;
    line-height: 1.4;
    max-width: 40ch;
  }

  .footer-nav-col {
    grid-column: 6 / 9;
  }

  .footer-info-col {
    grid-column: 9 / 13;
  }

  .footer-col-title {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #E8A5B2;
    margin-bottom: var(--space-4);
  }

  .footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .footer-links a,
  .footer-links button {
    font-size: var(--text-sm);
    color: var(--text-on-dark-muted);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    padding: 0;
    transition: color var(--duration-fast) ease;
  }

  .footer-links a:hover,
  .footer-links button:hover {
    color: var(--bg-white);
  }

  .footer-meta-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: var(--text-sm);
    color: var(--text-on-dark-muted);
  }

  .footer-bottom {
    padding-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-silver-light);
  }

  @media (max-width: 900px) {
    .footer-brand {
      grid-column: 1 / -1;
    }
    .footer-nav-col {
      grid-column: 1 / 7;
    }
    .footer-info-col {
      grid-column: 7 / 13;
    }
  }

  @media (max-width: 560px) {
    .footer-nav-col,
    .footer-info-col {
      grid-column: 1 / -1;
    }
  }

  /* Privacy Dialog */
  .privacy-dialog {
    margin: auto;
    max-width: 680px;
    width: 92vw;
    max-height: 85vh;
    background-color: var(--bg-white);
    color: var(--text-anthracite);
    border: 1px solid var(--border-hairline-strong);
    border-top: 4px solid var(--bordeaux-primary);
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
  }

  .privacy-dialog::backdrop {
    background-color: rgba(18, 17, 18, 0.72);
    backdrop-filter: blur(3px);
  }

  .privacy-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
  }

  .privacy-dialog__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-graphite);
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 0.5rem;
  }
}