/*
 Shout-outs on the reader's site: the shelf at /shout-outs, the end of a story
 with a shout-out, and the pages the confirm and unsubscribe emails link to.

 Everything takes the reader's light or dark tokens from reader.css, except
 the two things that are the same in both on purpose: the green of the
 shout-out header, and the cream handwritten card.
*/

/* The shelf */

.shout-out-page {
    padding-top: var(--reader-bar-height);
    font-family: 'Roboto', sans-serif;
}

.shout-out-header {
    padding: 2.5rem 1.25rem 2.25rem;
    text-align: center;
    background: radial-gradient(ellipse at 50% 0%, #2C5240 0%, #1F3A2B 75%);
    color: #F4F1E8;
}

.shout-out-header h1 {
    margin: 0 0 0.5rem;
    font-family: 'Literata', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #F4F1E8;
}

.shout-out-header p {
    margin: 0;
    font-size: 1rem;
    color: #CFE3C9;
}

.shout-out-body {
    max-width: 60rem;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.shout-out-empty,
.shout-out-unavailable {
    text-align: center;
    color: var(--reader-muted);
}

.shout-out-unavailable h2 {
    font-size: 1.2rem;
    color: var(--reader-heading);
}

/* The one coming out next, ahead of the wall: its cover, when it's out, and
   the start of it in the reading font. */

.shout-out-coming {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin: 0 auto 2.5rem;
    padding-bottom: 2rem;
    max-width: 40rem;
    border-bottom: 1px solid var(--reader-line);
    text-align: center;
}

@media (min-width: 40rem) {
    .shout-out-coming {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
}

.shout-out-coming-cover {
    flex: 0 0 auto;
    display: block;
    width: 8rem;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--reader-control);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.shout-out-coming-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shout-out-coming-when {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--reader-accent);
}

.shout-out-coming-title {
    margin: 0;
    font-family: 'Literata', Georgia, serif;
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--reader-heading);
}

html[data-reader-theme] body a.shout-out-coming-title-link {
    color: var(--reader-heading);
    text-decoration: none;
}

.shout-out-coming-author {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--reader-muted);
}

.shout-out-coming-opening {
    margin: 1rem 0 0;
    font-family: 'Literata', Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--reader-heading);
}

.shout-out-coming-paragraph {
    margin: 0.85rem 0 0;
    font-family: 'Literata', Georgia, serif;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--reader-ink);
}

.shout-out-coming-out {
    margin: 0.85rem 0 0;
    font-size: 0.85rem;
    color: var(--reader-muted);
}

/* The wall of covers: three across on a phone, more as there is room. */

.shout-out-wall {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 0.9rem;
}

@media (min-width: 40rem) {
    .shout-out-wall {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 56rem) {
    .shout-out-wall {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.shout-out-wall-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-decoration: none;
}

.shout-out-wall-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--reader-control);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    transition: transform 120ms ease;
}

a.shout-out-wall-item:hover .shout-out-wall-cover,
a.shout-out-wall-item:focus-visible .shout-out-wall-cover {
    transform: translateY(-2px);
}

.shout-out-wall-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shout-out-wall-title {
    padding: 0.5rem;
    font-family: 'Literata', Georgia, serif;
    font-size: 0.8rem;
    line-height: 1.25;
    text-align: center;
    color: var(--reader-heading);
    overflow-wrap: anywhere;
}

.shout-out-wall-month {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--reader-muted);
}

/* A retired one keeps its place, greyed, with no link. */
.shout-out-wall-item.is-retired .shout-out-wall-cover {
    filter: grayscale(1);
    opacity: 0.5;
    box-shadow: none;
}

.shout-out-wall-retired {
    font-size: 0.7rem;
    line-height: 1.3;
    text-align: center;
    color: var(--reader-muted);
}

@media (prefers-reduced-motion: reduce) {
    .shout-out-wall-cover {
        transition: none;
    }
}

/* The end of a story with a shout-out */

