/* ============================================================================
   Lex Casino — foglio di stile unico del sito.
   Ordine: caratteri → token → base → accessibilità → contenitori → blocchi
   → adattamento (desktop-first).
   ========================================================================== */

/* --- caratteri auto-ospitati ---------------------------------------------- */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/typeset/oswald-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/typeset/oswald-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/typeset/oswald-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/typeset/oswald-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/typeset/roboto-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/typeset/roboto-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/typeset/roboto-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/typeset/roboto-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/typeset/roboto-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/typeset/roboto-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

/* --- token della sistema di design ---------------------------------------- */
:root {
  /* colori: valori .final della spec, già spostati di ±2% */
  --color-main: #ca903c;
  --color-pop: #f1d26e;
  --color-accent-strong: #ecc94a;
  --color-ground: #1a1a1a;
  --color-above: #232323;
  --color-text: #ffffff;
  --color-text-muted: #bfbebe;
  --color-rule: #343230;
  --color-rule-bold: #4c4842;
  --color-ramp-start: #fcf6e1;
  --color-ramp-end: #f6e8a0;
  --color-advisory: #b91c1c;

  /* passo verticale e orizzontale */
  --space-step-0: 5px;
  --space-step-1: 10px;
  --space-step-2: 15px;
  --space-step-3: 25px;
  --space-step-4: 40px;
  --space-step-5: 60px;
  --space-step-6: 90px;
  --space-step-7: 140px;

  /* geometria */
  --corner-step-0: 2px;
  --corner-step-1: 4px;
  --corner-step-2: 10px;
  --corner-step-3: 16px;
  --corner-step-4: 28px;
  --corner-step-5: 34px;
  --corner-stadium: 9999px;
  --corner-circle: 50%;
  --outline-hair: 1px;
  --outline-regular: 2px;
  --outline-bold: 3px;
  --depth-step-1: 0 2px 4px rgba(0, 0, 0, 0.32);
  --depth-step-2: 0 4px 10px rgba(0, 0, 0, 0.34);
  --depth-step-3: 0 10px 28px rgba(0, 0, 0, 0.4);
  --depth-step-4: 0 20px 48px rgba(0, 0, 0, 0.46);

  /* tipografia */
  --face-lead: 'Oswald', 'Arial Narrow', sans-serif;
  --face-reading: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --scale-h1: clamp(30px, 5.4vw, 58px);
  --scale-h2: clamp(24px, 3.2vw, 36px);
  --scale-lg-2: clamp(19px, 1.6vw, 23px);
  --scale-display-4: 20px;
  --scale-h5: 18px;
  --scale-xs-2: 15px;
  --scale-copy: 17px;
  --scale-fine: 15px;
  --scale-mini: 13px;
  --line-close: 1.12;
  --line-normal: 1.6;
  --line-open: 1.78;
  --boldness-base: 400;
  --boldness-medium: 500;
  --boldness-heavy: 700;
  --spacing-packed: -0.01em;
  --spacing-default: 0;
  --spacing-open: 0.14em;

  /* contenitori */
  --wrap-max: 1140px;
  --wrap-column: 1140px;
  --wrap-padding-desktop: 48px;
  --wrap-padding-tablet: 24px;
  --wrap-padding-mobile: 16px;

  /* movimento: numeri della spec, non arrotondare */
  --beat-short: 150ms;
  --beat-steady: 310ms;
  --beat-long: 468ms;
  --easing-release: cubic-bezier(0.11, 0.75, 0.31, 0.94);
  --easing-swing: cubic-bezier(0.52, 0.11, 0.48, 1);
  --easing-pop: cubic-bezier(0.32, 1.45, 0.65, 1.1);
  --easing-take-off: cubic-bezier(0.66, 0.09, 0.84, 0.36);

  /* misure proprie della sborsa: prefisso del sito, non canoniche */
  --lex-head: 62px;
  --lex-sec-y: 40px;
  --lex-narrow: 440px;
  --lex-shell: calc(var(--wrap-max) + 2 * var(--wrap-padding-desktop));
}

/* --- base ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

html {
  scroll-padding-top: calc(var(--lex-head) + var(--space-step-3));
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-ground);
  color: var(--color-text);
  font-family: var(--face-reading);
  font-size: var(--scale-copy);
  line-height: var(--line-normal);
  font-weight: var(--boldness-base);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--face-lead);
  font-weight: var(--boldness-heavy);
  line-height: var(--line-close);
  letter-spacing: var(--spacing-packed);
  overflow-wrap: anywhere;
  margin: 0;
}

p {
  margin: 0;
}

img {
  max-width: 100%;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
}

button {
  font: inherit;
  cursor: pointer;
}

/* --- accessibilità -------------------------------------------------------- */
.skip-path {
  position: absolute;
  inset-inline-start: var(--space-step-2);
  z-index: 120;
  padding: var(--space-step-1) var(--space-step-3);
  border-radius: var(--corner-step-2);
  background-color: var(--color-pop);
  color: #1a1a1a;
  font-weight: var(--boldness-heavy);
  text-decoration: none;
}

.skip-path:not(:focus) {
  top: -200px;
}

.skip-path:focus {
  top: var(--space-step-2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: var(--outline-bold) solid var(--color-pop);
  outline-offset: 2px;
}

/* --- contenitori: tutte le fasce hanno la STESSA larghezza ---------------- */
.boxGrid-hold,
.chipPanel-hold,
.rayBunch-hold,
.streamBody-hold,
.hingeBody-hold,
.pinSlider-hold,
.spikeDisplay-hold,
.sectionModule-hold,
.vectorBlock-hold,
.knobPanel-hold,
.chamberBar-hold,
.nookRail-hold,
.bayBar-hold,
.flagModule-hold {
  display: block;
  width: 100%;
  max-width: calc(var(--wrap-max) + 2 * var(--wrap-padding-desktop));
  margin-inline: auto;
  padding-inline: var(--wrap-padding-desktop);
}

.coreLane {
  flex: 1 0 auto;
  display: block;
}

.coreLane-band {
  display: block;
  padding-block: var(--lex-sec-y) 0;
}

/* --- fascia 18+ (RG-04: banda scura con bordo colorato) ------------------- */
.beamRail {
  display: block;
  background-color: #241c14;
  border-block-start: var(--outline-bold) solid var(--color-advisory);
  text-align: center;
  padding: var(--space-step-1) var(--wrap-padding-mobile);
}

.beamRail-line {
  margin: 0;
  color: #ffffff;
  background-color: #241c14;
  font-size: var(--scale-mini);
  line-height: 1.45;
}

.beamRail-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 20px;
  margin-inline-end: var(--space-step-0);
  border-radius: var(--corner-step-1);
  background-color: var(--color-advisory);
  color: #ffffff;
  font-family: var(--face-lead);
  font-weight: var(--boldness-heavy);
  font-size: var(--scale-mini);
}

