/* rimar.me — il foglio di stile del sito dei libri (templates/sito/, generato da bin/sito/genera.py).
   Design approvato da Marco l'8/10: tema scuro, Inter (taglio display ai titoli), arancione RIMAR, animazioni solo CSS
   legate allo scroll; niente script. Chi chiede meno movimento vede la pagina ferma; i browser senza animation-timeline
   vedono la pagina identica e statica. */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-fd95d0285e.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-italic-aa17f30284.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #0B0B0B;
  --bg2: #121212;
  --fg: #F2F0EB;
  --fg2: #C9C5BE;
  --fg3: #A7A39C;
  --fg4: #8E8A83;
  --testo: #D4D0C9;
  --linea: rgba(242, 240, 235, 0.08);
  --linea2: rgba(242, 240, 235, 0.12);
  --accento: #E9521D;
  --ink: #0B0B0B;
  --molla: cubic-bezier(.2, .75, .1, 1);
  --ombra: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 50px -22px rgba(0, 0, 0, 0.95);
  --ombra-grande: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 60px 100px -30px rgba(0, 0, 0, 0.95);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--fg); }
a:hover { color: #FFFFFF; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 4px; }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.salta { position: absolute; left: -9999px; top: 12px; z-index: 50; padding: 12px 18px; background: var(--fg); color: var(--ink); border-radius: 999px; font-weight: 700; }
.salta:focus { left: 16px; }

/* ------------------------------------------------------------------ testata */
.testata { position: sticky; top: 0; z-index: 20; background: rgba(11, 11, 11, 0.72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--linea); }
.testata .wrap { padding-block: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; }
.marchio { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.marchio svg { width: 112px; height: 25px; }
.marchio span { margin-left: 12px; padding-left: 12px; border-left: 1px solid rgba(242, 240, 235, 0.22); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); }
/* il logo chiaro del marchio su fondo scuro (brand/logo/rimar-logo-light: scritta bianca, chevron arancione) */
.m-testo { fill: #FFFFFF; }
.m-chev { fill: var(--accento); }
.menu { display: flex; flex-wrap: wrap; gap: 0 26px; font-size: 15px; font-weight: 500; }
.menu a { padding: 12px 0; text-decoration: none; }
.menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accento); }

