/*
 * The New York Times Bestseller seal (nyt-seal.html), like the sticker on bookshop copies: on
 * the cookbook page's cover and the home page's cookbook section. The Times' "T" on top (the
 * publisher said it's fine to use), then plain text in our own type: the masthead lettering
 * stays theirs. Sized in em, so a page sizes it with
 * font-size and places it with top/right/bottom/left (position: absolute). The type is Jost
 * (URW Geometric if that webfont is ever added), which each page loads.
 */

.nyt-seal {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    width: 10.5em;
    height: 10.5em;
    margin: 0;
    /* The words sit a little above the middle, so BESTSELLER, the last and widest line, is where
       the circle is wide enough for it (it ran past the inner ring, and on Safari past the edge) */
    padding-bottom: 1.1em;
    font-size: 10px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    color: #3f2d0c;
    font-family: 'URW Geometric', 'Jost', var(--font-2), sans-serif;
    background: radial-gradient(circle at 32% 28%, #fbefc6 0%, #e9cd7e 45%, #c79a3e 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    transform: rotate(12deg);
    overflow: hidden;
}

/* Inner ring, as on a foil seal */
.nyt-seal::before {
    content: '';
    position: absolute;
    inset: 0.5em;
    border: 1px solid rgba(63, 45, 12, 0.35);
    border-radius: 50%;
    pointer-events: none;
}

/* One sweep of light across the foil after the page loads */
.nyt-seal::after {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -60%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    transform: skewX(-20deg);
    animation: nyt-seal-shine 1.4s ease-in-out 1s both;
    pointer-events: none;
}

@keyframes nyt-seal-shine {
    from { left: -60%; }
    to { left: 130%; }
}

/* The Times' "T", in the seal's ink, just above the words */
.nyt-seal-t {
    flex: none;
    width: 2.1em;
    height: 2.1em;
    margin-bottom: 0.12em;
}

.nyt-seal-top {
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.2;
}

.nyt-seal-main {
    margin-top: 0.3em;
    padding-top: 0.3em;
    border-top: 1px solid rgba(63, 45, 12, 0.45);
    font-size: 1.18em;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .nyt-seal::after {
        display: none;
    }
}