.beamRail-path {
  color: var(--color-pop);
  background-color: #241c14;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-advisory);
  text-decoration-thickness: 2px;
}

.beamRail-path:hover {
  color: var(--color-accent-strong);
  background-color: #241c14;
}

/* --- testata HEAD-OVER: trasparente sopra il primo schermo ---------------- */
.padList {
  position: sticky;
  top: 0;
  z-index: 60;
  margin-block-end: calc(var(--lex-head) * -1);
  background-color: rgba(26, 26, 26, 0);
  color: #ffffff;
  transition: background-color var(--beat-steady) var(--easing-release),
    backdrop-filter var(--beat-steady) var(--easing-release);
}

.padList.is-stuck {
  background-color: rgba(26, 26, 26, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: var(--depth-step-3);
}

body[data-kind='legal'] .padList,
body[data-kind='error'] .padList {
  background-color: #1a1a1a;
}

.padList-tier {
  display: flex;
  align-items: center;
  gap: var(--space-step-3);
  height: 62px;
  min-height: 62px;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--space-step-4);
}

.padList-emblem {
  display: inline-flex;
  align-items: center;
  gap: var(--space-step-1);
  flex-shrink: 0;
  text-decoration: none;
}

.padList-emblem-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--corner-circle);
  border: var(--outline-hair) solid var(--color-main);
  background-color: #1f1a12;
  overflow: hidden;
}

.padList-emblem-plate img {
  width: 26px;
  height: 26px;
  border-radius: var(--corner-step-1);
}

.padList-emblem-visual {
  display: block;
  width: auto;
  height: 32px;
}

.padList-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 44px;
  padding: 0 11px;
  border: var(--outline-hair) solid var(--color-rule-bold);
  border-radius: var(--corner-step-2);
  background-color: #1f1f1f;
  color: #ffffff;
}

.padList-lines {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: var(--corner-stadium);
  background-color: var(--color-pop);
  transition: transform var(--beat-short) var(--easing-release), opacity var(--beat-short) linear;
}

.padList-toggle[aria-expanded='true'] .padList-lines:nth-child(1) {
  transform: translateY(3px) rotate(45deg);
}

.padList-toggle[aria-expanded='true'] .padList-lines:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

.padList-routes {
  flex: 0 1 auto;
  min-width: 0;
  margin-inline-start: auto;
}

.padList-chain {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-step-2);
  list-style: none;
}

.padList-node {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.padList-node[hidden] {
  display: none;
}

.padList-node + .padList-node::before {
  content: '/';
  margin-inline-end: var(--space-step-2);
  color: var(--color-rule-bold);
  background-color: rgba(26, 26, 26, 0);
  font-size: var(--scale-fine);
}

.padList-path {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-step-1);
  border-radius: var(--corner-stadium);
  background-color: rgba(26, 26, 26, 0);
  color: #ffffff;
  font-family: var(--face-lead);
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--beat-short) var(--easing-release), color var(--beat-short) linear;
}

.padList-path:hover {
  transform: translateY(-2px);
  background-color: rgba(26, 26, 26, 0);
  color: var(--color-pop);
}

.padList-path.is-here {
  background-color: #302b22;
  color: var(--color-pop);
}

.padList-more {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.padList-more[hidden] {
  display: none;
}

.padList-more-opener {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--outline-hair) solid var(--color-rule-bold);
  border-radius: var(--corner-step-2);
  background-color: #1f1f1f;
  color: #ffffff;
}

.padList-more-dot {
  position: relative;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: var(--corner-circle);
  background-color: var(--color-pop);
}

.padList-more-dot::before,
.padList-more-dot::after {
  content: '';
  position: absolute;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: var(--corner-circle);
  background-color: var(--color-pop);
}

.padList-more-dot::before {
  inset-inline-start: -7px;
}

.padList-more-dot::after {
  inset-inline-start: 7px;
}

.padList-more-pane {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 70;
  display: none;
  min-width: 210px;
  max-height: 66vh;
  overflow-y: auto;
  padding: var(--space-step-1);
  border: var(--outline-hair) solid var(--color-rule);
  border-radius: var(--corner-step-3);
  background-color: #1f1f1f;
  box-shadow: var(--depth-step-4);
  list-style: none;
}

.padList-more-pane.is-open {
  display: block;
}

.padList-more-pane .padList-node {
  display: block;
}

.padList-more-pane .padList-node::before {
  content: none;
}

.padList-more-pane .padList-path {
  display: flex;
  width: 100%;
  border-radius: var(--corner-step-2);
  padding: 0 var(--space-step-2);
}

.padList-bar {
  display: flex;
  align-items: center;
  gap: var(--space-step-1);
  flex-shrink: 0;
  margin-inline-start: var(--space-step-1);
}

.padList-quietkey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-step-3);
  border: var(--outline-regular) solid var(--color-main);
  border-radius: var(--corner-step-3);
  background-color: #1f1a12;
  color: var(--color-pop);
  font-family: var(--face-lead);
  font-size: var(--scale-fine);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.padList-quietkey:hover {
  background-color: #2b2419;
  color: var(--color-accent-strong);
}

.padList-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}

.padList-slide {
  display: none;
  border-block-start: var(--outline-hair) solid var(--color-rule);
  background-color: #1c1c1c;
  padding: var(--space-step-2) var(--space-step-4) var(--space-step-3);
}

.padList-slide.is-open {
  display: block;
}

.padList-slide-chain {
  display: flex;
  flex-direction: column;
  gap: var(--space-step-0);
  list-style: none;
}

.padList-slide-node {
  display: block;
}

.padList-slide-path {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 var(--space-step-2);
  border-radius: var(--corner-step-2);
  background-color: #1c1c1c;
  color: #ffffff;
  font-family: var(--face-lead);
  font-size: var(--scale-h5);
  font-weight: 600;
  text-decoration: none;
}

.padList-slide-path:hover {
  background-color: #2a2a2a;
  color: var(--color-pop);
}

