/* Valori estratti da /_next/static/css/d291c0c2a5f69739.css di oklama.com
   (vedi EXTRACTED_PARAMS.md). Nessuna transition in tutto il foglio originale:
   ogni cambio di stato è istantaneo. */

@font-face {
  font-family: JetBrains Mono;
  src: url(assets/JetBrainsMono-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}

/* preflight (estratto): box-border, margini a zero, a/button ereditano */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }

html {
  height: 100%;                                /* h-full */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: JetBrains Mono, monospace;      /* font-mono (custom) */
}

body {
  margin: 0;
  line-height: inherit;
  min-height: 100%;                            /* min-h-full */
  display: flex;                               /* flex flex-col */
  flex-direction: column;
  font-size: .8125rem;                         /* text-sm custom */
  line-height: 1.1rem;
}

a { color: inherit; text-decoration: inherit; }
button {
  font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit;
  color: inherit; margin: 0; padding: 0;
  -webkit-appearance: button; background-color: transparent; background-image: none;
  cursor: pointer;
}
img { max-width: 100%; height: auto; display: block; vertical-align: middle; }

/* ===== layer folders =====
   originale: absolute inset-0 overflow-hidden select-none z-10 */
.folders-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  z-index: 10;
}

/* originale: absolute top-0 left-0 bottom-[90px] right-[90px] */
.folders-area {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 90px;
  right: 90px;
}

/* originale: absolute text-sm flex flex-col items-center justify-center
   pointer-events-none w-[90px] */
.folder-item {
  position: absolute;
  font-size: .8125rem;
  line-height: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  width: 90px;
}

/* item 3: + h-[90px] cursor-pointer */
.folder-item--image {
  height: 90px;
  cursor: pointer;
}

/* originale: rendering-pixelated pointer-events-auto */
.pixelated {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  pointer-events: auto;
}

/* originale: pointer-events-auto text-center bg-white */
.folder-label {
  pointer-events: auto;
  text-align: center;
  background-color: #fff;
}

/* ===== nav top =====
   originale: fixed top-7 left-7 right-7 z-30 text-black/50 font-mono
   flex justify-between pointer-events-none [&>*]:pointer-events-auto */
.topnav {
  position: fixed;
  top: 1.75rem;
  left: 1.75rem;
  right: 1.75rem;
  z-index: 30;
  color: rgba(0, 0, 0, .5);
  font-family: JetBrains Mono, monospace;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.topnav > * { pointer-events: auto; }

/* originale: hover:text-[#cd3f25] block p-1 — nessuna transition */
.topnav-link {
  display: block;
  padding: .25rem;
}
.topnav-link:hover { color: rgb(205 63 37); }

.store-wrapper { position: relative; }

/* originale dropdown: absolute top-full border-2 -left-1 -mx-[2px] border-black
   bg-white grid py-1 shadow-[4px_4px_0_rgba(0,0,0,0.25)] ; aperto vince .grid */
.store-dropdown {
  position: absolute;
  top: 100%;
  left: -.25rem;
  margin-left: -2px;
  margin-right: -2px;
  border-width: 2px;
  border-color: #000;
  background-color: #fff;
  display: grid;
  padding-top: .25rem;
  padding-bottom: .25rem;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .25);
}

/* originale: hover:text-[#cd3f25] whitespace-nowrap py-1 px-2 block */
.store-dropdown-link {
  white-space: nowrap;
  padding: .25rem .5rem;
  display: block;
}
.store-dropdown-link:hover { color: rgb(205 63 37); }

.hidden { display: none; }

/* ===== social bottom =====
   originale: fixed bottom-8 left-0 right-0 h-0 flex justify-center items-center z-30 */
.socialbar {
  position: fixed;
  bottom: 2rem;
  left: 0;
  right: 0;
  height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 30;
}

/* originale: absolute bottom-0 text-black/50 font-mono
   + riga flex, per reggere le due figure ai lati (vedi sezione FIGURE in fondo).

   Il bottom non e' piu' 0: questo elemento e' ancorato in basso dentro un
   contenitore alto 0, quindi crescendo da 17.6px (una riga di testo) a
   --fig-h spingerebbe il testo verso l'alto di meta' della differenza.
   Il calc restituisce esattamente quello scarto, cosi' la riga di link resta
   al pixel dov'era prima delle figure. */
