/* ORAȘUL VOCILOR · CARTEA CUNOAȘTERII
   Foi de papirus, tăiate din suluri de dinaintea orașului și cusute
   pe măsură ce se scriu. O foaie se vede deodată.

   Papirusul are paleta lui, separată de a orașului. Aici nu e noapte. */

:root{
  --papirus:#e3d3ab;
  --papirus-umbra:#cbb689;
  --papirus-lumina:#f0e4c4;
  --cerneala:#3a2f22;
  --cerneala-pal:#7d6b52;
  --rosu-titlu:#8c3a24;      /* rubricile, ca în manuscrise */
  --ata:#8a7550;
  --serif:Georgia,"Times New Roman","DejaVu Serif",serif;
}

*{box-sizing:border-box}

body.cartea{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 50% 30%, #221d17 0%, #100d0a 75%);
  font-family:var(--serif);
  color:var(--cerneala);
  padding:0 0 60px;
}

/* ————— pupitrul ————— */

.inapoi-oras{
  display:inline-block;
  margin:20px 0 0 22px;
  color:#9c8a68;
  font-size:.85rem;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.inapoi-oras:hover, .inapoi-oras:focus-visible{color:#d8c191;border-bottom-color:#d8c191}

.titlu-cartii{
  text-align:center;
  padding:16px 20px 26px;
  color:#c3ab7d;
}
.titlu-cartii h1{
  margin:0;
  font-size:clamp(1.5rem,4vw,2.1rem);
  font-weight:normal;
  letter-spacing:.08em;
}
.titlu-cartii p{
  margin:.5em 0 0;
  font-size:.85rem;
  font-style:italic;
  color:#7d6c4e;
}

/* ————— foaia ————— */

.foaie{
  position:relative;
  width:min(92vw,42rem);
  margin:0 auto;
  padding:54px 46px 60px 62px;   /* mai mult la stânga: acolo e cusătura */
  background:
    /* pete de vârstă */
    radial-gradient(ellipse 40% 24% at 18% 12%, rgba(150,120,70,.13), transparent 70%),
    radial-gradient(ellipse 30% 20% at 86% 72%, rgba(150,120,70,.11), transparent 70%),
    radial-gradient(ellipse 22% 14% at 62% 34%, rgba(140,110,60,.08), transparent 70%),
    /* fibrele verticale, foarte slabe */
    repeating-linear-gradient(90deg,
      rgba(120,95,55,.045) 0 1px, transparent 1px 7px),
    /* fibrele orizontale, și mai slabe */
    repeating-linear-gradient(0deg,
      rgba(120,95,55,.035) 0 1px, transparent 1px 5px),
    /* umbra pe margini, ca la o foaie tăiată */
    linear-gradient(100deg, var(--papirus-umbra) 0%, var(--papirus) 12%,
      var(--papirus-lumina) 48%, var(--papirus) 88%, var(--papirus-umbra) 100%);
  box-shadow:0 18px 50px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.06) inset;
  /* marginea tăiată neregulat */
  clip-path:polygon(
    0.4% 0.6%, 22% 0%, 47% 0.9%, 71% 0.1%, 99.6% 0.7%,
    100% 26%, 99.2% 51%, 100% 78%, 99.5% 99.4%,
    76% 100%, 52% 99.1%, 28% 100%, 0.6% 99.3%,
    0% 74%, 0.8% 49%, 0% 25%);
}

/* cusătura, pe muchia din stânga */
.foaie::before{
  content:"";
  position:absolute;left:26px;top:8%;bottom:8%;
  width:2px;
  background:repeating-linear-gradient(180deg,
    var(--ata) 0 9px, transparent 9px 20px);
  opacity:.5;
}
/* îndoitura de lângă cusătură */
.foaie::after{
  content:"";
  position:absolute;left:34px;top:0;bottom:0;
  width:16px;
  background:linear-gradient(90deg, rgba(120,95,55,.14), transparent);
  pointer-events:none;
}

/* ————— textul de pe foaie ————— */

.foaie .rubrica{
  margin:0 0 .3em;
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rosu-titlu);
}
.foaie h2{
  margin:0 0 1.4em;
  font-size:clamp(1.3rem,3.4vw,1.7rem);
  font-weight:normal;
  line-height:1.3;
  color:var(--cerneala);
}
.foaie h3{
  margin:2em 0 .6em;
  font-size:1.05rem;
  font-weight:normal;
  color:var(--rosu-titlu);
}
.foaie p{
  margin:0 0 1.05em;
  font-size:1.06rem;
  line-height:1.78;
  text-align:justify;
  hyphens:auto;
}
.foaie p:first-of-type::first-letter{
  float:left;
  font-size:3.1em;
  line-height:.86;
  padding:.06em .1em 0 0;
  color:var(--rosu-titlu);
}
.foaie .fara-initiala::first-letter{float:none;font-size:inherit;padding:0;color:inherit}