/* --- primo schermo HERO-08 «copertina da rivista» ------------------------- */
.boxGrid {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(560px, 100vh, 780px);
  background-color: #1a1a1a;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.28) 30%, rgba(0, 0, 0, 0.88) 100%),
    url('/photography/masthead-light.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  overflow: hidden;
}

body[data-kind='content'] .boxGrid,
body[data-kind='author'] .boxGrid {
  min-height: clamp(420px, 64vh, 540px);
}

.boxGrid-hold {
  padding-block: calc(var(--lex-head) + var(--space-step-4)) var(--space-step-6);
}

.boxGrid-eye {
  display: inline-block;
  margin-block-end: var(--space-step-2);
  color: var(--color-pop);
  background-color: rgba(26, 26, 26, 0);
  font-family: var(--face-lead);
  font-size: var(--scale-mini);
  font-weight: 600;
  letter-spacing: var(--spacing-open);
  text-transform: uppercase;
}

.boxGrid-lede {
  max-width: 900px;
  margin-inline: auto;
  color: #ffffff;
  font-size: var(--scale-h1);
}

.boxGrid-lead {
  max-width: 620px;
  margin-block-start: var(--space-step-3);
  margin-inline: auto;
  color: #f0efee;
  background-color: rgba(26, 26, 26, 0);
  font-size: var(--scale-h5);
  line-height: var(--line-normal);
}

.boxGrid-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-step-2);
  margin-block-start: var(--space-step-3);
}

.boxGrid-detail-node {
  position: relative;
  color: #e2e0dd;
  background-color: rgba(26, 26, 26, 0);
  font-size: var(--scale-mini);
  letter-spacing: var(--spacing-open);
  text-transform: uppercase;
}

.boxGrid-detail-node + .boxGrid-detail-node::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--space-step-1) * -1);
  top: 3px;
  bottom: 3px;
  width: 1px;
  background-color: var(--color-rule-bold);
}

.boxGrid-hint {
  position: absolute;
  inset-block-end: var(--space-step-3);
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.boxGrid-hint-word {
  color: #e2e0dd;
  background-color: rgba(26, 26, 26, 0);
  font-family: var(--face-lead);
  font-size: var(--scale-mini);
  letter-spacing: var(--spacing-open);
  text-transform: uppercase;
}

.boxGrid-hint-arrow {
  display: block;
  width: 11px;
  height: 11px;
  border-inline-end: var(--outline-regular) solid var(--color-pop);
  border-block-end: var(--outline-regular) solid var(--color-pop);
  transform: rotate(45deg);
  animation: lexNudge calc(var(--beat-long) * 4) var(--easing-swing) infinite;
}

@keyframes lexNudge {
  0%,
  100% {
    transform: rotate(45deg) translate(0, 0);
  }
  50% {
    transform: rotate(45deg) translate(4px, 4px);
  }
}

/* --- testata di pagina PHEAD-03 «blocco grande» --------------------------- */
.spikeDisplay {
  display: block;
  background-color: #ca903c;
  padding-block: calc(var(--lex-head) + var(--space-step-3)) var(--lex-sec-y);
}

.spikeDisplay-eye {
  display: inline-block;
  margin-block-end: var(--space-step-1);
  color: #3a2c14;
  background-color: #ca903c;
  font-family: var(--face-lead);
  font-size: var(--scale-mini);
  font-weight: 600;
  letter-spacing: var(--spacing-open);
  text-transform: uppercase;
}

.spikeDisplay-lede {
  color: #191512;
  font-size: clamp(32px, 5.6vw, 60px);
}

.spikeDisplay-lead {
  max-width: 760px;
  margin-block-start: var(--space-step-2);
  color: #2c2115;
  background-color: #ca903c;
  font-size: var(--scale-h5);
}

/* --- testo PROSE-12: numero grande a sinistra del titolo ------------------ */
.chipPanel {
  display: block;
  background-color: var(--color-ground);
  padding-block: var(--lex-sec-y);
}

.chipPanel-hold {
  counter-reset: lexpart;
}

.chipPanel-part {
  counter-increment: lexpart;
  padding-block-start: var(--space-step-4);
}

.chipPanel-part:first-child {
  padding-block-start: 0;
}

.chipPanel-lede {
  display: flex;
  align-items: baseline;
  gap: var(--space-step-3);
  margin-block-end: var(--space-step-3);
  color: #ffffff;
  background-color: var(--color-ground);
  font-size: var(--scale-h2);
}

.chipPanel-lede::before {
  content: counter(lexpart);
  flex-shrink: 0;
  color: var(--color-main);
  font-family: var(--face-lead);
  font-size: 54px;
  font-weight: var(--boldness-heavy);
  line-height: 0.86;
}

.chipPanel-para {
  margin-block-end: var(--space-step-3);
  color: var(--color-text-muted);
  background-color: var(--color-ground);
  line-height: var(--line-open);
}

.chipPanel-para strong {
  color: #ffffff;
}

.chipPanel-para a,
.chipPanel-chain a,
.chipPanel-chain-step a {
  position: relative;
  color: var(--color-pop);
  background-color: var(--color-ground);
  text-decoration: none;
}

.chipPanel-para a::after,
.chipPanel-chain a::after,
.chipPanel-chain-step a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -2px;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transition: transform var(--beat-short) var(--easing-release);
}

.chipPanel-para a:hover,
.chipPanel-chain a:hover,
.chipPanel-chain-step a:hover {
  color: var(--color-accent-strong);
  background-color: var(--color-ground);
}

.chipPanel-para a:hover::after,
.chipPanel-chain a:hover::after,
.chipPanel-chain-step a:hover::after {
  transform: scaleX(1);
}

.chipPanel-chain {
  margin-block-end: var(--space-step-3);
  padding-inline-start: var(--space-step-3);
  list-style: none;
  color: var(--color-text-muted);
  background-color: var(--color-ground);
  line-height: var(--line-open);
}

.chipPanel-chain li {
  position: relative;
  padding-inline-start: var(--space-step-3);
  margin-block-end: var(--space-step-1);
}

.chipPanel-chain li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: var(--corner-step-0);
  background-color: var(--color-main);
}

.chipPanel-chain-step {
  counter-reset: lexstep;
  margin-block-end: var(--space-step-3);
  padding-inline-start: var(--space-step-3);
  list-style: none;
  color: var(--color-text-muted);
  background-color: var(--color-ground);
  line-height: var(--line-open);
}

.chipPanel-chain-step li {
  position: relative;
  counter-increment: lexstep;
  padding-inline-start: var(--space-step-4);
  margin-block-end: var(--space-step-2);
}

