/* ============================================================================
   BOUNCE GENERATION RECORDS — base
   Sistema estratto da "new artwork wip BRUTALE.psd" (canvas 3000x3000),
   non dedotto a occhio. Ogni numero qui sotto viene da un layer di quel file.

   LEGGI (non negoziabili, vengono dall'artwork):
   1. La tipografia e' SOLO bianca o nera. Mai colorata.
   2. Il colore vive dentro l'immagine. Quando esce, esce come pannello pieno,
      e sopra il pannello il testo torna nero o bianco.
   3. Tutto e' allineato a SINISTRA (Justification=0 su ogni layer di testo).
   4. Margine di gabbia: 150px su 3000 = 5% esatto, su tutti e quattro i lati.
   ========================================================================= */

/* --------------------------------------------------------------- I FONT -- */
/* Nel PSD il font custom lo usa SOLO il wordmark. Tutto il resto e'
   Helvetica Neue. Non fare l'errore di stendere il custom su tutta la
   pagina: il logo smette di essere un logo e diventa il font del sito. */
@font-face {
  font-family: "Bounce Generation";
  src: url("font/bounce-generation.woff2") format("woff2");
  /* Il file dichiara "Regular" ma i contorni dentro sono BOLD (e' Nimbus Sans
     Bold di URW rinominato). Il range 100-900 fa mappare qualsiasi peso
     richiesto su questa faccia: niente faux-bold sopra un font gia' bold. */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:   #0A0A0A;
  --paper: #FFFFFF;

  /* Un solo linguaggio per i filetti e per le voci smorzate. Le opacita'
     sparse (.45/.5/.55/.6/.72) sono una delle cose che fanno sembrare una
     pagina improvvisata: qui la scala e' una, tre gradini, basta. */
  --line-dark:  rgba(255,255,255,.14);   /* hairline su fondo nero  */
  --line-light: rgba(10,10,10,.16);      /* hairline su fondo chiaro */
  --dim:   .62;                          /* metadato leggibile       */
  --faint: .40;                          /* etichetta di sezione     */

  --font-mark: "Bounce Generation", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui:   "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- IL LOCKUP, 1:1 dal layer 'BOUNCE GENERATION' -----------------------
     FontSize 120 · Leading 120 (AutoLeading off) · Tracking -45
     HorizontalScale 1.0 · VerticalScale 0.9 · FontCaps TUTTO MAIUSCOLO
     ATTENZIONE: la scala e' VERTICALE, non orizzontale. Nel pannello
     Carattere di Photoshop il campo verticale viene per primo, ed e' facile
     leggere quel 90% come se fosse la larghezza. Non lo e': le lettere vanno
     SCHIACCIATE IN ALTEZZA, non ristrette. */
  --lockup-track: -0.045em;   /* -45 millesimi di em */
  --lockup-scale: 0.9;        /* scaleY */

  /* ---- Il titolo grande, dal layer 'SONG TITLE' --------------------------
     HelveticaNeue-Medium · 145 · Tracking -70 · HorizScale 1.05
     Leading 175 su corpo 145 = 1.207 · TUTTO MAIUSCOLO */
  --title-track: -0.07em;
  --title-lh:    1.207;
  --title-scale: 1.05;        /* scaleX */

  --micro: clamp(8px, 0.62vw, 11px);
  --small: clamp(10px, 0.78vw, 13px);

  /* 5% come nel PSD, con un tetto perche' su uno schermo largo il 5% pieno
     diventerebbe una fascia enorme */
  --edge: clamp(20px, 5vw, 92px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* dettagli che si notano solo quando mancano */
::selection { background: var(--paper); color: var(--ink); }
.dim   { opacity: var(--dim); }
.faint { opacity: var(--faint); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-synthesis: none;          /* mai grassetti o corsivi sintetici */
  font-kerning: normal;          /* = crenatura "Metrica" */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  /* doppia cintura col dragstart di guard.js: alcuni browser trascinano
     l'immagine anche senza passare dall'evento */
  -webkit-user-drag: none;
  user-select: none;
}

/* --------------------------------------------------------------- LOCKUP -- */
.lockup {
  font-family: var(--font-mark);
  font-size: var(--lockup-size, 1rem);
  line-height: 1;                        /* Leading 120 su corpo 120 */
  letter-spacing: var(--lockup-track);
  text-transform: uppercase;
  text-align: left;                      /* le due righe sono a bandiera */
  margin: 0;
  display: inline-block;
  /* Il letter-spacing negativo viene applicato anche DOPO l'ultima lettera:
     il box risulta piu' stretto dei glifi e l'ultima lettera sborda. */
  padding-right: 0.045em;
  transform: scaleY(var(--lockup-scale));
  transform-origin: left top;
}
.lockup--center { transform-origin: center center; }

/* --------------------------------------------------------- TITOLO GRANDE -- */
.title-lockup {
  font-family: var(--font-ui);
  font-weight: 700;              /* nel PSD e' Medium + FauxBold; sul web si
                                    usa un peso vero, non uno sintetico */
  line-height: var(--title-lh);
  letter-spacing: var(--title-track);
  text-transform: uppercase;
  text-align: left;
  margin: 0;
}
.title-lockup > span {
  display: inline-block;
  transform: scaleX(var(--title-scale));
  transform-origin: left center;
}

/* --------------------------------------------------------------- UTILITY -- */
.mono {
  font-size: var(--small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0;
}
.mono--micro { font-size: var(--micro); letter-spacing: 0.22em; }

.panel {
  background: var(--panel-bg, var(--paper));
  color: var(--ink);
  padding: 0.7em 0.9em;
  display: inline-block;
}

/* ------------------------------------------------------- GRIGLIA DA COVER -- */
.sleeve-grid {
  position: absolute;
  inset: var(--edge);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  pointer-events: none;
  z-index: 3;
}
.sleeve-grid > * { pointer-events: auto; }
.g-tl { grid-column: 1; grid-row: 1; }
.g-tr { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
.g-bl { grid-column: 1; grid-row: 3; align-self: end; }
.g-br { grid-column: 2; grid-row: 3; align-self: end; justify-self: end; text-align: right; }

/* --------------------------------------------------------------- MARCHI -- */
/* Estratti dal PSD (layer 'mirino_cardinale_simmetrico' e 'MONDO ALTO DX'),
   non ridisegnati. Sono PNG bianchi con alpha: su fondo chiaro si invertono
   con un filtro invece di tenere due file. */
.mark-img { display: block; }
.mark-img--dark { filter: invert(1); }       /* per le superfici chiare */

/* Proporzioni dal PSD: mirino 302/3000 = 10.07% del lato,
   globo 209/3000 = 6.97%. */
.mirino { width: clamp(34px, 4.4vw, 62px); opacity: .92; }
.globo  { width: clamp(22px, 2.9vw, 42px); opacity: .92; }

.pictos { display: flex; gap: 6px; }
.pictos svg { width: 30px; height: 30px; border: 1px solid currentColor; padding: 4px; }
.barcode { height: 34px; width: auto; }

/* ------------------------------------------------------------- SEZIONI -- */
.section { padding: clamp(80px, 14vh, 190px) var(--edge); position: relative; }

.statement {
  font-size: clamp(2.4rem, 7.2vw, 7.4rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: var(--title-track);
  text-transform: uppercase;
  margin: 0;
  max-width: 16ch;
}

.byline {
  font-size: clamp(0.85rem, 1.5vw, 1.35rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 1.6em 0 0;
  opacity: 0.62;
}

/* Il manifesto e' l'unico testo in minuscolo: e' l'unico che si legge
   davvero, ed e' il contrasto che regge tutto il maiuscolo intorno. */
.manifesto {
  font-size: clamp(1rem, 1.55vw, 1.4rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
  max-width: 46ch;
}
.manifesto p { margin: 0 0 1.5em; }
.manifesto p:last-child { margin-bottom: 0; }



/* La riga di benvenuto apre il manifesto e va staccata dal racconto che segue:
   corpo piu' grande, piu' aria sotto. Resta in minuscolo come il resto del
   manifesto, perche' e' l'unica voce che parla invece di dichiarare.
   Il nome della label NON va in maiuscolo dentro la frase: urlerebbe. */
.manifesto .welcome {
  font-size: 1.24em;
  line-height: 1.4;
  letter-spacing: -0.012em;
  margin-bottom: 2em;
}

.rule { height: 1px; background: currentColor; opacity: 0.28; border: 0; margin: 0; }

/* ---------------------------------------------------------------- LINK -- */
/* Nessun colore: la legge vale anche qui, il testo resta bianco o nero.
   Il link si distingue per il filetto sotto, non per la tinta.
   Il filetto sta al 45% e si accende al passaggio: e' l'inverso di smorzare
   tutto il link, e non fa mai sembrare il testo un bottone sbiadito. */
.link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  padding-bottom: 0.2em;
  transition: border-color .25s ease;
}
.link:hover, .link:focus-visible { border-color: currentColor; }

/* Gli handle social si scrivono minuscoli. Il sistema mono e' tutto
   maiuscolo, quindi qui va disattivato per il solo handle: l'etichetta
   "INSTAGRAM" resta caps come ogni altra dicitura, @nome no. */
.handle { text-transform: none; }

/* ----------------------------------------------------------------- CTA -- */
/* L'unica porta d'ingresso della pagina: il DM su Instagram. Va piu' grande
   del testo intorno, ma non diventa un bottone: il registro resta editoriale,
   il richiamo lo fa il corpo, non una scatola colorata. */
.cta {
  margin: 2.4em 0 0;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  letter-spacing: 0.02em;
}
/* La seconda porta: c'e', ma non compete con la mail. */
.cta--second {
  margin-top: 1.1em;
  font-size: clamp(.85rem, 1.15vw, 1rem);
  opacity: var(--dim);
}

/* Slot di un canale che ancora non esiste: si vede che c'e' il posto,
   si vede che e' spento. Non e' un link. */
.slot-off { opacity: .3; }

/* ------------------------------------------------------------------ DUST -- */
/* Non piu' in uso sul wordmark (ridisegnava le lettere invece di lasciar
   comporre il font). La regola resta per eventuali riusi altrove. */
.dust-host { position: absolute; left: 0; top: 0; pointer-events: none; }

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