/*
 * Newsletter — public listing (/newsletter) and article page (/newsletter/{slug}).
 *
 * Colors come from the seven --brand-* tokens master.cshtml flips on <html> per show,
 * so one stylesheet reads correctly under both Survivor (#2E7D32) and Big Brother
 * (#1E40AF) without any per-article show tag. No new color tokens are introduced.
 *
 * .nl-article-* rules are shared with the composer's Article preview, which loads this
 * same file — keep them free of anything that assumes the surrounding site chrome.
 */

.nl-page {
    max-width: 1080px;
    margin: 0 auto;
    /* Inner spacing of the card shell, not of the page — the shell owns the frame. */
    padding: 34px 28px 48px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1f2328;
}

/* ── Full-bleed hero (content-managed image on the newsletter node) ────────── */
/* Mirrors .hero-banner in home.css/howToPlay.css exactly — same clamp() height,
   same edge-to-edge span — so the newsletter reads as a sibling of Home/Rules. */

.nl-hero {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.nl-hero img {
    width: 100%;
    height: clamp(260px, 45vh, 520px);
    object-fit: cover;
    display: block;
}

/* ── Card shell ────────────────────────────────────────────────────────────── */
/* The site's signature content card (values from .home-content in howToPlay.css:
   white, 25px radius, #EAEAEA border, soft shadow, 1236px cap). All three
   newsletter pages sit in one; the listing additionally pulls up over its hero. */

.nl-shell {
    width: 90%;
    max-width: 1236px;
    margin: 24px auto 56px;
    background: #fff;
    border: 2.5px solid #EAEAEA;
    border-radius: 25px;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1; /* above the hero it overlaps */
    box-sizing: border-box;
}

.nl-shell--overlap { margin-top: -120px; }

@media (min-width: 1024px) {
    .nl-shell { width: 1236px; }
}

/* Same landscape-tablet relaxation as .home-content — full width, no overlap. */
@media (orientation: landscape) and (max-width: 1024px) {
    .nl-shell {
        width: 100%;
        max-width: 100%;
        border-radius: 10px;
    }
    .nl-shell--overlap { margin-top: 20px; }
}

/* ── Listing header ────────────────────────────────────────────────────────── */

.nl-page-head {
    text-align: center;
    margin-bottom: 34px;
}

.nl-page-title {
    margin: 0 0 8px;
    font-size: 38px;
    line-height: 1.15;
    font-weight: 750;
    color: var(--brand-primary);
}

.nl-page-sub {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: #495057; /* 7.6:1 on #fff */
}

/* ── Card grid ─────────────────────────────────────────────────────────────── */

.nl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
}

/* The card is a CONTAINER, not one big <a>.

   It used to be a single anchor wrapping everything, which is exactly why the byline
   could never be clickable — nesting a link inside a link is invalid HTML. Now the
   title's link is stretched over the whole card by the ::after overlay below, and the
   author link sits above that overlay on a higher z-index. The whole card stays one
   big tap target AND the pfp + name are a real, separate link. */
.nl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    overflow: hidden;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.nl-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

/* The focus ring belongs to the card, but focus lands on the title's link — so the
   ring is drawn on the card when anything inside it has focus. */
.nl-card:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.nl-card-media {
    aspect-ratio: 16 / 9;
    background: #f1f3f5;
    overflow: hidden;
}

.nl-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* No rule needed for the heroless card: its fallback is a pre-composed 16:9 tile
   (images/newsletter/card-fallback.jpg), so the ordinary .nl-card-media img rule
   above already fits it correctly. */

.nl-card-body { padding: 16px 18px 18px; }

.nl-card-title {
    margin: 0 0 7px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: #14181c;
}

.nl-card-title a {
    color: inherit;
    text-decoration: none;
}

/* The stretched overlay: this is what keeps the whole card clickable. */
.nl-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.nl-card-title a:focus-visible { outline: none; }

.nl-card-dek {
    margin: 0 0 11px;
    font-size: 15px;
    line-height: 1.5;
    color: #495057;
}