/* ------------------------------------------------------------------ pezzi comuni */
.occhiello { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg3); }
.occhiello::before { content: ""; width: 22px; height: 2px; background: var(--accento); }
.occhiello.acc { color: var(--accento); }
.titolo { margin: 0; font-weight: 900; letter-spacing: -0.045em; line-height: 0.95; }
.sottotitolo { margin: 0; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.5; color: var(--fg2); }
.autore { margin: 0; font-size: 15px; color: var(--fg3); }
.autore strong { color: var(--fg); font-weight: 600; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .3s var(--molla); }
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn-acc, .btn-acc:hover { background: var(--accento); color: #FFFFFF; }   /* testo bianco sui pulsanti arancioni (Marco, 8/10) */
.btn-chiaro, .btn-chiaro:hover { background: var(--fg); color: var(--ink); }
.btn-scuro, .btn-scuro:hover { background: var(--ink); color: var(--fg); }
.btn-bordo { border: 1.5px solid rgba(242, 240, 235, 0.4); color: var(--fg); font-weight: 600; }
/* ogni copertina con la sua proporzione (5:8 gli ebook, 8,5x11 i solo cartacei, 7:10 il libro di cucina), mai tagliata:
   la misura vera la danno width e height dell'img (8/10: forzate a 5:8 perdevano i lati) */
.copertina { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: var(--ombra); }
.cv { text-decoration: none; }
.cv img { transition: transform .6s var(--molla), box-shadow .6s var(--molla); }
.cv:hover img { transform: translateY(-12px) rotate(-1.5deg); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 40px 70px -24px rgba(233, 82, 29, 0.45); }
.cv:focus-visible { outline-offset: 8px; }
.testa-sezione { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(40px, 6vw, 72px); }
.testa-sezione h2 { margin: 0; font-size: clamp(40px, 7vw, 96px); line-height: 0.95; font-weight: 900; letter-spacing: -0.045em; }
.testa-sezione span, .testa-sezione a { font-size: 15px; color: var(--fg3); padding: 12px 0; }
.testa-sezione a { color: var(--fg); font-weight: 600; }

/* ------------------------------------------------------------------ home: apertura */
.apertura { position: relative; overflow: hidden; }
.apertura-chev { position: absolute; right: -14%; top: -8%; width: 70%; max-width: 900px; opacity: 0.10; pointer-events: none; --d: 260px; }
.apertura-chev svg { display: block; width: 100%; height: auto; }
.apertura .wrap { position: relative; padding-block: clamp(56px, 9vw, 120px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(48px, 6vw, 72px); }
.apertura-testo { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.apertura h1 { font-size: clamp(46px, 9vw, 128px); line-height: 0.92; }
.apertura h1 .acc { color: var(--accento); }
.apertura-lead { margin: 0; max-width: 520px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--fg2); }
.apertura .azioni { gap: 12px 28px; margin-top: 4px; }
.link-sottile { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(242, 240, 235, 0.35); }

/* ------------------------------------------------------------------ home: nastro, frase, ultima uscita */
.nastro { border-block: 1px solid var(--linea); padding: 36px 0; overflow: hidden; }
.nastro-pista { display: flex; width: max-content; }
.nastro a { display: block; padding-right: 28px; }
.nastro img { height: clamp(190px, 22vw, 300px); width: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 40px -18px rgba(0, 0, 0, 0.9); }
.frase .wrap { padding-block: clamp(80px, 12vw, 180px); }
.frase p { margin: 0; max-width: 1080px; font-size: clamp(30px, 4.6vw, 64px); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; }
.ultima { background: var(--bg2); }
.ultima .wrap { padding-block: clamp(72px, 10vw, 140px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 7vw, 96px); }
.ultima-cop { flex: 0 1 400px; min-width: 220px; display: block; }
.ultima-cop .copertina { box-shadow: var(--ombra-grande); }
.ultima-testo { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ultima h2 { font-size: clamp(36px, 5vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -0.035em; }
.ultima-lead { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.65; color: var(--fg2); }
.ultima .azioni { margin-top: 8px; }

/* ------------------------------------------------------------------ catalogo */
.catalogo .wrap { padding-block: clamp(72px, 10vw, 140px); }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 22vw, 220px), 1fr)); gap: clamp(40px, 5vw, 64px) clamp(20px, 3vw, 36px); }
.scheda { display: flex; flex-direction: column; gap: 16px; }
/* lo scaffale: un riquadro uguale per tutte, la copertina intera appoggiata in basso e al centro */
.scheda-cop { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 3 / 4; }
.scheda-cop .copertina { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.scheda-testo { display: flex; flex-direction: column; gap: 5px; }
.scheda-t { font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.scheda-a { font-size: 14px; color: var(--fg3); }
.scheda-m { font-size: 13px; color: var(--fg4); margin-top: 2px; }

/* ------------------------------------------------------------------ fascia della reading list */
.fascia { position: relative; overflow: hidden; background: var(--accento); color: var(--ink); }
.fascia-chev { position: absolute; right: -4%; top: 10%; width: 34%; max-width: 420px; opacity: 0.16; pointer-events: none; --d: -120px; }
.fascia-chev svg { display: block; width: 100%; height: auto; fill: var(--ink); }
.fascia .wrap { position: relative; padding-block: clamp(64px, 9vw, 120px); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.fascia-presto { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.fascia h2 { max-width: 900px; font-size: clamp(40px, 6.4vw, 88px); }
.fascia-lead { margin: 0; max-width: 520px; font-size: 18px; line-height: 1.5; font-weight: 500; }
.fascia .btn { margin-top: 8px; }

/* ------------------------------------------------------------------ piede */
.piede { border-top: 1px solid var(--linea); }
.piede .wrap { padding-block: 36px 40px; }
.piede-grande { border-top: 0; }
.piede-grande .wrap { padding-block: clamp(56px, 8vw, 96px) 40px; display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.piede-marchio { display: block; width: 100%; height: auto; }
.piede-riga { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 40px; font-size: 14px; color: var(--fg3); }
.piede nav { display: flex; flex-wrap: wrap; gap: 0 26px; }
.piede nav a { padding: 12px 0; text-decoration: none; }

/* ------------------------------------------------------------------ pagina del libro */
.briciole { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 24px; font-size: 14px; color: var(--fg3); }
.briciole a, .briciole span { padding: 8px 0; }
.briciole a { color: var(--fg3); text-decoration: none; }
.briciole [aria-current] { color: var(--fg); }
.libro .wrap { padding-block: clamp(24px, 4vw, 56px) clamp(64px, 9vw, 120px); display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(40px, 6vw, 88px); }
.libro-cop { flex: 0 1 400px; min-width: 220px; }
.libro-cop .copertina { box-shadow: var(--ombra-grande); }
@media (min-width: 900px) { .libro-cop { position: sticky; top: 110px; } }
.libro-testo { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.libro h1 { font-size: clamp(40px, 5.6vw, 76px); }
.libro .azioni { margin-top: 4px; }
.dati { margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px; padding: 22px 0; border-block: 1px solid var(--linea2); font-size: 14px; }
.dati div { display: flex; flex-direction: column; gap: 4px; }
.dati dt { color: var(--fg3); }
.dati dd { margin: 0; font-weight: 600; }
.descrizione { max-width: 640px; margin-top: 12px; font-size: 17px; line-height: 1.7; color: var(--testo); }
.descrizione > :first-child { font-size: 20px; line-height: 1.5; color: var(--fg); }
.descrizione p, .descrizione ul, .descrizione ol { margin: 0 0 18px; }
.descrizione ul, .descrizione ol { padding-left: 22px; }
.descrizione li { margin-bottom: 12px; }
.descrizione b, .descrizione strong { color: var(--fg); }
.dentro { background: var(--bg2); }
.dentro .wrap { padding-block: clamp(72px, 10vw, 140px); display: flex; flex-direction: column; gap: 28px; }
.dentro .testa-sezione { margin-bottom: 12px; }
.dentro img { width: 100%; border-radius: 6px; }
.dentro .a-largo { max-width: 970px; }
.dentro-riga { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; max-width: 970px; }
.dentro-riga .a-singola { flex: 0 1 300px; min-width: 0; }
.trio { flex: 1 1 560px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 20px; }
.altri .wrap { padding-block: clamp(72px, 10vw, 140px); }

/* ------------------------------------------------------------------ pagine brevi (/list/, 404, /callback) */
.breve .wrap { padding-block: clamp(72px, 11vw, 140px) clamp(80px, 12vw, 150px); display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.breve-chev { width: 52px; height: 60px; fill: var(--accento); }
.breve h1 { font-size: clamp(48px, 8vw, 112px); line-height: 0.92; }
.breve-lead { margin: 0; max-width: 560px; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.55; color: var(--fg2); }
.presto { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accento); }
.presto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accento); }

/* ------------------------------------------------------------------ movimento */
@keyframes sale { from { transform: translateY(108%); } }
@keyframes appare { from { opacity: 0; transform: translateY(16px); } }
@keyframes copertina { from { opacity: 0; transform: translateY(60px) rotate(-3deg) scale(.96); } }
@keyframes galleggia { 50% { transform: translateY(-14px); } }
@keyframes deriva { to { transform: translate3d(0, var(--d), 0); } }
@keyframes nastro { to { transform: translateX(-50%); } }
@keyframes entra { from { opacity: 0; transform: translateY(64px); } }
@keyframes accende { from { color: #34322F; } to { color: var(--fg); } }
@keyframes cresce { from { transform: scale(.84) rotate(-3deg); opacity: .35; } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes pulsa { 50% { opacity: .35; } }

.ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ln > span { display: block; animation: sale 1.15s var(--molla) both; animation-delay: var(--r, 0s); }
.appare { animation: appare 1.2s var(--molla) both; animation-delay: var(--r, 0s); }
.galleggia { animation: galleggia 7s ease-in-out infinite; animation-delay: var(--f, 0s); }
.libro-cop .entra-cop { animation: copertina 1.3s var(--molla) both; }
.libro-cop .galleggia { animation-duration: 8s; }
.nastro-pista { animation: nastro 65s linear infinite; }   /* un po' piu' veloce (Marco, 8/10) */
.nastro-pista:hover, .nastro-pista:focus-within { animation-play-state: paused; }
.presto::before { animation: pulsa 2.4s ease-in-out infinite; }

@supports (animation-timeline: view()) {
  .px { animation: deriva linear both; animation-timeline: scroll(root); animation-range: 0 1000px; }
  .gira { animation: gira linear both; animation-timeline: scroll(root); }
  .rv { animation: entra linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
  .rvs { animation: entra linear both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 12%) entry calc(70% + var(--i, 0) * 12%); }
  .parola { animation: accende linear both; animation-timeline: view(); animation-range: cover 22% cover 48%; }
  .cresce { animation: cresce linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
}

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

.apertura-chev svg { fill: var(--accento); }
.breve-lead strong { color: var(--fg); }

/* telefono: testata su una riga, parallasse del chevron piu' corta */
@media (max-width: 520px) {
  .testata .wrap { padding-block: 10px; gap: 0 16px; }
  .marchio svg { width: 96px; height: 22px; }
  .marchio span { display: none; }
  .menu { gap: 0 18px; font-size: 14px; }
}
@media (max-width: 760px) {
  .apertura-chev { --d: 120px; }
}