@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

@media (max-width:800px) {
    ::-webkit-scrollbar {
        height: 1px;
    }
}

::-webkit-scrollbar {
    width: 1px;
}


::-webkit-scrollbar-track {
    background-color: #fff;
}

/* ::-webkit-scrollbar-thumb {
    border-radius: 0;
} */

::-webkit-scrollbar-track-piece {
    background: #ebebeb;
    border: 0;
}

.enlarged-horizontal {
    padding-left: 0px;
    padding-right:0px;
}

.enlarged-vertical {
    padding-top:6px;
    padding-bottom: 6px;
}

/* TODO: change url size according to screen resolution */
html, body {
    /*
    cursor: url(star_cursor_32px.cur) 16 16, auto; */
    
    cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32"%3E%3Ctext x="0" y="20" font-size="20" fill="white"%3E✧%3C/text%3E%3C/svg%3E') 16 16, auto;

}

.show-content::-webkit-scrollbar {
    display: none;
}

/* Prevent background scroll while modal is open */
body.modal-open {
  overflow: hidden;
}

/* === Hover preview overrides (moved from style.css) === */
.hover-preview img {
  max-width: 80vw;                 /* keep same sizing */
  max-height: 70vh;
  border-radius: clamp(48px, 6vw, 120px) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    0 0 18px rgba(255, 0, 0, 0.35) !important;
}

.hover-preview figcaption {
  margin-top: 10px;
  color: #000;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  /* Better contrast on busy images */
  display: inline-block;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0;               /* no pill look */
  border-radius: 0;         /* no pill look */
  text-align: left;         /* left align text */
  max-width: 32vw;          /* keep the caption as a right-side text box */
}

/* Title */
.hover-preview figcaption .hp-title {
  display: block;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 32px);
  color: #000;
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.85),
    0 0 6px rgba(255, 0, 0, 0.90),
    0 0 24px rgba(255, 0, 0, 0.70),
    0 0 52px rgba(255, 0, 0, 0.55);
}

/* Subtitle (slightly smaller than title) */
.hover-preview figcaption .hp-subtitle {
  display: block;
  margin-top: 6px;
  font-weight: 700;
  font-size: clamp(12px, 1.4vw, 20px); /* was clamp(16px, 2.0vw, 26px) */
  color: #000;
  line-height: 1.35;
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.85),
    0 0 6px rgba(255, 0, 0, 0.90),
    0 0 24px rgba(255, 0, 0, 0.70),
    0 0 52px rgba(255, 0, 0, 0.55);
}

/* Year */
.hover-preview figcaption .hp-year {
  display: inline-block;
  margin-left: 4px;
  font-weight: 600;
  font-size: clamp(13px, 1.5vw, 18px);
  color: #000;
  text-shadow:
    0 0 3px rgba(255, 0, 0, 0.70),
    0 0 16px rgba(255, 0, 0, 0.45),
    0 0 32px rgba(255, 0, 0, 0.35);
}
/* === /Hover preview overrides === */

.poem-half {
  display: block;
  font-size: 0.5em;   /* half size */
  line-height: 1.35;
  white-space: pre-line; /* keep author’s newlines */
}