.nl-card-meta {
    margin: 0;
    font-size: 13.5px;
    color: #5f6672; /* 5.6:1 on #fff */
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Byline: circular pfp + name, its own link ─────────────────────────────── */

.nl-byline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    /* Above the title's stretched overlay, so clicking the author goes to the author
       and not to the article. */
    position: relative;
    z-index: 2;
}

.nl-byline--link:hover .nl-byline-name {
    color: var(--brand-accessible);
    text-decoration: underline;
}

.nl-byline--link:focus-visible {
    outline: 2px solid var(--brand-accessible);
    outline-offset: 2px;
    border-radius: 999px;
}

.nl-byline-name { font-weight: 600; color: #3b4149; }

.nl-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: #eef1f4;
}

.nl-avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.nl-card-date { white-space: nowrap; }

/* ── Tag chips ─────────────────────────────────────────────────────────────── */

.nl-chips {
    list-style: none;
    margin: 0 0 9px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nl-chip {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brand-accessible);
    background: var(--brand-tint-bg);
    border: 1px solid var(--brand-tint-bg-hover);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}

.nl-chips--article {
    margin: 0 0 14px;
    justify-content: flex-start;
}

.nl-chips--article .nl-chip { font-size: 12px; padding: 4px 11px; }

/* ── Empty state ───────────────────────────────────────────────────────────── */

.nl-empty {
    text-align: center;
    padding: 56px 24px;
    border: 1px dashed #ced4da;
    border-radius: 12px;
    background: var(--brand-tint-bg);
}

.nl-empty h2 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #14181c;
}

.nl-empty p {
    margin: 0 0 18px;
    color: #495057;
}

.nl-empty-cta {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.nl-empty-cta:hover { background: var(--brand-primary-dark); }

/* ── Article page ──────────────────────────────────────────────────────────── */

.nl-page--article { max-width: 760px; }

.nl-breadcrumb {
    margin-bottom: 18px;
    font-size: 14px;
}

.nl-breadcrumb a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 600;
}

.nl-breadcrumb a:hover { text-decoration: underline; }

.nl-article-title {
    margin: 0 0 10px;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 750;
    color: #14181c;
}

.nl-article-dek {
    margin: 0 0 14px;
    font-size: 19px;
    line-height: 1.5;
    color: #495057;
}

.nl-article-meta {
    margin: 0 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e3e6ea;
    font-size: 14.5px;
    color: #5f6672;
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
}

.nl-article-byline { font-weight: 600; color: #495057; }

.nl-article-byline--link {
    color: var(--brand-primary);
    text-decoration: none;
}

.nl-article-byline--link:hover { text-decoration: underline; }

/* ── Author profile page ───────────────────────────────────────────────────── */

.nl-author-head {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid #e3e6ea;
}

.nl-author-photo {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 3px solid var(--brand-tint-bg);
}

.nl-author-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary);
    color: #fff;
    font-size: 40px;
    font-weight: 700;
}

.nl-author-name {
    margin: 4px 0 8px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 750;
    color: #14181c;
}

.nl-author-bio {
    margin: 0 0 14px;
    font-size: 16.5px;
    line-height: 1.6;
    color: #495057;
    /* The bio is stored as PLAIN TEXT (no HTML surface on a public page for the sake
       of a bio), so a writer's paragraph breaks are real newlines. pre-line keeps
       them without letting any markup in. */
    white-space: pre-line;
}

.nl-author-socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Labeled chips, not brand glyphs — unambiguous and screen-reader friendly. */
.nl-author-social {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--brand-tint-bg);
    color: var(--brand-primary-dark);
    font-size: 13.5px;
    font-weight: 650;
    text-decoration: none;
    border: 1px solid transparent;
}

.nl-author-social:hover {
    background: var(--brand-tint-bg-hover);
    border-color: var(--brand-primary);
}

.nl-author-section-title {
    margin: 0 0 14px;
    font-size: 21px;
    font-weight: 700;
    color: #14181c;
}

.nl-author-none { color: #495057; }

.nl-author-others {
    margin-top: 38px;
    padding-top: 24px;
    border-top: 1px solid #e3e6ea;
}

.nl-author-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.nl-author-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 96px;
    text-decoration: none;
}

