aside{font-size:smaller}

/* зірочки не мають бути частиною текстів */
hr.stars:after{content:"* * *";display:block;text-align:center}
hr.stars{border:none;}

/* poem центровано шматком, в poems та verse  */
.poem, .poems section {display:table;margin:0 auto}

.poem h1, .poems section h2{
  font-size:1em;
  text-align:center
}


article footer{border:none;font-size:smaller;text-align:right;}

/* навігацію після центровано */
footer>nav{text-align:center}
/* навігація перед основним вмістом, руна */
header>nav{position:relative;text-align:left;min-height:1.6em}
body>header>nav>a:first-child, body>header>nav>span{display:block;position:absolute;top:0}
body>header>nav>a:first-child{right:0}
body>header>nav>span{left:0}
header>nav>img{max-height:2.3em,min-height:1em}

header {text-align: right}
header h1, header h2, header h3, header h4, 
header h1+p, header h2+p, header h3+p, header h4+p{text-align:center}
header p, header blockquote footer, header blockquote cite {text-align:left}
header blockquote footer, header blockquote cite {padding-left:1.3em}
header blockquote footer{color:red}
header blockquote, header p.salute{display:inline-block;font-size:smaller;max-width:13em;border-left:none}
/* постграф */
section>footer>blockquote{max-width:26em;font-size:smaller;border-left:none}
/* напівпрозорість під текстом */
body{background:color-mix(in srgb, var(--background-body) 70%, transparent)}
/* ілюстрації з підписами в осн. тексті врозріз */
main article p+figure{display:table;margin:1em auto}
main article p+figure img{max-height:23em}
main article p+figure img[src$=".svg"]{height:23em}

[aria-label] {
    position: relative;
    cursor: help;
    display: inline-block; /* важливо для inline-елементів */
}

/* Підказка */
[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px); /* невеликий відступ */
    
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    z-index: 1000;
    
    opacity: 0;
    visibility: hidden;           /* краще разом з opacity */
    pointer-events: none;
    transition: all 0.2s ease-in-out;
}

/* Показуємо */
[aria-label]:hover::after,
[aria-label]:focus::after,
[aria-label]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* анімація підйому */
}

/* Контейнер лайтбоксу */
.lightbox {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

/* Стан, коли лайтбокс відкритий */
.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

/* Велика картинка всередині */
.lightbox img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.lightbox.active img {
  transform: scale(1);
}

/* показуємо що воно клікабельне */
main article figure img{
  cursor:zoom-in;
}

@media (min-width:23em){
  main nav ul{column-count:2;column-gap:1.3em}
}