.reader-shout-out {
    max-width: 30rem;
    margin: 2.5rem auto 0;
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

/* A page of its own after the end, like "More by", so the end keeps its page
   whole. It flows on to the next page if it has to on a small phone. */
html[data-reader-mode="pages"] .reader-shout-out {
    -webkit-column-break-before: always;
    break-before: column;
    margin-top: 0;
    padding-top: 2rem;
}

/* The handwritten card: cream with dark ink in both themes, clipped on, a
   little crooked, the same card the app shows. */
.shout-out-card {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin: 0.75rem 0 1.75rem;
    padding: 0.9rem 1.4rem 0.8rem;
    border-radius: 2px;
    background-color: #FFFDF6;
    color: #2B2A33;
    box-shadow: 0 2px 4px rgba(43, 42, 51, 0.18), 0 8px 20px rgba(43, 42, 51, 0.12);
    transform: rotate(-5deg);
}

html[data-reader-theme="dark"] .shout-out-card {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), 0 8px 22px rgba(0, 0, 0, 0.4);
}

.shout-out-card-clip {
    position: absolute;
    top: -0.85rem;
    left: 1rem;
    color: #8C8F96;
}

.shout-out-card-title {
    font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
}

.shout-out-card-month {
    font-family: 'Roboto', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: #2B2A33;
}

/* The author's questions and answers, between the card and the ask: the
   question in bold, the answer under it in the story's own serif. */
.shout-out-questions {
    margin: 0 0 2.25rem;
    text-align: left;
}

.shout-out-questions-heading {
    margin: 0 0 1rem;
    font-family: 'Literata', Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.35;
    text-align: center;
    color: var(--reader-heading);
}

.shout-out-questions-list {
    margin: 0;
}

.shout-out-questions-list dt {
    margin: 1.1rem 0 0.3rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--reader-heading);
}

.shout-out-questions-list dt:first-child {
    margin-top: 0;
}

.shout-out-questions-list dd {
    margin: 0;
    font-family: 'Literata', Georgia, serif;
    font-size: 0.98rem;
    line-height: 1.65;
    white-space: pre-line;
    color: var(--reader-ink);
}

.shout-out-ask-heading {
    margin: 0 0 0.4rem;
    font-family: 'Literata', Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.35;
    color: var(--reader-heading);
}

.shout-out-ask-line {
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    color: var(--reader-muted);
}

.shout-out-ask-form {
    text-align: left;
}

.shout-out-ask-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--reader-heading);
}

.shout-out-ask-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.shout-out-ask-input {
    flex: 1 1 12rem;
    min-width: 0;
    min-height: 44px;
    padding: 0 0.85rem;
    border: 1px solid var(--reader-muted);
    border-radius: 10px;
    background-color: var(--reader-page);
    color: var(--reader-heading);
    font-size: 1rem;
}

.shout-out-ask-input:focus {
    outline: 2px solid var(--reader-accent);
    outline-offset: 1px;
}

.shout-out-ask-row .reader-button {
    flex: 0 0 auto;
}

.shout-out-ask-small {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--reader-muted);
}

.shout-out-ask-result {
    margin: 0;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background-color: var(--reader-control);
    color: var(--reader-control-ink);
    font-size: 0.95rem;
}

.shout-out-ask-error {
    margin: 0 0 0.6rem;
    font-size: 0.88rem;
    color: var(--reader-accent);
}

.shout-out-ask-error[hidden] {
    display: none;
}

/* Out of sight and out of reach, for people; bots fill it in. */
.shout-out-ask-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.shout-out-last-heading {
    margin: 2.25rem 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--reader-heading);
}

/* The shout-out before this one, on the same green as the header. */
html[data-reader-theme] body a.shout-out-last {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #2C5240 0%, #1F3A2B 100%);
    color: #F4F1E8;
    text-align: left;
    text-decoration: none;
}

.shout-out-last-cover {
    flex: 0 0 auto;
    width: 62px;
    height: 93px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.shout-out-last-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.shout-out-last-title {
    font-family: 'Literata', Georgia, serif;
    font-size: 1rem;
    line-height: 1.3;
    color: #F4F1E8;
    overflow-wrap: anywhere;
}

.shout-out-last-author {
    font-size: 0.85rem;
    color: #CFE3C9;
}

.shout-out-last-month {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: #CFE3C9;
}

/* The pages the shout-out emails link to */

.shout-out-message {
    max-width: 30rem;
    margin: 0 auto;
    padding: calc(var(--reader-bar-height) + 3rem) 1.5rem 3rem;
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

.shout-out-message h1 {
    margin: 0 0 0.75rem;
    font-family: 'Literata', Georgia, serif;
    font-size: 1.5rem;
    color: var(--reader-heading);
}

.shout-out-message p {
    margin: 0 0 1.5rem;
    color: var(--reader-ink);
}

.shout-out-message form {
    margin: 0 0 1.5rem;
}