.nl-author-strip-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.nl-author-strip-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #24292f;
    text-align: center;
    line-height: 1.3;
}

.nl-author-strip-item:hover .nl-author-strip-name { color: var(--brand-primary); }

@media (max-width: 600px) {
    .nl-author-head { flex-direction: column; align-items: center; text-align: center; }
    .nl-author-socials { justify-content: center; }
}

.nl-article-hero {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 0 0 24px;
    display: block;
}

/* ── Article body (writer-authored, sanitized HTML) ────────────────────────── */

.nl-article-body {
    font-size: 18px;
    line-height: 1.7;
    color: #24292f;
}

.nl-article-body p { margin: 0 0 18px; }

.nl-article-body h2 {
    margin: 32px 0 12px;
    font-size: 26px;
    line-height: 1.3;
    color: #14181c;
}

.nl-article-body h3 {
    margin: 26px 0 10px;
    font-size: 21px;
    line-height: 1.35;
    color: #14181c;
}

.nl-article-body a {
    color: var(--brand-primary);
    text-decoration: underline;
}

.nl-article-body ul,
.nl-article-body ol { margin: 0 0 18px; padding-left: 26px; }

.nl-article-body li { margin: 0 0 8px; }

.nl-article-body blockquote {
    margin: 24px 0;
    padding: 4px 20px;
    border-left: 4px solid var(--brand-primary);
    color: #495057;
    font-style: italic;
}

/* Writers embed images at arbitrary sizes — never let one break the column. */
.nl-article-body img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    margin: 22px 0;
}

/* HTML-mode articles are email-style layouts: nested tables with inline styles.
   The column is what it is — never let a fixed-width table widen the page. */
.nl-article-body table { max-width: 100%; }
.nl-article-body table img { margin: 0; border-radius: 0; }

/* Composer blocks (Card / Button) carry their own inline styles so email and the app
   render them without this file. Only web polish lives here. */
.nl-article-body .nl-card-line p { margin: 0; }
.nl-article-body .nl-cta a { text-decoration: none; }
.nl-article-body .nl-cta a:hover { filter: brightness(1.08); }

.nl-article-body figure { margin: 22px 0; }

.nl-article-body figcaption {
    font-size: 14px;
    color: #5f6672;
    padding-top: 7px;
    text-align: center;
}

.nl-article-body pre {
    background: #f6f8fa;
    padding: 14px 16px;
    border-radius: 8px;
    overflow-x: auto; /* code must scroll itself, never the page */
}

.nl-article-body code {
    background: #f6f8fa;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: .92em;
}

.nl-article-body pre code { background: none; padding: 0; }

/* A wide table scrolls inside its own box rather than widening the page. */
.nl-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    display: block;
    overflow-x: auto;
}

.nl-article-body th,
.nl-article-body td {
    border: 1px solid #e3e6ea;
    padding: 8px 11px;
    text-align: left;
}