.chipPanel-chain-step li::before {
  content: counter(lexstep) '.';
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-main);
  background-color: var(--color-ground);
  font-family: var(--face-lead);
  font-weight: var(--boldness-heavy);
}

.chipPanel-shot {
  display: block;
  margin: 0 0 var(--space-step-3);
  border-radius: var(--corner-step-4);
  overflow: hidden;
  background-color: var(--color-above);
}

.chipPanel-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.chipPanel-shot-wide {
  height: 420px;
}

.chipPanel-shot-tall {
  max-width: 420px;
  height: 470px;
  margin-inline: auto;
}

/* le immagini quadrate del pacchetto sono spesso infografiche con testo:
   ritagliarle taglia una riga, quindi restano intere */
.chipPanel-shot-square {
  max-width: 520px;
  margin-inline: auto;
}

.chipPanel-shot-square img {
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* --- richiamo INLINE-CTA-02 «scheda centrata» ----------------------------- */
.bayBar {
  display: block;
  padding-block: var(--space-step-3);
}

.bayBar-slab {
  max-width: 640px;
  margin-inline: auto;
  padding: var(--space-step-4);
  border: var(--outline-hair) solid var(--color-rule-bold);
  border-radius: var(--corner-step-3);
  background-color: var(--color-above);
  text-align: center;
}

.bayBar-lede {
  margin-block-end: var(--space-step-1);
  color: #ffffff;
  background-color: var(--color-above);
  font-family: var(--face-lead);
  font-size: var(--scale-display-4);
  font-weight: var(--boldness-heavy);
}

.bayBar-para {
  margin-block-end: var(--space-step-3);
  color: var(--color-text-muted);
  background-color: var(--color-above);
  font-size: var(--scale-fine);
}

.bayBar-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  text-decoration: none;
}

.bayBar-fine {
  display: block;
  margin-block-start: var(--space-step-2);
  color: #a3a1a0;
  background-color: var(--color-above);
  font-size: var(--scale-mini);
  line-height: 1.5;
}

/* --- schede GRID-07 «stile articolo» -------------------------------------- */
.rayBunch {
  display: block;
  background-color: var(--color-ground);
  padding-block: var(--lex-sec-y);
}

.rayBunch-lede-top {
  margin-block-end: var(--space-step-4);
  color: #ffffff;
  background-color: var(--color-ground);
  font-size: var(--scale-h2);
}

.rayBunch-chain {
  display: flex;
  flex-direction: column;
  gap: var(--space-step-4);
}

.rayBunch-node {
  display: block;
}

.rayBunch-lede {
  position: relative;
  padding-block-end: var(--space-step-2);
  color: #ffffff;
  background-color: var(--color-ground);
  font-size: var(--scale-lg-2);
}

.rayBunch-lede::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 60px;
  height: 2px;
  background-color: var(--color-main);
}

.rayBunch-para {
  margin-block-start: var(--space-step-2);
  color: var(--color-text-muted);
  background-color: var(--color-ground);
  line-height: var(--line-open);
}

/* --- tabella TABLE-04 «prima colonna evidenziata» ------------------------- */
.flagModule {
  display: block;
  background-color: var(--color-ground);
  padding-block: var(--lex-sec-y);
}

.flagModule-lede {
  margin-block-end: var(--space-step-1);
  color: #ffffff;
  background-color: var(--color-ground);
  font-size: var(--scale-h2);
}

.flagModule-cap {
  margin-block-end: var(--space-step-3);
  color: var(--color-text-muted);
  background-color: var(--color-ground);
  font-size: var(--scale-fine);
}

.flagModule-scroll {
  display: block;
  border-radius: var(--corner-step-3);
  overflow: hidden;
  border: var(--outline-hair) solid var(--color-rule);
}

.flagModule-grid {
  width: 100%;
  table-layout: fixed;
}

.flagModule-grid th[scope='col'] {
  padding: var(--space-step-2) var(--space-step-3);
  background-color: #ca903c;
  color: #191512;
  font-family: var(--face-lead);
  font-size: var(--scale-fine);
  letter-spacing: var(--spacing-open);
  text-align: start;
  text-transform: uppercase;
}

.flagModule-grid th[scope='col']:not(:first-child) {
  background-color: #a9762c;
  color: #ffffff;
}

.flagModule-grid th[scope='row'] {
  width: 26%;
  padding: var(--space-step-2) var(--space-step-3);
  border-inline-end: var(--outline-bold) solid var(--color-pop);
  background-color: #ca903c;
  color: #191512;
  font-family: var(--face-reading);
  font-weight: var(--boldness-heavy);
  font-size: var(--scale-fine);
  text-align: start;
}

.flagModule-grid td {
  padding: var(--space-step-2) var(--space-step-3);
  border-block-start: var(--outline-hair) solid var(--color-rule);
  background-color: var(--color-above);
  color: var(--color-text-muted);
  font-size: var(--scale-fine);
}

/* --- opinioni REV-08 «schede con iniziale» -------------------------------- */
.streamBody {
  display: block;
  background-color: var(--color-ground);
  padding-block: var(--lex-sec-y);
}

.streamBody-lede {
  margin-block-end: var(--space-step-4);
  color: #ffffff;
  background-color: var(--color-ground);
  font-size: var(--scale-h2);
}

.streamBody-chain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-step-3);
  align-items: start;
}

.streamBody-slab {
  display: flex;
  flex-direction: column;
  gap: var(--space-step-2);
  padding: var(--space-step-3);
  border: var(--outline-hair) solid var(--color-rule);
  border-radius: var(--corner-step-4);
  background-color: var(--color-above);
}

.streamBody-tier {
  display: flex;
  align-items: center;
  gap: var(--space-step-2);
}

.streamBody-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--corner-circle);
  background-color: var(--color-pop);
  color: #1a1a1a;
  font-family: var(--face-lead);
  font-size: var(--scale-h5);
  font-weight: var(--boldness-heavy);
}

.streamBody-who {
  display: flex;
  flex-direction: column;
}

.streamBody-person {
  color: #ffffff;
  background-color: var(--color-above);
  font-family: var(--face-lead);
  font-size: var(--scale-h5);
  font-weight: 600;
}

.streamBody-on {
  color: #a3a1a0;
  background-color: var(--color-above);
  font-size: var(--scale-mini);
}

.streamBody-rate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  align-self: flex-start;
}

.streamBody-star {
  color: var(--color-accent-strong);
  background-color: var(--color-above);
  letter-spacing: 1px;
}

