/* ==========================================================================
   CoopPavilion — foglio di stile unico
   Impianto tipografico: grottesco unico, corpi display compressi, filetti
   da 1px al posto delle ombre. Superfici: putty / carta / carbone.
   ========================================================================== */

:root {
  /* Colori */
  --putty: #cac7b4;
  --putty-dark: #b8b5a3;
  --signal: #ffdd00;
  --ink: #000000;
  --paper: #ffffff;
  --carbon: #191919;
  --smoke: #cccccc;

  /* Tipografia */
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-caption: 13px;
  --t-body: 16px;
  --t-sub: 18px;
  --t-h-sm: 20px;
  --t-h: 26px;

  /* Spaziature */
  --s-8: 8px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-64: 64px;
  --s-80: 80px;
  --s-96: 96px;
  --s-128: 128px;

  /* Forme */
  --r-btn: 2px;
  --r-card: 6px;
  --line: 1px solid var(--ink);
  --line-light: 1px solid rgba(255, 255, 255, .55);

  --page: 1400px;
  --gutter: 20px;
  --header-h: 76px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
}

body {
  margin: 0;
  background: var(--putty);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: -.005em;
  font-weight: 400;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.hero :focus-visible,
.band-dark :focus-visible,
.game-band :focus-visible,
.flagship :focus-visible,
.subscribe :focus-visible,
.cookie :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--paper);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

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

/* ------------------------------------------------------- tipi ricorrenti - */
.display {
  font-weight: 500;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.022em;
  font-size: clamp(38px, 9.2vw, 116px);
}

.section-title {
  font-weight: 600;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: -.014em;
  font-size: clamp(30px, 5.6vw, 64px);
}

.section-title--gap { margin-top: 14px; }
.lede--gap { margin-top: 18px; }
.section-label--muted { color: #b9b6ae; }

.section-label {
  font-size: var(--t-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.lede {
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.4;
  max-width: 56ch;
}

.rule {
  border: 0;
  border-top: var(--line);
  margin: 0;
}

/* ------------------------------------------------------------- bottoni --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--putty);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--ink);
  transition: background-color .16s linear;
}
.btn:hover { background: var(--putty-dark); }
.btn--paper { background: var(--paper); }
.btn--paper:hover { background: #ededed; }
.btn--onDark {
  background: transparent;
  color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--paper);
}
.btn--onDark:hover { background: rgba(255, 255, 255, .12); }
.btn__arrow { width: 14px; height: 14px; flex: none; }

.textlink {
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.textlink:hover { border-bottom-width: 2px; }

/* ------------------------------------------------------------- stelle ---- */
.stars {
  position: relative;
  display: inline-block;
  width: 83px;
  height: 15px;
  vertical-align: -2px;
}
.stars__row {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 2px;
}
.stars__row svg { width: 15px; height: 15px; flex: none; }
.stars__row--base { opacity: .3; }
.stars__row--fill { clip-path: inset(0 calc(100% - var(--pct)) 0 0); }

.rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-caption);
  font-weight: 500;
}

/* =============================================== 1. INTESTAZIONE / NAV === */
.topbar {
  background: var(--signal);
  color: var(--ink);
  border-bottom: var(--line);
}
.topbar__text {
  padding: 10px 0;
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: -.005em;
  text-align: center;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--putty);
  border-bottom: var(--line);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  min-height: 64px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.logo__accent {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink);
  border-radius: var(--r-btn);
  padding: 2px 7px 3px;
}

.nav { display: flex; align-items: center; gap: var(--s-24); }
.nav__list { display: flex; align-items: center; gap: 18px; }
.nav__link {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.nav__link:hover { border-bottom-color: var(--ink); }

.burger {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--ink);
  border-radius: var(--r-btn);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.burger__bars { display: block; width: 16px; }
.burger__bars span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  margin: 3px 0;
}