.socialbar-inner {
  position: absolute;
  bottom: calc((1.1rem - var(--fig-h)) / 2);
  color: rgba(0, 0, 0, .5);
  font-family: JetBrains Mono, monospace;
  display: flex;
  align-items: center;
  gap: var(--fig-gap);
}
.social-link:hover { color: rgb(205 63 37); }

/* ===== modal =====
   originale: fixed inset-0 bg-black/50 z-40 + panel centrato,
   max = calc(min(100vh,100vw,800px) - 32px), nessuna animazione */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, .5);
  z-index: 40;
}
.modal-center {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.modal-panel {
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  max-height: calc(min(100vh, 100vw, 800px) - 32px);
  max-width: calc(min(100vh, 100vw, 800px) - 32px);
}
.modal-image {
  display: block;
  width: calc(min(100vh, 100vw, 800px) - 32px);
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* ===== pagina /nuthoughts =====
   valori estratti da d291c0c2a5f69739.css (build custom del sito):
   - .prose: color:inherit; max-width:65ch; font-size:inherit; line-height:1.1rem
     (NON i default del plugin typography)
   - .prose p: margin 1.3em; primo figlio mt:0, ultimo figlio mb:0
   - .text-xs custom: .625rem/1rem
   Il body nero/bianco è inline nell'HTML come nell'originale (styled-jsx). */

/* originale: p-6 pb-4 flex items-center */
.nt-header {
  padding: 1.5rem;
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
}

/* originale: pr-1.5 */
.nt-back { padding-right: .375rem; }

/* originale: ml-3 text-xs (custom) */
.nt-date {
  margin-left: .75rem;
  font-size: .625rem;
  line-height: 1rem;
}

/* Tasto lingua, in alto a destra dell'header. margin-left:auto lo spinge al
   bordo destro dentro il padding da 1.5rem gia' presente sull'header.
   Stessa scala tipografica della data; niente verde perche' non e' un link. */
.nt-lang {
  margin-left: auto;
  font-family: inherit;
  font-size: .625rem;
  line-height: 1rem;
  letter-spacing: .08em;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  padding: .15rem .4rem;
  cursor: pointer;
}

.nt-lang:hover {
  border-color: #fff;
}

/* originale: prose (custom) — max-width:65ch poi override utility 440px */
.prose {
  color: inherit;
  max-width: 65ch;
  font-size: inherit;
  line-height: 1.1rem;
}
.prose p { margin-top: 1.3em; margin-bottom: 1.3em; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

/* originale: mx-6 pb-6 max-w-[440px] */
.nt-content {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  padding-bottom: 1.5rem;
  max-width: 440px;
}

/* pagina master — originale: max-w-[900px] */
.nt-content--master { max-width: 900px; }

/* originale: flex justify-center my-5 (vince sul margin-bottom:0 di :last-child,
   la utility viene dopo nel CSS originale) */
.prose > .nt-figure {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

/* next/image layout=intrinsic 210x140: max 210px, si restringe col contenitore */
.nt-photo {
  display: block;
  width: 210px;
  max-width: 100%;
  height: auto;
}

/* pagina master: immagine più grande dell'originale a 210px */
.nt-photo--master { width: 300px; }

/* figure allineata al margine sinistro del contenuto, come nell'originale:
   nessun centraggio, la didascalia parte dal bordo sinistro dell'immagine.
   width:max-content stringe la figure sull'immagine, così la didascalia vive
   nella sua stessa colonna invece di attraversare tutto il contenuto.
   Stesso stacco verticale (my-5) delle altre figure del sito. */
.prose > .nt-plate {
  margin: 1.25rem 0;
  width: max-content;
  max-width: 100%;
}

/* stessa scala tipografica di .nt-date, smorzata come i link secondari */
.nt-caption {
  margin-top: .5rem;
  font-size: .625rem;
  line-height: 1rem;
  color: rgba(255, 255, 255, .5);
}

/* ===== FIGURE (sprite click-to-play) =====
   Due figure animate ai lati della riga social. L'asset di partenza e' un GIF
   (640x640, 350 frame dichiarati, 175 reali, sfondo opaco, loop infinito).
   Un GIF nel browser non ha API: non si ferma, non si riavvolge, non si
   riproduce una volta sola. E' stato quindi convertito una tantum in uno sprite
   sheet PNG con tools/build-sprite.py, pilotato a mano in main.js.
   Nessuna transition: come nel resto del foglio, e comunque lo sprite si muove
   a scatti di frame per definizione. */

:root {
  /* Unica misura da toccare: l'altezza della persona a riposo. Tutto il resto ne
     e' un multiplo, perche' la figura non e' centrata nel crop dello sprite e va
     riallineata al box. */
  --fig-h: 38px;
  --fig-gap: 30px;

  /* Rapporti stampati da tools/build-sprite.py: derivano dal crop 370x504 e dal
     fotogramma di riposo (frame 158), che dentro il crop occupa 259x427 con
     origine (77,32). Se si cambia scala, ritaglio o frame di riposo vanno
     rigenerati da li', non ricalcolati a mano. */
  --fig-w: calc(var(--fig-h) * 0.6066);
  --fig-sprite-w: calc(var(--fig-h) * 0.8665);
  --fig-sprite-h: calc(var(--fig-h) * 1.1803);
  --fig-offset-x: calc(var(--fig-h) * -0.1803);
  --fig-offset-y: calc(var(--fig-h) * -0.0749);
}

/* Sotto i 360px la riga starebbe stretta: si accorcia lo stacco, non si toglie
   nulla. 195px di testo + 2*23 di figure + 2*20 di gap = 281px, che a 320px di
   viewport lascia 19px di margine per lato. */
@media (max-width: 360px) {
  :root { --fig-gap: 20px; }
}

/* Box fisso in ogni stato: e' esattamente la sagoma della persona a riposo.
   Nessuno stato tocca il layout. */
.figure {
  position: relative;
  flex: none;
  width: var(--fig-w);
  height: var(--fig-h);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Il box e' 23x38: stretto sotto il minimo WCAG di 44px sull'asse orizzontale.
   L'area di tocco sale a 45x60 senza che il box occupi un pixel in piu' nel flusso. */
.figure::before {
  content: "";
  position: absolute;
  inset: -11px;
}

/* Con prefers-reduced-motion main.js disabilita il bottone: resta il frame di
   riposo, ma non deve piu' sembrare cliccabile. */
.figure[disabled] { cursor: default; }

/* Lo sprite e' un po' piu' grande del bottone e ne esce durante l'animazione,
   ma di poco: ancorando il box a una figura intera invece che al blob, lo sbordo
   massimo e' 0.180 dell'altezza a sinistra e 0.105 sotto (circa 7px e 4px a 38px).
   pointer-events:none lascia il click al bottone sotto.

   background-position parte dal fotogramma di riposo (frame 158 = colonna 4,
   riga 11) e non da 0/0, che sarebbe il blob: cosi' la persona e' gia' quella
   giusta al primo paint, senza aspettare il JS e senza lampeggiare.

   background-size e' dichiarato su ENTRAMBI gli assi di proposito. Con `auto`
   il browser ricaverebbe l'altezza dal rapporto del foglio (1400x1768) e la
   cella verrebbe 67.87px invece di 68: uno scarto che si accumula fino a ~1.6px
   sull'ultima riga della griglia, tagliando i frame. */
.figure-sprite {
  position: absolute;
  left: var(--fig-offset-x);
  top: var(--fig-offset-y);
  width: var(--fig-sprite-w);
  height: var(--fig-sprite-h);
  pointer-events: none;
  background-image: url(assets/figure-sprite.png);
  background-repeat: no-repeat;
  background-size: calc(var(--fig-sprite-w) * 14) calc(var(--fig-sprite-h) * 13);
  background-position: calc(var(--fig-sprite-w) * -4) calc(var(--fig-sprite-h) * -11);
}