.streamBody-star-off {
  color: #8f8d8a;
  background-color: var(--color-above);
  letter-spacing: 1px;
}

.streamBody-score {
  color: var(--color-text-muted);
  background-color: var(--color-above);
  font-size: var(--scale-mini);
}

.streamBody-para {
  margin: 0;
  color: var(--color-text-muted);
  background-color: var(--color-above);
  font-size: var(--scale-fine);
  line-height: var(--line-normal);
}

/* --- richiamo CTA-03 «due colonne: testo + pannello» ---------------------- */
.hingeBody {
  display: block;
  background-color: var(--color-ground);
  padding-block: var(--lex-sec-y);
}

.hingeBody-hold {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
}

.hingeBody-matter {
  padding: var(--space-step-5) var(--space-step-4);
  border: var(--outline-hair) solid var(--color-rule);
  border-inline-end: 0;
  border-radius: var(--corner-step-4) 0 0 var(--corner-step-4);
  background-color: var(--color-above);
}

.hingeBody-eye {
  display: inline-block;
  margin-block-end: var(--space-step-1);
  color: var(--color-pop);
  background-color: var(--color-above);
  font-family: var(--face-lead);
  font-size: var(--scale-mini);
  letter-spacing: var(--spacing-open);
  text-transform: uppercase;
}

.hingeBody-lede {
  color: #ffffff;
  background-color: var(--color-above);
  font-size: var(--scale-h2);
}

.hingeBody-para {
  margin-block: var(--space-step-3);
  color: var(--color-text-muted);
  background-color: var(--color-above);
  line-height: var(--line-open);
}

.hingeBody-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  text-decoration: none;
}

.hingeBody-fine {
  display: block;
  margin-block-start: var(--space-step-2);
  color: #a3a1a0;
  background-color: var(--color-above);
  font-size: var(--scale-mini);
  line-height: 1.5;
}

.hingeBody-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-step-3);
  min-height: 400px;
  padding: var(--space-step-4);
  border-radius: 0 var(--corner-step-4) var(--corner-step-4) 0;
  background-color: #f1d26e;
}

.hingeBody-figure {
  display: block;
  color: #191512;
  background-color: #f1d26e;
  font-family: var(--face-lead);
  font-size: clamp(52px, 7vw, 90px);
  font-weight: var(--boldness-heavy);
  line-height: 1;
  text-align: center;
}

.hingeBody-chain {
  display: flex;
  flex-direction: column;
  gap: var(--space-step-1);
  list-style: none;
}

.hingeBody-node {
  display: flex;
  align-items: flex-start;
  gap: var(--space-step-1);
  color: #221a0d;
  background-color: #f1d26e;
  font-size: var(--scale-fine);
  line-height: 1.45;
}

.hingeBody-node svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-block-start: 2px;
  fill: none;
  stroke: #191512;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- domande FAQ-05 «details nativo» -------------------------------------- */
.pinSlider {
  display: block;
  background-color: var(--color-ground);
  padding-block: var(--lex-sec-y);
}

.pinSlider-lede {
  margin-block-end: var(--space-step-3);
  color: #ffffff;
  background-color: var(--color-ground);
  font-size: var(--scale-h2);
}

.pinSlider-chain {
  list-style: none;
}

.pinSlider-node {
  display: block;
  border-block-end: var(--outline-hair) solid var(--color-rule);
}

.pinSlider-slot {
  display: block;
  padding-block: var(--space-step-3);
}

.pinSlider-ask {
  display: block;
  cursor: pointer;
  list-style: none;
}

.pinSlider-ask::-webkit-details-marker {
  display: none;
}

.pinSlider-ask-lede {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-step-2);
  color: #ffffff;
  background-color: var(--color-ground);
  font-family: var(--face-reading);
  font-size: var(--scale-h5);
  font-weight: var(--boldness-heavy);
  line-height: 1.4;
}

.pinSlider-ask-lede::after {
  content: '';
  width: 11px;
  height: 11px;
  border-inline-end: var(--outline-regular) solid var(--color-main);
  border-block-end: var(--outline-regular) solid var(--color-main);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--beat-steady) var(--easing-release);
}

.pinSlider-ask:hover .pinSlider-ask-lede {
  color: var(--color-pop);
  background-color: var(--color-ground);
}

.pinSlider-slot[open] .pinSlider-ask-lede::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.pinSlider-say {
  padding-block-start: var(--space-step-2);
  animation: lexOpen var(--beat-steady) var(--easing-release) both;
}

.pinSlider-para {
  color: var(--color-text-muted);
  background-color: var(--color-ground);
  line-height: var(--line-open);
}

@keyframes lexOpen {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- pagine legali LEGAL-08 «minimale» ------------------------------------ */
.sectionModule {
  display: block;
  background-color: var(--color-ground);
  padding-block: var(--lex-sec-y);
}

.sectionModule-part {
  display: block;
  margin-block-end: var(--space-step-4);
}

.sectionModule-lede {
  margin-block-end: var(--space-step-2);
  color: #ffffff;
  background-color: var(--color-ground);
  font-family: var(--face-reading);
  font-size: var(--scale-lg-2);
  font-weight: var(--boldness-heavy);
}

.sectionModule-para {
  margin-block-end: var(--space-step-2);
  color: var(--color-text-muted);
  background-color: var(--color-ground);
  line-height: var(--line-open);
}

.sectionModule-chain {
  padding-inline-start: var(--space-step-3);
  list-style: none;
  color: var(--color-text-muted);
  background-color: var(--color-ground);
  line-height: var(--line-open);
}

.sectionModule-chain li {
  position: relative;
  padding-inline-start: var(--space-step-3);
  margin-block-end: var(--space-step-1);
}

.sectionModule-chain li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: var(--corner-circle);
  background-color: var(--color-main);
}

.sectionModule-fine {
  display: block;
  margin-block-end: var(--space-step-3);
  color: #a3a1a0;
  background-color: var(--color-ground);
  line-height: var(--line-normal);
}

.sectionModule-stamp {
  display: block;
  color: #a3a1a0;
  background-color: var(--color-ground);
  font-size: var(--scale-mini);
}

/* --- modulo FORM-07 «scheda scura con testa colorata» --------------------- */
.vectorBlock {
  display: block;
  background-color: var(--color-ground);
  padding-block: var(--lex-sec-y);
}