/* ================================================================ 2. HERO */
.hero {
  display: grid;
  border-bottom: var(--line);
  background: var(--carbon);
}
.hero__media { grid-area: 1 / 1; overflow: hidden; }
.hero__img {
  width: 100%;
  height: 100%;
  min-height: clamp(400px, 72vh, 700px);
  object-fit: cover;
  object-position: 50% 46%;
}
.hero__inner {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  padding-block: clamp(28px, 5vw, 64px);
}
.hero__slab {
  background: var(--carbon);
  color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
  border-radius: var(--r-btn);
  padding: clamp(22px, 3.4vw, 44px) clamp(20px, 3.4vw, 44px) clamp(24px, 3vw, 38px);
  max-width: 760px;
}
.hero__title {
  font-weight: 500;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.025em;
  font-size: clamp(42px, 7.6vw, 104px);
  margin-bottom: 18px;
}
.hero__sub {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.45;
  max-width: 52ch;
  color: #eceae6;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.hero__trust {
  margin-top: 22px;
  padding-top: 14px;
  border-top: var(--line-light);
  font-size: var(--t-caption);
  color: #d8d5cd;
  max-width: 60ch;
}

/* ========================================================= 3. CATALOGO === */
.catalog { padding-block: clamp(48px, 7vw, 96px) 0; }
.catalog__head {
  display: grid;
  gap: var(--s-24);
  grid-template-columns: 1fr;
  padding-bottom: var(--s-40);
}
.catalog__intro { display: grid; gap: 14px; }
.catalog__note {
  font-size: var(--t-caption);
  border-top: var(--line);
  padding-top: 12px;
  max-width: 46ch;
}

/* -- schede a griglia irregolare (uso 1) -- */
.catalog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-24);
  padding-block: var(--s-40);
  align-items: start;
}

.game-card {
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--ink);
  padding: var(--s-24);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.game-card--tall { padding-bottom: var(--s-32); }
.game-card__shot {
  width: 100%;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--ink);
  object-fit: cover;
}
.game-card--tall .game-card__shot { aspect-ratio: 4 / 5; }
.game-card__top { display: flex; gap: 14px; align-items: flex-start; }
.game-card__icon {
  width: 62px; height: 62px;
  flex: none;
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.game-card__name {
  font-size: var(--t-h-sm);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.game-card__dev { font-size: var(--t-caption); margin-top: 5px; }
.game-card__text { font-size: 15px; line-height: 1.45; }
.game-card__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 4px 8px;
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.tag--onDark { box-shadow: inset 0 0 0 1px var(--paper); }

/* -- riga larga: immagine a sinistra (uso 1) / specchiata (uso 2) -- */
.game-row {
  border-top: var(--line);
  border-bottom: var(--line);
  padding-block: clamp(28px, 4vw, 56px);
  display: grid;
  gap: var(--s-24);
  grid-template-columns: 1fr;
  align-items: center;
}
.band-dark {
  background: var(--carbon);
  color: var(--paper);
}
.game-row--dark {
  border-color: transparent;
}
.game-row--dark .game-row__body { color: #e9e7e1; }
.game-row__figure { margin: 0; }
.game-row__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px var(--ink);
}
.game-row--dark .game-row__img { box-shadow: inset 0 0 0 1px var(--paper); }
.game-row__caption {
  font-size: 12px;
  margin-top: 8px;
  opacity: .8;
}
.game-row__index {
  font-size: clamp(44px, 7vw, 90px);
  font-weight: 600;
  line-height: .88;
  letter-spacing: -.03em;
}
.game-row__icon {
  width: 48px; height: 48px;
  margin-top: 14px;
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.game-row--dark .game-row__icon { box-shadow: inset 0 0 0 1px var(--paper); }
.game-band__icon {
  width: 48px; height: 48px;
  margin-bottom: 14px;
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--paper);
}
.game-row__name {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.018em;
  text-transform: uppercase;
  margin-block: 10px 6px;
}
.game-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: var(--t-caption);
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: var(--line);
}
.game-row--dark .game-row__meta { border-bottom: var(--line-light); }
.game-row__body { font-size: 16px; line-height: 1.5; max-width: 58ch; }
.game-row__actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }

/* -- coppia compatta su putty (uso 2 della griglia) -- */
.catalog__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-24);
  padding-block: clamp(40px, 6vw, 80px);
}
.game-brief {
  display: grid;
  gap: 16px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}
