/* The FEED (home, TOP 10) — like the old site: paintings one under another, large,
   each followed by title, artist, the start of its story and "Read the story".
   Colours: theme.css variables only. */

.feed { margin-top: 3px; }
.feed-item {
    margin: 0 0 3px; padding: 28px 24px 30px; box-sizing: border-box;
    background: #000; border: 2px solid #535353; border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0,0,0,.35); text-align: center;
}
.feed-pic { display: block; }
.feed-pic img {
    display: block; margin: 0 auto; max-width: 100%; max-height: 78vh; width: auto; height: auto;
    border: 3px solid #323232; box-shadow: 0 10px 30px rgba(0,0,0,.6);
    transition: border-color .2s ease;
}
.feed-pic:hover img { border-color: var(--c-line-hover); }
.feed-pic .noimg { display: inline-block; padding: 70px 40px; color: #8a7f72; }

.feed-info { max-width: 680px; margin: 22px auto 0; }
.feed-rank {
    display: block; margin-bottom: 4px; color: var(--c-text);
    font: 600 22px 'Playfair Display', Georgia, serif; letter-spacing: .04em;
}
.feed-title { margin: 0 0 6px; font: 600 28px/1.2 'Playfair Display', Georgia, serif; }
.feed-title a { color: var(--c-on-fill); text-decoration: none; }
.feed-title a:hover { color: var(--c-text-hover); }
.feed-artist { margin: 0 0 14px; color: #a89f8f; font: 500 15px 'Inter', sans-serif; }
.feed-artist a { color: var(--c-text); text-decoration: none; }
.feed-artist a:hover { color: var(--c-text-hover); text-decoration: underline; }
.feed-excerpt { margin: 0 0 10px; color: #d6d0c4; text-align: left; font: 17px/1.7 Georgia, 'Times New Roman', serif; }
.feed-more {
    display: inline-block; margin-bottom: 14px; color: var(--c-text); text-decoration: none;
    font: 600 12px 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase;
    border-bottom: 1px solid var(--c-line);
}
.feed-more:hover { color: var(--c-text-hover); border-color: var(--c-line-hover); }
.feed-actions { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }
.feed-actions .fav-btn { background: #1e1e22; }
.feed-actions .price { font-size: 17px; }

@media (max-width: 600px) {
    .feed-item { padding: 12px 10px 22px; }
    .feed-pic img { max-height: none; border-width: 2px; }
    .feed-info { margin-top: 16px; padding: 0 6px; }
    .feed-title { font-size: 23px; }
    .feed-excerpt { font-size: 16px; }
}

/* Paintings of the Day: the date above each painting, the pages below */
.feed-day {
    display: block; margin-bottom: 4px; color: var(--c-text);
    font: 600 13px 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase;
}
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 24px 0 8px; }
.pager a, .pager span {
    min-width: 38px; padding: 8px 12px; box-sizing: border-box; text-align: center;
    border: 1px solid var(--c-line); border-radius: 3px; font: 600 13px 'Inter', sans-serif;
    color: var(--c-text); text-decoration: none; background: rgba(0,0,0,.4);
}
.pager a:hover { border-color: var(--c-line-hover); color: #fff; }
.pager .pager-on { background: var(--c-line); color: #fff; }
.potd-archive { display: inline-block; margin-left: 16px; color: var(--c-text);
    font: 600 13px 'Inter', sans-serif; text-decoration: none; }
.potd-archive:hover { color: var(--c-text-hover); }
/* Paintings of the Day as one ribbon (feedscroll.js) */
.feed-page-mark {
    margin: 26px 0 8px; padding-top: 14px; border-top: 1px solid var(--c-line-soft); text-align: center;
    color: #8f877a; font: 600 11px 'Inter', sans-serif; letter-spacing: .24em; text-transform: uppercase;
}
.feed-loading .pager { opacity: .5; }
.pager-float { position: fixed; z-index: 20; right: 16px; bottom: 16px; display: flex; flex-direction: column;
    align-items: flex-end; gap: 8px; }
.pager-float > button {
    cursor: pointer; padding: 9px 14px; border-radius: 30px; border: 1px solid var(--c-line);
    background: rgba(0,0,0,.82); color: var(--c-text); font: 600 12px 'Inter', sans-serif;
    letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.pager-float > button:hover { border-color: var(--c-line-hover); color: #fff; }
.pager-float-list {
    display: grid; grid-template-columns: repeat(5, 38px); gap: 6px; max-height: 50vh; overflow-y: auto;
    padding: 10px; background: rgba(8,6,4,.95); border: 1px solid var(--c-line); border-radius: 8px;
}
.pager-float-list[hidden] { display: none; }
.pager-float-list a {
    padding: 8px 0; text-align: center; border: 1px solid var(--c-line); border-radius: 3px;
    color: var(--c-text); text-decoration: none; font: 600 13px 'Inter', sans-serif;
}
.pager-float-list a:hover { border-color: var(--c-line-hover); color: #fff; }
.pager-float-list a.on { background: var(--c-line); color: #fff; }