.vectorBlock-slab {
  border-radius: var(--corner-step-4);
  overflow: hidden;
  border: var(--outline-hair) solid var(--color-rule);
  background-color: var(--color-above);
  padding: var(--space-step-4);
  border-block-start: 8px solid var(--color-main);
}

.vectorBlock-para {
  margin-block-end: var(--space-step-3);
  color: var(--color-text-muted);
  background-color: var(--color-above);
  line-height: var(--line-open);
}

.vectorBlock-form {
  display: block;
}

.vectorBlock-line {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block-end: var(--space-step-3);
}

.vectorBlock-cap {
  color: #ffffff;
  background-color: var(--color-above);
  font-size: var(--scale-fine);
  font-weight: var(--boldness-medium);
}

.vectorBlock-control {
  width: 100%;
  padding: var(--space-step-1) var(--space-step-2);
  border: var(--outline-hair) solid var(--color-rule-bold);
  border-radius: var(--corner-step-3);
  background-color: #171717;
  color: #ffffff;
  font-family: var(--face-reading);
  font-size: var(--scale-copy);
  min-height: 46px;
}

.vectorBlock-control:focus {
  border-color: var(--color-main);
  outline: none;
}

.vectorBlock-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 48px;
  margin-inline: auto;
  padding: 0 var(--space-step-4);
  border: 0;
  border-radius: var(--corner-step-3);
  background-color: var(--color-pop);
  background-image: linear-gradient(100deg, var(--color-pop) 40%, var(--color-ramp-start) 55%, var(--color-pop) 70%);
  background-size: 240% 100%;
  color: #1a1a1a;
  font-family: var(--face-lead);
  font-size: var(--scale-h5);
  font-weight: var(--boldness-heavy);
  transition: background-position var(--beat-steady) var(--easing-release);
}

.vectorBlock-send:hover {
  background-color: var(--color-accent-strong);
  background-position: 100% 0;
  color: #1a1a1a;
}

.vectorBlock-done {
  margin-block-start: var(--space-step-3);
  padding: var(--space-step-2) var(--space-step-3);
  border-radius: var(--corner-step-3);
  background-color: #1f2b1f;
  color: #bce3bc;
  font-size: var(--scale-fine);
}

.vectorBlock-chain {
  margin-block-start: var(--space-step-4);
  padding-block-start: var(--space-step-3);
  border-block-start: var(--outline-hair) solid var(--color-rule);
  list-style: none;
  color: var(--color-text-muted);
  background-color: var(--color-above);
  font-size: var(--scale-fine);
}

.vectorBlock-chain li {
  margin-block-end: var(--space-step-0);
}

.vectorBlock-chain a {
  color: var(--color-pop);
  background-color: var(--color-above);
}

.vectorBlock-chain a:hover {
  color: var(--color-accent-strong);
  background-color: var(--color-above);
}

/* --- scheda autrice AUTH-02 «verticale centrata» -------------------------- */
.chamberBar {
  display: block;
  background-color: var(--color-ground);
  padding-block: var(--lex-sec-y);
  text-align: center;
}

.chamberBar-frame {
  display: block;
  width: 140px;
  height: 140px;
  margin-inline: auto;
  margin-block-end: var(--space-step-4);
  border-radius: var(--corner-circle);
  overflow: hidden;
  border: var(--outline-regular) solid var(--color-main);
}

.chamberBar-face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 26%;
}

.chamberBar-hat {
  display: block;
  margin-block-end: var(--space-step-2);
  color: var(--color-pop);
  background-color: var(--color-ground);
  font-family: var(--face-lead);
  font-size: var(--scale-fine);
  letter-spacing: var(--spacing-open);
  text-transform: uppercase;
}

.chamberBar-para {
  max-width: 760px;
  margin-inline: auto;
  margin-block-end: var(--space-step-3);
  color: var(--color-text-muted);
  background-color: var(--color-ground);
  line-height: var(--line-open);
}

.chamberBar-chain {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-step-1);
  list-style: none;
}

.chamberBar-tag {
  padding: 6px var(--space-step-2);
  border: var(--outline-hair) solid var(--color-rule-bold);
  border-radius: var(--corner-stadium);
  background-color: var(--color-above);
  color: var(--color-text-muted);
  font-size: var(--scale-mini);
}

.chamberBar-works {
  margin-block-start: var(--space-step-4);
}

.chamberBar-works-lede {
  margin-block-end: var(--space-step-2);
  color: #ffffff;
  background-color: var(--color-ground);
  font-size: var(--scale-lg-2);
}

.chamberBar-works-chain {
  list-style: none;
  color: var(--color-text-muted);
  background-color: var(--color-ground);
}

.chamberBar-work {
  margin-block-end: var(--space-step-0);
  font-size: var(--scale-fine);
}

/* --- firma BYLINE-04 «citazione redazionale» ------------------------------ */
.nookRail {
  display: block;
  background-color: var(--color-ground);
  padding-block: var(--space-step-5);
  border-block-start: var(--outline-hair) solid var(--color-rule);
}

.nookRail-quote {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
  padding-block-start: var(--space-step-4);
  text-align: center;
}

.nookRail-quote::before {
  content: '“';
  position: absolute;
  top: -14px;
  inset-inline: 0;
  color: var(--color-main);
  font-family: var(--face-lead);
  font-size: 62px;
  line-height: 1;
}

.nookRail-para {
  color: #ffffff;
  background-color: var(--color-ground);
  font-family: var(--face-lead);
  font-size: var(--scale-display-4);
  font-style: italic;
  line-height: 1.45;
}

.nookRail-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-step-1);
  margin-block-start: var(--space-step-3);
}

.nookRail-face {
  width: 32px;
  height: 32px;
  border-radius: var(--corner-circle);
  object-fit: cover;
  object-position: 38% 26%;
}

.nookRail-person {
  font-style: normal;
}

.nookRail-person a {
  color: var(--color-pop);
  background-color: var(--color-ground);
  font-weight: var(--boldness-heavy);
  text-decoration: none;
}

.nookRail-person a:hover {
  color: var(--color-accent-strong);
  background-color: var(--color-ground);
  text-decoration: underline;
}

.nookRail-hat {
  color: var(--color-text-muted);
  background-color: var(--color-ground);
  font-size: var(--scale-fine);
  font-style: italic;
}

.nookRail-on {
  flex-basis: 100%;
  color: #a3a1a0;
  background-color: var(--color-ground);
  font-size: var(--scale-mini);
}