.game-brief__head { display: flex; gap: 14px; align-items: center; }
.game-brief__icon {
  width: 54px; height: 54px;
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--ink);
  flex: none;
}
.game-brief__name {
  font-size: var(--t-h);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.018em;
  text-transform: uppercase;
}
.game-brief__dev { font-size: var(--t-caption); margin-top: 4px; }
.game-brief__shot {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px var(--ink);
}
.game-brief__text { font-size: 15px; line-height: 1.45; }
.game-brief__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* -- fascia finale a tutta larghezza (pattern unico) -- */
.game-band {
  background: var(--carbon);
  color: var(--paper);
  padding-block: clamp(40px, 6vw, 80px);
}
.game-band__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-24);
  align-items: center;
}
.game-band__num {
  font-size: clamp(72px, 16vw, 166px);
  font-weight: 500;
  line-height: .82;
  letter-spacing: -.035em;
}
.game-band__name {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.02em;
}
.game-band__dev { font-size: var(--t-caption); margin-top: 8px; color: #cfccc4; }
.rating--block { margin-top: 12px; }
.game-band__text { margin-top: 18px; font-size: 16px; line-height: 1.5; color: #e9e7e1; max-width: 54ch; }
.game-band__actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.game-band__shot {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 28%;
  box-shadow: inset 0 0 0 1px var(--paper);
}

/* ==================================================== 4. SCHEDA DI PUNTA = */
.flagship {
  background: var(--carbon);
  color: var(--paper);
  padding-block: clamp(56px, 8vw, 128px);
  border-top: var(--line);
}
.flagship__label { color: var(--signal); }
.flagship__title {
  font-weight: 500;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.024em;
  font-size: clamp(40px, 8vw, 116px);
  margin-block: 14px 22px;
}
.flagship__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
  align-items: end;
  padding-bottom: var(--s-40);
  border-bottom: var(--line-light);
}
.flagship__claim { font-size: clamp(17px, 2vw, 22px); line-height: 1.35; max-width: 46ch; }
.flagship__facts {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--line-light);
}
.flagship__fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: var(--line-light);
  font-size: 14px;
}
.flagship__fact dt { color: #b9b6ae; }
.flagship__fact dd { margin: 0; font-weight: 500; text-align: right; }

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-block: var(--s-40);
}
.gallery__item { margin: 0; }
.gallery__img {
  width: 100%;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.gallery__cap { font-size: 12px; color: #b9b6ae; margin-top: 8px; }

.flagship__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
  padding-top: var(--s-40);
  border-top: var(--line-light);
}
.flagship__h3 {
  font-size: var(--t-h-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.flagship__p { color: #e9e7e1; line-height: 1.55; }
.flagship__p + .flagship__p { margin-top: 12px; }
.flagship__list { display: grid; gap: 10px; color: #e9e7e1; }
.flagship__list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
}
.flagship__list svg { width: 16px; height: 16px; margin-top: 4px; }
.flagship__actions { margin-top: var(--s-32); display: flex; flex-wrap: wrap; gap: 12px; }

/* ======================================================= 5. TRASPARENZA == */
.transparency {
  background: var(--paper);
  padding-block: clamp(48px, 7vw, 96px);
  border-bottom: var(--line);
}
.transparency__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
}
.transparency__aside { display: grid; gap: 12px; align-content: start; }
.transparency__money {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
  margin-top: var(--s-24);
}
.money-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 18px 0;
  border-bottom: var(--line);
}
.money-row__k {
  font-size: var(--t-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.money-row__v { font-size: 16px; line-height: 1.45; max-width: 62ch; }
.transparency__note { font-size: var(--t-caption); max-width: 40ch; }
.transparency__p { line-height: 1.55; max-width: 62ch; }
.transparency__p--terms { margin-top: var(--s-24); }
.transparency__p + .transparency__p { margin-top: 14px; }

/* ========================================================== 6. LETTERE === */
.letters { padding-block: clamp(48px, 7vw, 96px); }
.letters__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-24);
  margin-top: var(--s-40);
}
.letter {
  background: var(--putty);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--ink);
  padding: var(--s-24);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.letter--wide { background: var(--paper); }
.letter__quote { font-size: 17px; line-height: 1.45; }
.letter--wide .letter__quote { font-size: clamp(18px, 2.2vw, 24px); line-height: 1.3; }
.letter__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: var(--line);
}
.letter__mark {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-btn);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
.letter__name { font-size: 14px; font-weight: 500; }
.letter__role { font-size: var(--t-caption); }

/* ======================================================== 7. ISCRIZIONE == */
.subscribe {
  background: var(--carbon);
  color: var(--paper);
  padding-block: clamp(48px, 7vw, 96px);
}
.subscribe__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-40);
}
.subscribe__title {
  margin-top: 14px;
  font-size: clamp(30px, 5vw, 64px);
  font-weight: 500;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: -.018em;
}
.subscribe__p { margin-top: 18px; color: #e0ddd6; line-height: 1.55; max-width: 46ch; }
.subscribe__small { margin-top: 18px; font-size: var(--t-caption); color: #b9b6ae; max-width: 46ch; }

.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field__label { font-size: var(--t-caption); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.field__input {
  width: 100%;
  padding: 13px 14px;
  background: transparent;
  color: var(--paper);
  border: 0;
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.field__input::placeholder { color: #8d8a83; }
.field__input:focus { box-shadow: inset 0 0 0 2px var(--paper); outline: none; }
.field__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--signal); }

.consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.4;
  color: #e0ddd6;
}
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--signal); }
.form__error { font-size: var(--t-caption); color: var(--signal); min-height: 18px; }
.form__note { font-size: 12px; color: #a9a69f; }

.success {
  display: none;
  gap: 12px;
  align-items: flex-start;
  background: var(--signal);
  color: var(--ink);
  border-radius: var(--r-btn);
  padding: 18px 20px;
  margin-top: var(--s-24);
}
.success.is-visible { display: flex; }
.success svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.success__text { font-size: 15px; line-height: 1.4; }

/* ============================================================== 8. FAQ === */
.faq { background: var(--paper); padding-block: clamp(48px, 7vw, 96px); border-block: var(--line); }
.faq__list { margin-top: var(--s-40); border-top: var(--line); }
.faq__item { border-bottom: var(--line); }
.faq__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 26px;
  gap: 16px;
  align-items: center;
  background: none;
  border: 0;
  padding: 22px 0;
  text-align: left;
  cursor: pointer;
}
.faq__q {
  font-size: clamp(17px, 2.1vw, 24px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.012em;
  text-transform: uppercase;
}
.faq__sign {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
.faq__panel { display: none; padding-bottom: 24px; }
.faq__panel.is-open { display: block; }
.faq__panel p { max-width: 62ch; line-height: 1.55; }
.faq__panel p + p { margin-top: 12px; }

/* ========================================================= 9. REDAZIONE == */
.desk { padding-block: clamp(48px, 7vw, 96px); }
.desk__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-40);
  align-items: start;
}
.desk__p { line-height: 1.6; max-width: 60ch; }
.desk__p + .desk__p { margin-top: 14px; }
.desk__p--lead { margin-top: var(--s-24); }
.desk__caveat {
  margin-top: var(--s-24);
  padding: 18px 20px;
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--ink);
  font-size: 15px;
  line-height: 1.5;
  max-width: 58ch;
}
.desk__facts { border-top: 2px solid var(--ink); margin-top: var(--s-24); }
.desk__fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: var(--line);
  font-size: 14px;
}
.desk__fact dd { margin: 0; font-weight: 500; text-align: right; }
.desk__figure { margin: 0; }
.desk__img { width: 100%; box-shadow: inset 0 0 0 1px var(--ink); }
.desk__cap { font-size: 12px; margin-top: 8px; }

