/* ==========================================================================
   L'Arca Giocattoli — Orsogna (CH)

   TESI
   In un negozio di giocattoli di paese la domanda non e' mai «che cosa
   vendete»: e' «quanti anni fa?», e subito dopo «ce l'avete?». Il negozio e'
   una parete di scaffali ordinati per eta', e quello che si guarda sono le
   scatole. Quindi la pagina e' quella parete: righe di ripiani, scatole
   appoggiate sopra, un cartellino su ognuna. Scorrendo, le righe si spostano
   appena, a direzioni alterne, come quando si cammina davanti a uno scaffale.

   Il fondo non e' bianco ne' scuro: e' cartone. L'unico colore acceso e' il
   rosso del cartellino del prezzo che, non avendo i prezzi, dice DA
   CONFERMARE. Il cartellino ripetuto quindici volte E' il messaggio del sito.

   PALETTE (ruoli, non nomi di colore)
   --cartone       #D9C6AC  fondo pagina
   --cartone-scuro #C4AE90  ripiano e scatole
   --legno         #2A1E12  testo primario, su entrambi i fondi
   --legno-tenue   #574434  testo secondario: SOLO su --cartone
   --cartellino    #8F2018  il cartellino del prezzo: accento e interattivo

   CONTRASTI misurati con agenti/contrasto.py (non stimati)
   --legno       su --cartone        9.76:1  AAA
   --legno-tenue su --cartone        5.53:1  AA
   --legno       su --cartone-scuro  7.58:1  AAA
   --cartellino  su --cartone        5.29:1  AA
   --cartone     su --cartellino     5.29:1  AA  (cartellino pieno)
   --legno-tenue su --cartone-scuro  4.30:1  -> SOTTO SOGLIA, vietato: dentro
                                      le scatole il secondario usa --legno

   SCALA TIPOGRAFICA
   eta            clamp(1.75rem, 5vw, 2.75rem)  Trebuchet MS 700
   titolo sezione 1.25rem
   nome scatola   1rem
   testo          1.0625rem  Georgia, interlinea 1.55
   cartellino     0.75rem    maiuscoletto, tracking +0.06em

   Vincolante: .design/style-lock.md
   ========================================================================== */

:root {
  --cartone: #D9C6AC;
  --cartone-scuro: #C4AE90;
  --legno: #2A1E12;
  --legno-tenue: #574434;
  --cartellino: #8F2018;

  --display: "Trebuchet MS", "Franklin Gothic", Tahoma, system-ui, sans-serif;
  --testo: Georgia, Cambria, "Palatino Linotype", ui-serif, serif;

  --passo: 8px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cartone);
  color: var(--legno);
  font-family: var(--testo);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.salta {
  position: absolute;
  inset-inline-start: calc(var(--passo) * 2);
  inset-block-start: calc(var(--passo) * 2);
  z-index: 10;
  padding: calc(var(--passo) * 1.5) calc(var(--passo) * 2);
  border-radius: 10px;
  background: var(--legno);
  color: var(--cartone);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease-out);
}

.salta:focus-visible { transform: translateY(0); }

/* --- insegna ------------------------------------------------------------ */

.insegna {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo) calc(var(--passo) * 3);
  align-items: baseline;
  padding: calc(var(--passo) * 3) clamp(16px, 5vw, 56px);
  border-block-end: 2px solid var(--cartone-scuro);
}

.insegna__nome {
  margin: 0;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.insegna__luogo {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--display);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--legno-tenue);
  font-variant-numeric: tabular-nums;
}

.insegna__tel {
  color: var(--cartellino);
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  text-underline-offset: 3px;
}

/* --- apertura ----------------------------------------------------------- */

.apertura {
  padding: clamp(32px, 7vw, 72px) clamp(16px, 5vw, 56px) clamp(24px, 5vw, 48px);
  max-inline-size: 68ch;
}

.titolone {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.4rem, 8vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sommario {
  margin: calc(var(--passo) * 3) 0 0;
  max-inline-size: 62ch;
  text-wrap: pretty;
}

.premessa {
  margin: calc(var(--passo) * 3) 0 0;
  padding: calc(var(--passo) * 2);
  max-inline-size: 62ch;
  border: 2px dashed var(--cartellino);
  border-radius: 10px;
  font-size: 0.9375rem;
}

/* --- azioni ------------------------------------------------------------- */

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--passo) * 1.5);
  margin-block-start: calc(var(--passo) * 4);
}

.bottone {
  display: inline-block;
  padding: calc(var(--passo) * 1.5) calc(var(--passo) * 2.5);
  min-block-size: 44px;
  border: 2px solid var(--cartellino);
  border-radius: 10px;
  background: transparent;
  color: var(--cartellino);
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: transform 140ms var(--ease-out), background-color 140ms ease, color 140ms ease;
}

