/* Dewdrop: Index page + Story page. Colors come from the Dewdrop tokens. */

/* ============ STORY PAGE ============ */
body.dd-story-page .story__thumbnail {
  border: 3px solid var(--dda-line); border-radius: 14px 14px 14px 36px; overflow: hidden;
  box-shadow: 5px 6px 0 var(--dda-dew); background: var(--dda-sky);
}
body.dd-story-page .story__thumbnail img { display: block; }
body.dd-story-page .story__identity h1 { font-family: var(--ff-heading, inherit); font-weight: 700; color: var(--dda-ink); }

body.dd-story-page li[class*="chapter-group__list-item"] {
  border: 2px solid var(--dda-soft); border-radius: 14px;
  background: color-mix(in srgb, var(--dda-sky) 70%, transparent);
  transition: border-color .15s, transform .15s;
}
body.dd-story-page li[class*="chapter-group__list-item"]:hover { border-color: var(--dda-dew); transform: translateX(3px); }

/* ============ INDEX PAGE ============ */
.dd-ix-status { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; margin: 0 0 1.2rem; font-size: .9rem; }
.dd-ix-status > span { font-weight: 700; color: var(--dda-ink); margin-right: .2rem; }
.dd-ix-status a { padding: .25rem .85rem; border: 2px solid var(--dda-line); border-radius: 99px; background: var(--dda-sky); color: var(--dda-ink); text-decoration: none; font-weight: 600; transition: background .15s, transform .15s; }
.dd-ix-status a:hover { background: var(--dda-dew); transform: translateY(-2px); }

.dd-ix-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; font-size: 0; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.dd-ix-letters *::before, .dd-ix-letters *::after { content: none !important; }
.dd-ix-letters li { font-size: 0; list-style: none; margin: 0; padding: 0; }
.dd-ix-letters a { font-size: 1rem; display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .4rem; border: 2px solid var(--dda-line); border-radius: 50% 50% 50% 12%; background: var(--dda-sky); color: var(--dda-ink); font-family: var(--ff-heading, inherit); font-weight: 700; text-decoration: none; transition: background .15s, transform .15s; }
.dd-ix-letters a:hover { background: var(--dda-dew); transform: translateY(-2px) rotate(-6deg); }

.dd-ix-letter-h { display: inline-grid !important; place-items: center; width: 2.6rem; height: 2.6rem; padding-top: .45rem; background: var(--dd-drop-svg) center / contain no-repeat; color: var(--dda-on-drop) !important; font-family: var(--ff-heading, inherit); font-weight: 700; font-size: 1.05rem !important; line-height: 1; margin-bottom: .4rem; }

.dd-ix-entry { border: 2px solid var(--dda-soft); border-radius: 14px 14px 14px 4px; padding: .5rem .8rem; transition: border-color .15s, transform .15s, box-shadow .15s; }
.dd-ix-entry:hover { border-color: var(--dda-dew); transform: translateY(-2px); box-shadow: 3px 4px 0 var(--dda-soft); }