:root {
  color-scheme: dark;
  font: 100%/1.5 system-ui, sans-serif;
  background: #1b131a;
  color: #fbf0e8;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 14% 0%, #42242e, transparent 55%),
    radial-gradient(ellipse at 100% 10%, #262a42, transparent 51%), #1b131a;
}

.pagina { max-width: 74rem; margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 5vw, 3.5rem); }
.testata { margin-bottom: clamp(1.9rem, 4vw, 3.35rem); }
.marchio { display: flex; align-items: center; gap: .72rem; margin: 0 0 1.3rem; font: 1.15rem Georgia, serif; }
.petalo { display: inline-block; width: .65rem; height: 1rem; border-radius: 2px 80% 12% 70%; background: #f2a4ad; transform: rotate(27deg); }
h1 { margin: 0; font: 400 clamp(3.6rem, 8vw, 7rem)/.98 Georgia, serif; letter-spacing: -.06em; }
.descrizione { margin: .9rem 0 0; color: #e1ccd1; font-size: clamp(1rem, 2vw, 1.2rem); }

.catalogo { display: grid; gap: clamp(.9rem, 2vw, 1.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.scheda {
  display: grid;
  grid-template-columns: 39% minmax(0, 1fr);
  align-items: stretch;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--bordo);
  border-radius: .6rem;
  background: var(--superficie);
  color: inherit;
  text-decoration: none;
}

.rose { --bordo: #85525d; --accento: #f7acb5; --superficie: #271a22; }
.noir { --bordo: #575c84; --accento: #bcc7ff; --superficie: #1e2032; }
.scheda:hover { border-color: var(--accento); }
a:focus-visible { outline: 2px solid #ffdfc6; outline-offset: 4px; }
.scheda img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center top; }
.scheda-testo { display: flex; flex-direction: column; align-items: start; padding: clamp(.8rem, 2.1vw, 1.55rem); }
.collana { margin: 0 0 .48rem; color: var(--accento); font-size: .73rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.scheda h2 { margin: 0; font: 400 clamp(1.35rem, 3.1vw, 2.15rem)/1.07 Georgia, serif; letter-spacing: -.025em; }
.trama { margin: .7rem 0 .9rem; color: #e1ccd1; font-size: .96rem; }
.leggi { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; color: var(--accento); font-size: .9rem; font-weight: 650; }
.scheda:hover .leggi { text-decoration: underline; text-underline-offset: 4px; }
.ritorno { display: inline-block; margin-top: 1.4rem; color: #f7acb5; text-underline-offset: 4px; }

@media (max-width: 46rem) {
  .catalogo { grid-template-columns: minmax(0, 1fr); }
  .scheda { grid-template-columns: clamp(6rem, 33%, 11rem) minmax(0, 1fr); }
  .scheda h2 { font-size: clamp(1.35rem, 4.4vw, 2rem); }
  .trama { font-size: .9rem; }
}