.bottone--pieno {
  background: var(--cartellino);
  color: var(--cartone);
}

.bottone:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .bottone:hover { background: var(--cartone-scuro); }
  .bottone--pieno:hover { background: var(--legno); border-color: var(--legno); color: var(--cartone); }
}

/* --- la parete ---------------------------------------------------------- */

.parete {
  /* le righe si spostano di lato: quello che esce non deve creare
     scorrimento orizzontale della pagina */
  overflow-x: hidden;
  padding: clamp(24px, 5vw, 48px) clamp(16px, 5vw, 56px);
  border-block-start: 2px solid var(--cartone-scuro);
}

.titolo-sezione {
  margin: 0 0 calc(var(--passo) * 4);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.scaffale {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--passo) * 2);
  padding-block-end: calc(var(--passo) * 4);
  margin-block-end: calc(var(--passo) * 4);
  /* il ripiano: una riga spessa sotto le scatole */
  border-block-end: 4px solid var(--cartone-scuro);
}

.scaffale:last-child { margin-block-end: 0; }

@media (min-width: 760px) {
  .scaffale {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: calc(var(--passo) * 4);
    align-items: start;
  }
}

.eta {
  margin: 0;
  font-family: var(--display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.eta__n {
  display: block;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.eta__u {
  display: block;
  margin-block-start: calc(var(--passo) * 0.5);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--legno-tenue);
}

.ripiano {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--passo) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* la scatola: raggio 10px con padding 16px, cartellino interno a 4px */
.scatola {
  display: flex;
  flex-direction: column;
  gap: var(--passo);
  flex: 1 1 14rem;
  padding: calc(var(--passo) * 2);
  border-radius: 10px;
  background: var(--cartone-scuro);
  /* ombra corta e dura: la scatola sta appoggiata su un ripiano, non fluttua */
  box-shadow: 0 3px 0 rgba(42, 30, 18, 0.28);
  transition: transform 140ms var(--ease-out);
}

.scatola__n {
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--legno);
  text-wrap: pretty;
}

.cartellino {
  align-self: flex-start;
  padding: 3px calc(var(--passo));
  border-radius: 4px;
  background: var(--cartellino);
  color: var(--cartone);
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .scatola:hover { transform: translateY(-3px); }
}

/* --- banco -------------------------------------------------------------- */

.banco,
.dove {
  padding: clamp(24px, 5vw, 48px) clamp(16px, 5vw, 56px);
  border-block-start: 2px solid var(--cartone-scuro);
  max-inline-size: 72ch;
}

.banco__testo {
  margin: 0 0 calc(var(--passo) * 3);
  max-inline-size: 62ch;
  text-wrap: pretty;
}

.domande { margin: 0; }

.domanda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo) calc(var(--passo) * 2);
  justify-content: space-between;
  padding-block: calc(var(--passo) * 1.5);
  border-block-start: 1px solid var(--cartone-scuro);
}

.domanda dt { font-size: 1rem; }

.domanda dd { margin: 0; }

.domanda__d,
.rec__d {
  font-family: var(--display);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--legno-tenue);
}

.rec__d--vero {
  font-family: var(--testo);
  font-size: 1rem;
  letter-spacing: normal;
  color: var(--legno);
}

/* --- dove --------------------------------------------------------------- */

.recapiti {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo) calc(var(--passo) * 2);
  justify-content: space-between;
  padding-block: calc(var(--passo) * 1.5);
  border-block-start: 1px solid var(--cartone-scuro);
}

.rec:first-child { border-block-start: 0; }

.rec__v {
  font-family: var(--display);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--legno-tenue);
}

.collegamento {
  color: var(--cartellino);
  font-variant-numeric: tabular-nums;
  text-underline-offset: 3px;
}

/* --- piede -------------------------------------------------------------- */

.pie {
  padding: clamp(24px, 5vw, 48px) clamp(16px, 5vw, 56px);
  border-block-start: 4px solid var(--cartone-scuro);
}

.pie__riga {
  margin: 0 0 var(--passo);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
}

.pie__nota {
  margin: 0;
  max-inline-size: 62ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--legno-tenue);
  text-wrap: pretty;
}

/* --- messa a fuoco ------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--legno);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- movimento ridotto --------------------------------------------------
   Il ciclo che sposta i ripiani non parte nemmeno (vedi main.js); qui si
   spengono le transizioni e il sollevamento delle scatole, che restano
   distinguibili per ombra e bordo. */

@media (prefers-reduced-motion: reduce) {
  .salta,
  .bottone,
  .scatola { transition: none; }

  .scatola:hover { transform: none; }

  .ripiano { transform: none !important; }
}