/* ============================================================ 10. FOOTER = */
.site-footer {
  background: var(--carbon);
  color: var(--paper);
  padding-block: clamp(48px, 6vw, 80px) var(--s-32);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
  padding-bottom: var(--s-40);
  border-bottom: var(--line-light);
}
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.site-footer__logo .logo__accent {
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
}
.site-footer__claim { margin-top: 16px; font-size: 15px; color: #cfccc4; max-width: 40ch; line-height: 1.5; }
.site-footer__h {
  font-size: var(--t-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #b9b6ae;
  margin-bottom: 14px;
}
.site-footer__list { display: grid; gap: 9px; }
.site-footer__link { font-size: 15px; text-decoration: none; }
.site-footer__link:hover { text-decoration: underline; }
.site-footer__contact { margin-top: 18px; font-size: 15px; line-height: 1.6; color: #e0ddd6; }
.site-footer__contact a { color: var(--paper); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  padding-top: var(--s-24);
  font-size: var(--t-caption);
  color: #a9a69f;
}
.site-footer__disclaimer { max-width: 70ch; line-height: 1.5; }

/* ==================================================== elementi flottanti = */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 55;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 0;
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s linear, transform .18s linear, visibility .18s linear;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 18px; height: 18px; }

.cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: var(--carbon);
  color: var(--paper);
  border-top: 2px solid var(--signal);
  transform: translateY(101%);
  transition: transform .22s ease-out;
}
.cookie.is-visible { transform: none; }
.cookie__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  padding-block: 18px;
}
.cookie__text { font-size: 14px; line-height: 1.45; max-width: 70ch; }
.cookie__text a { color: var(--signal); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ================================================== pagine di contenuto = */
.doc { padding-block: clamp(40px, 6vw, 80px); }
.doc__head { padding-bottom: var(--s-32); border-bottom: 2px solid var(--ink); }
.doc__title {
  font-size: clamp(32px, 6vw, 90px);
  font-weight: 500;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.022em;
}
.doc__meta { margin-top: 16px; font-size: var(--t-caption); }
.doc__back { margin-top: var(--s-24); }
.doc__body { max-width: 74ch; padding-top: var(--s-40); }
.doc__body h2 {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -.012em;
  line-height: 1.15;
  margin-top: var(--s-40);
  padding-top: 14px;
  border-top: var(--line);
}
.doc__body h3 {
  font-size: var(--t-sub);
  font-weight: 600;
  margin-top: var(--s-24);
}
.doc__body p { margin-top: 12px; line-height: 1.6; }
.doc__body ul { margin-top: 12px; display: grid; gap: 8px; }
.doc__body li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  line-height: 1.55;
}
.doc__body li::before { content: "—"; }
.doc__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 15px;
}
.doc__table th,
.doc__table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px 12px 0;
  border-bottom: var(--line);
}
.doc__table th { font-weight: 600; }
.doc__table td, .doc__table th { overflow-wrap: anywhere; }