/* --- pagina 404 ERR-07 «trama geometrica» --------------------------------- */
.knobPanel {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  background-color: var(--color-ground);
  background-image: linear-gradient(rgba(202, 144, 60, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(202, 144, 60, 0.09) 1px, transparent 1px);
  background-size: 40px 40px;
  padding-block: var(--space-step-6);
  text-align: center;
}

.coreLane:has(> .knobPanel) {
  display: flex;
  flex-direction: column;
}

.knobPanel-mark {
  display: block;
  color: var(--color-main);
  background-color: rgba(26, 26, 26, 0);
  font-family: var(--face-lead);
  font-size: clamp(64px, 16vw, 140px);
  font-weight: var(--boldness-heavy);
  line-height: 1;
}

.knobPanel-lede {
  max-width: var(--lex-narrow);
  margin-inline: auto;
  margin-block: var(--space-step-2);
  color: #ffffff;
  font-size: var(--scale-h2);
}

.knobPanel-para {
  max-width: 640px;
  margin-inline: auto;
  margin-block-end: var(--space-step-3);
  color: var(--color-text-muted);
  background-color: rgba(26, 26, 26, 0);
  line-height: var(--line-open);
}

.knobPanel-goto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-step-4);
  border-radius: var(--corner-step-3);
  background-color: var(--color-pop);
  color: #1a1a1a;
  font-family: var(--face-lead);
  font-weight: var(--boldness-heavy);
  text-decoration: none;
}

.knobPanel-goto:hover {
  background-color: var(--color-accent-strong);
  color: #1a1a1a;
}

/* --- avviso cookie COOK-11 «in linea sopra il piè di pagina» -------------- */
.moduleCarousel {
  display: none;
  max-width: calc(var(--wrap-max) + 2 * var(--wrap-padding-desktop));
  margin-inline: auto;
  margin-block-end: var(--lex-sec-y);
  padding-inline: var(--wrap-padding-desktop);
  opacity: 0;
  visibility: hidden;
  transform: translateX(0);
  transition: opacity var(--beat-long) var(--easing-release), transform var(--beat-long) var(--easing-swing);
}

.moduleCarousel.is-open {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.moduleCarousel.is-gone {
  opacity: 0;
  visibility: hidden;
  transform: translateX(120vw);
}

.moduleCarousel-slab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-step-4);
  align-items: center;
  padding: var(--space-step-4);
  border: var(--outline-hair) solid var(--color-rule-bold);
  border-radius: var(--corner-step-3);
  background-color: var(--color-above);
}

.moduleCarousel-line {
  color: var(--color-text-muted);
  background-color: var(--color-above);
  font-size: var(--scale-fine);
  line-height: var(--line-normal);
}

.moduleCarousel-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-inline-end: var(--space-step-1);
  vertical-align: -5px;
}

.moduleCarousel-sign svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--color-pop);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.moduleCarousel-bar {
  display: flex;
  align-items: center;
  gap: var(--space-step-1);
}

.moduleCarousel-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-step-3);
  border: 0;
  border-radius: var(--corner-step-3);
  background-color: var(--color-pop);
  color: #1a1a1a;
  font-family: var(--face-lead);
  font-size: var(--scale-fine);
  font-weight: var(--boldness-heavy);
  white-space: nowrap;
}

.moduleCarousel-confirm:hover {
  background-color: var(--color-accent-strong);
  color: #1a1a1a;
}

.moduleCarousel-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-step-3);
  border: var(--outline-hair) solid var(--color-rule-bold);
  border-radius: var(--corner-step-3);
  background-color: #171717;
  color: #ffffff;
  font-family: var(--face-lead);
  font-size: var(--scale-fine);
  white-space: nowrap;
}

.moduleCarousel-dismiss:hover {
  background-color: #2a2a2a;
  color: var(--color-pop);
}

/* --- piè di pagina FOOT-03 «grande, tutto centrato» ---------------------- */
.slateContainer {
  display: block;
  flex-shrink: 0;
  background-color: #151515;
  border-block-start: var(--outline-hair) solid var(--color-rule);
  padding-block: var(--space-step-6);
  text-align: center;
}

.slateContainer-matter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-step-4);
  width: 100%;
  max-width: calc(var(--wrap-max) + 2 * var(--wrap-padding-desktop));
  margin-inline: auto;
  padding-inline: var(--wrap-padding-desktop);
}

.slateContainer-crest {
  display: block;
}

.slateContainer-emblem {
  display: inline-block;
  text-decoration: none;
}

.slateContainer-emblem img {
  display: block;
  width: auto;
  height: 76px;
}

.slateContainer-routes {
  display: block;
}

.slateContainer-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-step-4);
  list-style: none;
}

.slateContainer-node {
  display: block;
}

.slateContainer-path {
  color: #ffffff;
  background-color: #151515;
  font-family: var(--face-lead);
  font-size: var(--scale-copy);
  font-weight: var(--boldness-medium);
  text-decoration: none;
}

.slateContainer-path:hover {
  color: var(--color-pop);
  background-color: #151515;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.slateContainer-slogan {
  max-width: 520px;
  color: var(--color-text-muted);
  background-color: #151515;
  font-size: var(--scale-fine);
  line-height: var(--line-open);
}

.slateContainer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-step-2);
}

.slateContainer-legal-path {
  position: relative;
  color: var(--color-text-muted);
  background-color: #151515;
  font-size: var(--scale-mini);
  letter-spacing: var(--spacing-open);
  text-transform: uppercase;
  text-decoration: none;
}

.slateContainer-legal-path + .slateContainer-legal-path::before {
  content: '·';
  position: absolute;
  inset-inline-start: calc(var(--space-step-1) * -1);
  color: var(--color-rule-bold);
}

.slateContainer-legal-path:hover {
  color: var(--color-pop);
  background-color: #151515;
  text-decoration: underline;
}

.slateContainer-fine {
  color: #a3a1a0;
  background-color: #151515;
  font-size: var(--scale-mini);
}

/* --- adattamento (desktop-first) ----------------------------------------- */
@media (max-width: 1080px) {
  .boxGrid-hold,
  .chipPanel-hold,
  .rayBunch-hold,
  .streamBody-hold,
  .hingeBody-hold,
  .pinSlider-hold,
  .spikeDisplay-hold,
  .sectionModule-hold,
  .vectorBlock-hold,
  .knobPanel-hold,
  .chamberBar-hold,
  .nookRail-hold,
  .bayBar-hold,
  .flagModule-hold {
    padding-inline: var(--wrap-padding-tablet);
  }

  .slateContainer-matter,
  .moduleCarousel {
    padding-inline: var(--wrap-padding-tablet);
  }

  .streamBody-chain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .padList-tier {
    padding-inline: var(--space-step-3);
    gap: var(--space-step-2);
  }

  .padList-slide {
    padding-inline: var(--space-step-3);
  }

  .padList-chain {
    gap: var(--space-step-1);
  }

  .padList-node + .padList-node::before {
    margin-inline-end: var(--space-step-1);
  }
}