.foaie .intrebare{
  margin:1.6em 0 .4em;
  font-style:italic;
  color:var(--cerneala-pal);
}

/* tabelul, ca un tabel trasat cu mâna */
.foaie table{
  width:100%;
  border-collapse:collapse;
  margin:1.2em 0 1.4em;
  font-size:.97rem;
}
.foaie th, .foaie td{
  text-align:left;
  padding:.5em .6em;
  border-bottom:1px solid rgba(120,95,55,.28);
  vertical-align:top;
}
.foaie th{
  font-weight:normal;
  font-style:italic;
  color:var(--rosu-titlu);
  border-bottom-width:2px;
}

/* replica lui Ale, o singură dată, la începutul cărții */
.ale{
  margin:0 0 2em;
  padding:0 0 0 16px;
  border-left:2px solid var(--rosu-titlu);
  font-style:italic;
  color:var(--cerneala-pal);
  font-size:.98rem;
}
.ale .cine{
  display:block;
  font-style:normal;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rosu-titlu);
  margin-bottom:.3em;
}

/* ————— cuprinsul ————— */

.cuprins{list-style:none;margin:0;padding:0}
.cuprins li{
  display:flex;align-items:baseline;gap:.6em;
  padding:.42em 0;
  border-bottom:1px dotted rgba(120,95,55,.3);
}
.cuprins .nr{
  flex:none;width:3.6em;
  font-size:.82rem;
  color:var(--cerneala-pal);
}
.cuprins a{color:var(--cerneala);text-decoration:none;border-bottom:1px solid rgba(58,47,34,.35)}
.cuprins a:hover, .cuprins a:focus-visible{color:var(--rosu-titlu);border-bottom-color:var(--rosu-titlu)}

/* foile care nu s-au scris încă: se văd doar cele apropiate,
   și se sting cu cât sunt mai departe */
.cuprins .goala{color:var(--cerneala-pal)}
.cuprins li.goala-1{opacity:.55}
.cuprins li.goala-2{opacity:.34}
.cuprins li.goala-3{opacity:.18}

.partea{
  margin:2em 0 .7em;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rosu-titlu);
}
.partea:first-child{margin-top:0}

.mai-departe{
  margin:1.4em 0 0;
  font-size:.9rem;
  font-style:italic;
  color:var(--cerneala-pal);
  text-align:center;
}

/* ————— întoarcerea filei ————— */

.fila{
  display:flex;justify-content:space-between;align-items:center;gap:1em;
  width:min(92vw,42rem);
  margin:26px auto 0;
}
.fila button, .fila a{
  font-family:inherit;font-size:.9rem;
  color:#a3906a;
  background:none;border:none;
  padding:.5em .2em;
  cursor:pointer;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.fila button:hover, .fila button:focus-visible,
.fila a:hover, .fila a:focus-visible{color:#d8c191;border-bottom-color:#d8c191;outline:none}
.fila button[disabled]{opacity:.28;cursor:default}
.fila button[disabled]:hover{color:#a3906a;border-bottom-color:transparent}
.fila .unde{font-size:.8rem;color:#6f6047;letter-spacing:.1em}

[hidden]{display:none !important}

/* ————— telefon ————— */

@media (max-width:640px){
  .foaie{
    width:100%;
    padding:38px 24px 44px 44px;
    clip-path:none;              /* pe ecran mic marginea tăiată se pierde oricum */
    border-radius:2px;
  }
  .foaie::before{left:18px}
  .foaie::after{left:24px;width:11px}
  .foaie p{font-size:1.01rem;text-align:left;hyphens:none}
  .fila{width:100%;padding:0 20px}
}