.notfound { padding-block: clamp(60px, 12vw, 160px); }
.notfound__title { margin-top: 14px; }
.notfound__action { margin-top: 28px; }

/* ============================================================ breakpoint = */
@media (min-width: 600px) {
  .form__row { grid-template-columns: 1fr 1fr; }
  .money-row { grid-template-columns: 190px 1fr; gap: 24px; }
  .cookie__inner { grid-template-columns: 1fr auto; }
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
  .catalog__grid { grid-template-columns: repeat(2, 1fr); }
  .game-card--tall { grid-row: span 2; }
  .catalog__pair { grid-template-columns: 1fr 1fr; gap: var(--s-40); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .letters__grid { grid-template-columns: repeat(2, 1fr); }
  .letter--wide { grid-column: span 2; }
  .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
  .transparency__grid { grid-template-columns: 250px 1fr; }
  .desk__grid { grid-template-columns: 1.1fr .9fr; gap: var(--s-48); }
  .flagship__top { grid-template-columns: 1.15fr .85fr; }
  .flagship__cols { grid-template-columns: 1.05fr .95fr; gap: var(--s-48); }
  .game-band__grid { grid-template-columns: 200px 1.1fr .9fr; gap: var(--s-32); }
  .subscribe__grid { grid-template-columns: 1fr 1fr; gap: var(--s-64); }
  .game-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-48); }
  .game-row--mirror .game-row__figure { order: 2; }
  .catalog__head { grid-template-columns: 1fr 300px; align-items: end; }
}

@media (min-width: 1024px) {
  :root { --gutter: 40px; }
  .catalog__grid { grid-template-columns: 1.05fr .95fr .95fr; }
  .hero__slab { max-width: 720px; }
  .letters__grid { grid-template-columns: 1.35fr 1fr 1fr; }
  .letter--wide { grid-column: auto; }
  .gallery { grid-template-columns: 1.25fr .75fr 1fr; }
  .gallery__item--lead { grid-row: span 2; }
}

@media (min-width: 1280px) {
  :root { --gutter: 56px; }
}

/* menu mobile */
@media (max-width: 959px) {
  .burger { display: inline-flex; }
  /* .site-header è sticky: fa già da riferimento per il menu assoluto */
  .nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--putty);
    border-bottom: var(--line);
    padding: var(--s-16) var(--gutter) var(--s-24);
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: var(--line); }
  .nav__link { display: block; padding: 14px 0; font-size: 17px; }
  .nav__cta { margin-top: var(--s-16); }
}

@media (max-width: 599px) {
  .doc__table { font-size: 13px; }
  .doc__table th, .doc__table td { padding: 10px 8px 10px 0; }
  .flagship__fact { flex-direction: column; gap: 2px; }
  .flagship__fact dd { text-align: left; }
  .hero { display: block; }
  .hero__inner { padding-block: 0; }
  .hero__img { min-height: 0; height: 240px; }
  .hero__slab {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    border-top: 2px solid var(--signal);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}