/* =====================================================
   1. UKŁAD STRONY MARGINALIA
   ===================================================== */

.marginalia-page{

max-width:760px;
margin:80px auto;
padding:40px 30px 80px 30px;

background:#fafafa;

border:1px solid #e6ded5;
border-radius:6px;

box-shadow:0 10px 28px rgba(0,0,0,0.10);

font-variant-ligatures: common-ligatures;
text-rendering: optimizeLegibility;

}


/* =====================================================
   2. TYTUŁ STRONY
   ===================================================== */

.marginalia-page h1{

text-align:center;
font-size:34px;
letter-spacing:1px;

margin-top:60px;
margin-bottom:10px;

color:#3a2a1f;

}

.marginalia-page h1::after{

content:"";
display:block;

width:90px;
height:1px;

background:#cbb9a7;

margin:14px auto 18px auto;

}


/* =====================================================
   3. CYTAT POD TYTUŁEM
   ===================================================== */
.marginalia-quote{
text-align:center;
font-style:italic;
font-size:18px;
color:#777;
margin:20px 0 35px 0;
}

.marginalia-highlight{
color:#8b5e3c;
}

/* =====================================================
   4. WSTĘP STRONY
   ===================================================== */

.marginalia-intro{

font-size:20px;
color:#555;

margin-top:10px;
margin-bottom:50px;

}


/* =====================================================
   5. BLOK ARTYKUŁU
   ===================================================== */

.marginalia-entry{
max-width:760px;
line-height:1.7;
font-size:1.05em;
margin:0 auto;
padding:30px 20px;
}

.marginalia-entry h2{
margin:8px 0 4px 0;
}

.marginalia-entry h3{
margin:4px 0 12px 0;
}


@media (max-width:600px){

.marginalia-entry{
padding:35px 22px;
}

}
/* =====================================================
   6. TYTUŁY ARTYKUŁÓW
   ===================================================== */

.marginalia-page h2{

text-align:center;
font-size:34px;

letter-spacing:1px;

margin-top:60px;
margin-bottom:10px;

color:#3a2a1f;

}

.marginalia-page h3{

margin-top:30px;
margin-bottom:16px;

font-size:26px;
color:#3a2a1f;

text-align:center;
line-height:1.3;

}

.marginalia-page h3::after{

content:"";
display:block;

width:100px;
height:1px;

background:#d8cfc3;

margin:10px auto 0 auto;

}


/* =====================================================
   7. PARAGRAFY
   ===================================================== */

.marginalia-page p{

margin-top:12px;
margin-bottom:18px;

font-size:18px;
color: inherit;

line-height:1.75;
letter-spacing: -0.01em;
text-align:left;

hyphens:auto;

hanging-punctuation: first;

}




/* =====================================================
   8. INICJAŁ (DUŻA PIERWSZA LITERA)
   ===================================================== */

.marginalia-entry > p:first-of-type::first-letter{

float:left;

font-size:3.4em;
line-height:0.9;

margin-right:8px;
margin-top:4px;

color:#8a4b2a;

font-family:Georgia,"Times New Roman",serif;

}


/* =====================================================
   9. OBRAZY W TEKŚCIE
   ===================================================== */
.img{
max-width:160px;
height:auto;
border-radius:4px;
}

.left{
float:left;
margin:8px 22px 14px 0;
}

.right{
float:right;
margin:8px 0 14px 22px;
}

/* ustawienia dla telefonów */

@media (max-width:600px){

.img{
max-width:160px;
}

.left,
.right{
float:none;
display:block;
margin:10px auto;
}

}

/* =====================================================
   10. ILUSTRACJE Z PODPISEM
   ===================================================== */

.figure{

width:160px;
text-align:center;

margin:6px 22px 14px 22px;

}

.figure img{

width:100%;
border-radius:4px;

}

.figure figcaption{

font-size:0.8em;
color:#666;

margin-top:4px;

font-style:italic;
line-height:1.3;

}


/* =====================================================
   11. SEPARATOR LITERACKI
   ===================================================== */

.marginalia-separator{
text-align:center;
margin:10px 0 18px 0;
color:#8a4b2a;
font-size:13px;
}

.marginalia-separator:before,
.marginalia-separator:after{

content:"";

display:inline-block;

width:35%;
height:1px;

background:#d8cfc3;

vertical-align:middle;

margin:0 10px;

}


/* =====================================================
   12. LINK "CZYTAJ DALEJ"
   ===================================================== */