@media (max-width: 899px) {
  .padList-toggle {
    display: flex;
    order: 4;
    margin-inline-start: 0;
  }

  .padList-routes {
    display: none;
  }

  .padList-bar {
    order: 3;
    margin-inline-start: auto;
  }

  .padList-quietkey {
    display: none;
  }

  .hingeBody-hold {
    grid-template-columns: minmax(0, 1fr);
  }

  .hingeBody-matter {
    border-inline-end: var(--outline-hair) solid var(--color-rule);
    border-radius: var(--corner-step-4) var(--corner-step-4) 0 0;
    padding: var(--space-step-4) var(--space-step-3);
  }

  .hingeBody-panel {
    min-height: 200px;
    border-radius: 0 0 var(--corner-step-4) var(--corner-step-4);
  }

  .chipPanel-lede::before {
    font-size: 40px;
  }

  .chipPanel-lede {
    gap: var(--space-step-2);
  }
}

@media (max-width: 760px) {
  .boxGrid-hold,
  .chipPanel-hold,
  .rayBunch-hold,
  .streamBody-hold,
  .hingeBody-hold,
  .pinSlider-hold,
  .spikeDisplay-hold,
  .sectionModule-hold,
  .vectorBlock-hold,
  .knobPanel-hold,
  .chamberBar-hold,
  .nookRail-hold,
  .bayBar-hold,
  .flagModule-hold {
    padding-inline: var(--wrap-padding-mobile);
  }

  .slateContainer-matter,
  .moduleCarousel {
    padding-inline: var(--wrap-padding-mobile);
  }

  .streamBody-chain {
    grid-template-columns: minmax(0, 1fr);
  }

  .moduleCarousel-slab {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-step-2);
    padding: 12px 14px;
  }

  .moduleCarousel-line {
    font-size: var(--scale-mini);
    line-height: 1.35;
  }

  .moduleCarousel-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-step-1);
  }

  .moduleCarousel-confirm,
  .moduleCarousel-dismiss {
    min-height: 40px;
    padding: 0 var(--space-step-1);
    font-size: var(--scale-mini);
    white-space: normal;
  }

  .boxGrid-detail {
    flex-direction: column;
    gap: 6px;
  }

  .boxGrid-detail-node + .boxGrid-detail-node::before {
    content: none;
  }

  .bayBar-slab {
    padding: var(--space-step-3);
  }

  .chipPanel-shot-wide {
    height: 260px;
  }

  .chipPanel-shot-tall {
    height: 380px;
  }

  .slateContainer-chain {
    gap: var(--space-step-2);
  }

  .slateContainer-emblem img {
    height: 54px;
  }

  .flagModule-grid th[scope='col'],
  .flagModule-grid th[scope='row'],
  .flagModule-grid td {
    padding: var(--space-step-0) var(--space-step-1);
    font-size: var(--scale-mini);
  }

  .flagModule-grid th[scope='row'] {
    width: 30%;
  }
}

@media (max-width: 620px) {
  .padList-tier {
    flex-wrap: wrap;
    height: auto;
    min-height: 62px;
    padding-block: var(--space-step-1);
    row-gap: var(--space-step-1);
  }

  .padList-bar {
    order: 5;
    flex-basis: 100%;
    margin-inline-start: 0;
  }

  .padList-toggle {
    order: 2;
    margin-inline-start: auto;
  }

  .padList-key {
    width: 100%;
  }

  .padList-emblem-visual {
    height: 26px;
  }

  .padList-emblem-plate {
    width: 38px;
    height: 38px;
  }

  .padList-emblem-plate img {
    width: 22px;
    height: 22px;
  }

  .boxGrid-hold {
    padding-block: calc(var(--lex-head) + var(--space-step-5)) var(--space-step-5);
  }

  .hingeBody-matter {
    padding: var(--space-step-3) var(--space-step-2);
  }

  .chamberBar-frame {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 480px) {
  .chipPanel-lede::before {
    font-size: 34px;
  }

  .nookRail-para {
    font-size: var(--scale-h5);
  }

  .flagModule-grid th[scope='row'] {
    width: 34%;
  }
}

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

/* --- pulsante dell'offerta: colore, forma e animazione da cta-style.mjs ---
   Il colore NON viene dalla palette del sito: il pulsante deve staccarsi.
   Numeri dell'animazione «stamp» presi dallo script, ciclo infinito. */
.lex-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34em;
  padding: 0 26px;
  min-height: 50px;
  border-radius: var(--corner-step-3);
  background: #0891b2;
  color: #1a1a1a;
  font-family: var(--face-lead);
  font-size: var(--scale-h5);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: none;
  box-shadow: var(--depth-step-2);
  transition: background var(--beat-short) var(--easing-release), box-shadow var(--beat-short) var(--easing-release);
  animation: lexStamp 1.27s var(--easing-swing) infinite;
}

.lex-act.lex-act {
  color: #1a1a1a;
  text-decoration: none;
}

.lex-act:hover {
  background: #0e7490;
  color: #ffffff;
  animation: none;
}

.lex-act.lex-act:hover {
  color: #ffffff;
  text-decoration: none;
}

.lex-act:active {
  background: #155e75;
  color: #ffffff;
}

.lex-act:focus-visible {
  outline: var(--outline-bold) solid #ffffff;
  outline-offset: 3px;
}

@keyframes lexStamp {
  0% {
    transform: translate(0, 0);
  }
  18.898% {
    transform: translate(2px, 2px);
  }
  40.945%,
  100% {
    transform: translate(0, 0);
  }
}

.padList-key.lex-act {
  min-height: 44px;
  padding: 0 var(--space-step-3);
  font-size: var(--scale-fine);
}

@media (max-width: 1240px) {
  .padList-key.lex-act {
    padding: 0 var(--space-step-2);
    font-size: var(--scale-mini);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lex-act,
  .lex-act::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 935px) {
  .padList-routes,
  .padList-chain,
  .padList-path,
  .padList-quietkey { display: none !important; }
  .padList-toggle { display: flex !important; }
}