.nl-article-body th { background: #f6f8fa; font-weight: 650; }

.nl-article-foot {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid #e3e6ea;
}

/* The composer preview renders the article body with no site chrome around it. */
.nl-article--preview { padding: 22px; }

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .nl-page { padding: 20px 14px 40px; }
    .nl-page-title { font-size: 30px; }
    .nl-article-title { font-size: 28px; }
    .nl-article-body { font-size: 17px; }
    .nl-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Author box (foot of an article) ───────────────────────────────────────── */

.nl-authorbox {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 36px 0 8px;
    padding: 24px;
    background: var(--brand-tint-bg);
    border: 1px solid var(--brand-tint-bg-hover);
    border-radius: 14px;
}

.nl-authorbox-photo-link { flex: none; line-height: 0; }

.nl-authorbox-photo {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: #fff;
    border: 3px solid #fff;
    font-size: 30px;
}

.nl-authorbox-body { min-width: 0; }

.nl-authorbox-kicker {
    margin: 0 0 2px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5f6672;
}

.nl-authorbox-name {
    margin: 0 0 8px;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 750;
}

.nl-authorbox-name a { color: #14181c; text-decoration: none; }
.nl-authorbox-name a:hover { color: var(--brand-accessible); text-decoration: underline; }

.nl-authorbox-bio {
    margin: 0 0 6px;
    font-size: 15.5px;
    line-height: 1.6;
    color: #495057;
    white-space: pre-line;   /* see .nl-author-bio */

    /* Clamped to roughly the opening two or three sentences, with the browser
       adding its own ellipsis. Line-based rather than sentence-based on purpose:
       splitting prose on full stops breaks on "Mr.", "U.S.", "S51." and every
       other abbreviation a writer might use, and a line clamp also adapts to the
       reader's width instead of guessing at it. The full bio is one tap away on
       the author's own page, which is exactly where someone who wants it is going. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nl-authorbox-more {
    display: inline-block;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 650;
    color: var(--brand-accessible);
    text-decoration: none;
}

.nl-authorbox-more:hover { text-decoration: underline; }

/* ── Follow button ─────────────────────────────────────────────────────────── */

.nl-follow { margin: 14px 0 0; }

.nl-follow-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.nl-follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    padding: 8px 18px;
    border: 1px solid var(--brand-accessible);
    border-radius: 999px;
    background: var(--brand-accessible);
    /* White on #2E7D32 is ~4.6:1 — AA for normal text. */
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.nl-follow-btn:hover { filter: brightness(1.08); }

.nl-follow-btn:focus-visible {
    outline: 2px solid var(--brand-accessible);
    outline-offset: 2px;
}

/* Already following: the button inverts, so the current state is legible without
   relying on the label alone. */
.nl-follow-btn.is-following {
    background: #fff;
    color: var(--brand-accessible);
}

.nl-follow-btn[disabled] { opacity: .6; cursor: default; }

.nl-follow-count {
    font-size: 15px;
    font-weight: 750;
    color: #14181c;
}

.nl-follow-count-label {
    font-size: 13.5px;
    color: #5f6672;
    margin-left: -5px;
}

/* The line that stops "Follow" reading as "notify me". Small, but it is the whole
   reason people don't think the feature is broken. */
.nl-follow-note {
    margin: 9px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: #5f6672;
    max-width: 62ch;
}

.nl-follow-note a { color: var(--brand-accessible); }

@media (max-width: 640px) {
    .nl-authorbox { flex-direction: column; align-items: center; text-align: center; }
    .nl-authorbox .nl-author-socials { justify-content: center; }
    .nl-follow-row { justify-content: center; }
    .nl-follow-note { text-align: left; }
}

/* ── The worked example ────────────────────────────────────────────────────── */
/*
   The sample article and sample writer, shown only to Writers and SiteAdmins. The
   loud banding is deliberate: a teaching aid that looks like real published work is
   worse than no teaching aid, because someone eventually treats it as real.
*/

.nl-card--example {
    border-color: var(--brand-accessible);
    box-shadow: 0 0 0 1px var(--brand-accessible) inset;
}

.nl-example-flag {
    margin: 0;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    color: #fff;
    background: var(--brand-accessible);
}

/* The annotations inside the example body carry their OWN inline styles, the same
   way the Card, Button, pull-quote and caption blocks do — the app renders article
   HTML through loadHtmlString, which has no stylesheet at all, and email has no
   reliable one. A rule here would only apply on the website and the annotations
   would render as bare paragraphs in the app. The cost is that they don't theme
   per show; see COLORS.md. */

/* Placeholder art is line-drawn, so it must not be cropped the way a photo is. */
.nl-card--example .nl-card-media img { object-fit: contain; background: #eef2f6; }

/* The example gets a row of its own above the real articles, rather than sitting in
   the grid as one more card — it's a guide, not something that shipped.

   It deliberately does NOT override the grid's columns: the card keeps exactly the
   size it has anywhere else, and simply has the row to itself. Stretching one card
   across the full width made it the biggest thing on the page, which is the opposite
   of what a reference card should be. */
.nl-grid--example {
    margin: 0 0 30px;
    padding: 0 0 28px;
    border-bottom: 1px solid #e3e6ea;
}