.more-button{

display:inline-block;

margin-top:12px;

font-size:15px;
font-weight:500;

letter-spacing:0.04em;

color: #8b5e3c;

cursor:pointer;

position:relative;

transition:color 0.2s ease;

}


/* cienka linia pod linkiem */

.more-button::after{

content:"";

position:absolute;
left:0;
bottom:-3px;

width:100%;
height:0.5px;

background:#8b5e3c;

transition:background 0.2s ease;

}


/* strzałka */

.more-button .arrow{

display:inline-block;

margin-left:5px;

transition:transform 0.25s ease;

pointer-events:none;

}


/* hover */

.more-button:hover{

color:  #d19a6a;

}

.more-button:hover .arrow{

transform:translateX(6px);

}

.more-button:hover::after{

background:#d19a6a;

}


/* =====================================================
   13. ROZWIJANY TEKST
   ===================================================== */

.more-text{

display:none;
margin-top:10px;

}

.more-text.show{
display:block;

}


/* wyłączenie inicjałów w rozwinięciu */

.more-text p::first-letter{

font-size:inherit !important;
float:none !important;

margin:0 !important;
padding:0 !important;

color:inherit !important;

}


.marginalia-entry blockquote,
.marginalia-entry blockquote p,
p.cytat{
color:#8b5e3c;
font-style:italic;
}

.marginalia-entry blockquote{
margin:20px 0 20px 30px;
max-width:520px;
line-height:1.7;
font-size:1.05em;
text-align:left;
}

p.cytat{
max-width:520px;
color:#8b5e3c;
font-style:italic;
margin:18px 30px;
}

.cytat{
color:#8b5e3c;
font-style:italic;
font-size:1.05em;
}

/* =====================================================
   SPIS TREŚCI – MARGINALIA (wersja książkowa)
   ===================================================== */


/* ===== KONTENER CAŁEGO SPISU ===== */
.marginalia-list {
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
}


/* ===== TYTUŁ "Spis treści" ===== */
.marginalia-list h2 {
  font-size: 28px;
  margin-bottom: 40px; /* odstęp od listy */
}


/* cienka linia pod tytułem */
.marginalia-list h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;

  background: rgba(138, 75, 42, 0.3);

  margin: 15px auto 0;
}

/* =======================================
   MARGINALIA – SPIS TREŚCI (KSIĄŻKOWY)
======================================= */

/* GŁÓWNY BLOK */
.marginalia-list {
  max-width: 800px;
  margin: 0 auto 60px;
}

/* NAGŁÓWEK */
.marginalia-list h2 {
  font-size: 28px;
  margin-bottom: 40px;
  text-align: center;
}

/* LINIA POD TYTUŁEM */
.marginalia-list h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  background: rgba(138, 75, 42, 0.3);
  margin: 15px auto 0;
}

/* LISTA */
.marginalia-list ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;
  text-align: left;
  counter-reset: item;
}

/* ELEMENT */
.marginalia-list li {
  counter-increment: item;
  padding: 6px 0 6px 30px; /* miejsce na numer */
  line-height: 1.45;
  position: relative;      /* potrzebne do wyrównania numerów */
}

/* NUMER (WYRÓWNANY!) */
.marginalia-list li::before {
  content: counter(item) ". ";
  position: absolute;
  left: 0;
  width: 26px;             /* równa kolumna numerów */
  text-align: right;
  opacity: 0.5;
}

/* LINKI */
.marginalia-list a {
  text-decoration: none;
  color: inherit;
  opacity: 0.85;
  transition: color 0.25s ease, opacity 0.25s ease;
}

/* HOVER */
.marginalia-list a:hover {
  color: #8a4b2a;
  opacity: 1;
}

/* =======================================
   DWIE KOLUMNY (DESKTOP)
======================================= */

@media (min-width: 768px) {
  .marginalia-list ul {
    column-count: 2;
    column-gap: 80px;
  }

  .marginalia-list li {
    break-inside: avoid;
  }
}

/* ===== POWRÓT NA GÓRĘ ===== */

.back-top {
  display: block;
  margin-top: 25px;

  font-size: 14px;
  color: #8b5e3c;

  text-decoration: none;
  text-align: right;

  opacity: 0.7;
  transition: all 0.25s ease;
}

.back-top:hover {
  opacity: 1;
  color: #d19a6a;
}


/* =====================================================
   15. WERSJA MOBILNA
   ===================================================== */

@media (max-width:600px){

.marginalia-page{

padding:30px 20px 60px 20px;

}