/* ═══════════════════════════════════════════════════════════
   STILURILE SITE-ULUI
   ═══════════════════════════════════════════════════════════
   In CSS, comentariile se deschid cu slash-stea si se inchid cu
   stea-slash, exact ca blocul acesta. Nu apar pe site.

   Regula de baza se citeste asa:

       selector { proprietate: valoare; }

   Selectorul spune CE elemente sunt afectate, iar dintre acolade
   spui CUM arata. Fiecare linie se termina cu punct si virgula.
   ═══════════════════════════════════════════════════════════ */


/* ─── 1. PALETA ────────────────────────────────────────────
   Astea sunt "variabile": nume date culorilor. Le scrii o data
   aici si le folosesti peste tot mai jos ca var(--noapte).
   Schimbi codul de culoare aici → se schimba in tot site-ul.

   Codurile de tip #16121B sunt culori. Poti gasi altele pe
   coolors.co sau in orice program de desen.                  */

:root {
  --noapte:    #16121b;   /* fundal: negru cu tenta de vânătă      */
  --umbra:     #211b28;   /* fundal usor mai deschis, pentru panouri */
  --pergament: #ded5c4;   /* textul principal: os, nu alb pur      */
  --fum:       #8d8496;   /* text secundar, discret                */
  --sange:     #9b2a3a;   /* accent principal: oxblood             */
  --bronz:     #b08d57;   /* accent secundar: bronz patinat        */

  /* Fonturile, tot ca variabile */
  --font-titlu: "IM Fell English SC", Georgia, serif;
  --font-text:  "EB Garamond", Georgia, serif;
}


/* ─── 2. RESETARE ──────────────────────────────────────────
   Browserele adauga spatii implicite ciudate. Le anulam ca sa
   controlam noi spatierea.                                    */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* ─── 3. PAGINA IN ANSAMBLU ───────────────────────────────── */

body {
  background-color: var(--noapte);
  color: var(--pergament);
  font-family: var(--font-text);
  font-size: 1.15rem;      /* marimea textului; creste-o daca vrei mai mare */
  line-height: 1.75;       /* distanta dintre randuri                      */
  min-height: 100vh;
  position: relative;
}

/* Umbra din colturi, ca lumina unei lumanari in centru */
.vignet {
  position: fixed;
  inset: 0;                /* acopera tot ecranul */
  pointer-events: none;    /* nu blocheaza clickurile */
  background: radial-gradient(ellipse at 50% 35%,
              transparent 0%,
              rgba(0, 0, 0, 0.45) 75%,
              rgba(0, 0, 0, 0.75) 100%);
  z-index: 1;
}

/* Textura fina de hartie veche, aproape invizibila */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(rgba(176, 141, 87, 0.07) 1px, transparent 1px),
    radial-gradient(rgba(176, 141, 87, 0.05) 1px, transparent 1px);
  background-size: 23px 23px, 37px 37px;
  background-position: 0 0, 11px 17px;
  z-index: 1;
}

/* Coloana de text, centrata si limitata in latime.
   Textul lung e obositor daca depaseste ~70 de caractere pe rand. */
.pagina {
  position: relative;
  z-index: 2;              /* deasupra straturilor decorative */
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(3rem, 10vh, 7rem) 1.5rem 4rem;
}


/* ─── 4. FRONTISPICIU ────────────────────────────────────── */

.frontispiciu {
  text-align: center;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(176, 141, 87, 0.25);
  margin-bottom: 3.5rem;
}

.supratitlu {
  font-family: var(--font-titlu);
  font-size: 0.75rem;
  letter-spacing: 0.35em;   /* spatiaza literele, ca pe o coperta */
  text-transform: uppercase;
  color: var(--bronz);
  margin-bottom: 1.5rem;
}

.titlu {
  font-family: var(--font-titlu);
  /* clamp() = marime flexibila: minim 2.4rem, ideal 7% din latimea
     ecranului, maxim 4.2rem. Asa titlul nu se rupe pe telefon. */
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--pergament);
}

.subtitlu {
  font-style: italic;
  color: var(--fum);
  margin-top: 0.75rem;
}


/* ─── 5. CUPRINSUL ───────────────────────────────────────── */

.intrare {
  display: flex;            /* aseaza elementele pe acelasi rand */
  align-items: baseline;    /* le aliniaza pe linia de scris     */
  gap: 0.7rem;
  padding: 0.85rem 0;
  text-decoration: none;    /* scoate sublinierea implicita a linkurilor */
  color: var(--pergament);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: color 0.25s ease;  /* tranzitie lina la hover */
}

.numeral {
  font-family: var(--font-titlu);
  font-size: 0.8rem;
  color: var(--bronz);
  min-width: 2.2rem;        /* toate cifrele ocupa la fel de mult */
  letter-spacing: 0.1em;
}

.denumire {
  font-family: var(--font-titlu);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
}

/* Linia punctata care umple spatiul liber. "flex: 1" o face sa se
   intinda cat mai mult, exact ca intr-un cuprins tiparit. */
.puncte {
  flex: 1;
  border-bottom: 1px dotted rgba(176, 141, 87, 0.45);
  transform: translateY(-0.2em);
  transition: border-color 0.25s ease;
}

.cantitate {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--fum);
  white-space: nowrap;      /* nu rupe textul pe doua randuri */
}

/* :hover = cand treci mouse-ul peste. :focus-visible = cand ajungi
   pe link navigand cu tastatura (Tab). Le tratam la fel. */
.intrare:hover .denumire,
.intrare:focus-visible .denumire {
  color: var(--sange);
}

.intrare:hover .puncte,
.intrare:focus-visible .puncte {
  border-color: var(--sange);
}

/* Contur clar pentru navigarea cu tastatura */
.intrare:focus-visible {
  outline: 1px solid var(--bronz);
  outline-offset: 6px;
}


/* ─── 6. PREFATA ─────────────────────────────────────────── */

.prefata {
  margin-top: 3.5rem;
  color: var(--fum);
}

.prefata p + p {
  margin-top: 1.2rem;       /* spatiu doar intre paragrafe, nu inainte de primul */
}

/* Litera mare de inceput, ca in cartile vechi.
   ::first-letter = prima litera din primul paragraf. */
.prefata p:first-child::first-letter {
  font-family: var(--font-titlu);
  font-size: 3.4rem;
  float: left;              /* textul curge in jurul ei */
  line-height: 0.85;
  padding: 0.1em 0.5rem 0 0;
  color: var(--bronz);
}


/* ─── 7. COLOFON ─────────────────────────────────────────── */

.colofon {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(176, 141, 87, 0.25);
  text-align: center;
  font-size: 0.9rem;
  color: var(--fum);
}

.ornament {
  color: var(--bronz);
  margin-bottom: 1rem;
  letter-spacing: 0.5em;
}

.colofon strong {
  font-weight: 400;
  color: var(--pergament);
}

.marginalie {
  font-style: italic;
  font-size: 0.8rem;
  margin-top: 0.4rem;
  opacity: 0.7;
}


/* ─── 8. APARITIA LA INCARCARE ────────────────────────────
   Randurile cuprinsului apar unul dupa altul, ca la deschiderea
   unei carti. "@keyframes" descrie animatia, apoi o aplicam.  */

@keyframes apare {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.frontispiciu,
.intrare,
.prefata,
.colofon {
  animation: apare 0.9s ease both;
}

/* Intarzieri crescatoare, ca sa nu apara toate simultan.
   nth-child(1) = primul link, (2) = al doilea, si asa mai departe. */
.intrare:nth-child(1) { animation-delay: 0.15s; }
.intrare:nth-child(2) { animation-delay: 0.25s; }
.intrare:nth-child(3) { animation-delay: 0.35s; }
.intrare:nth-child(4) { animation-delay: 0.45s; }
.prefata              { animation-delay: 0.6s;  }
.colofon              { animation-delay: 0.75s; }

/* Respecta setarea de sistem a celor care nu suporta animatii */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}


/* ─── 9. TELEFON ──────────────────────────────────────────
   @media = "aplica regulile astea DOAR daca ecranul e ingust".
   Tot ce e aici se suprapune peste regulile de mai sus.       */

@media (max-width: 34rem) {
  body {
    font-size: 1.05rem;
  }

  .denumire {
    font-size: 1.15rem;
  }

  .numeral {
    min-width: 1.6rem;
  }

  /* Pe ecran ingust, numarul de fise trece pe randul urmator */
  .intrare {
    flex-wrap: wrap;
  }

  .cantitate {
    width: 100%;
    padding-left: 2.3rem;
    margin-top: -0.4rem;
  }

  .prefata p:first-child::first-letter {
    font-size: 2.8rem;
  }
}