/* -------------------------------------------------------------------------
   The end-of-story invitation to contact the writer.

   Sits inside .article-container, so every rule that touches a plain element
   is scoped -- custom.css carries things like `.article-container h3` at
   specificity (0,1,1), which silently beats a bare class. That trap has cost
   this project time twice; see the note at the top of writer.css.

   The design problem: this arrives at the end of a long read, so it has to
   register as a change of gear without reading as an advertisement. The answer
   is a dark panel. The whole page above it is cream and serif; one deep blue
   block at the foot is unmistakably a different kind of thing, and it does it
   with contrast rather than with noise.
   ------------------------------------------------------------------------- */

.article-container .writer-callout {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 22px;
    align-items: flex-start;
    margin: 30px 0;
    padding: 28px 30px;
    border-radius: 4px;
    color: #eef2f7;
    background:
        radial-gradient(120% 140% at 0% 0%, #1d5fa4 0%, rgba(29,95,164,0) 55%),
        linear-gradient(135deg, #123f70 0%, #0d2b4c 60%, #0a2340 100%);
    box-shadow: 0 10px 30px rgba(10, 35, 64, .22);
}

/* A thin bright rule across the top. The paper's blue, brightened -- it reads
   as a masthead rule rather than a border. */
.article-container .writer-callout::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2f7fd4 0%, #7db9f0 50%, #2f7fd4 100%);
}

/* A slow sheen, once every nine seconds. Same restraint as everywhere else in
   this project: it sweeps and rests, because a continuous sweep reads as a
   loading bar. Decoration only -- nothing waits on it, nothing reads it, and a
   browser that never runs it shows an identical, complete panel. */
.writer-callout-sheen {
    position: absolute;
    top: 0; left: 0;
    width: 38%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-170%);
    animation: writer-callout-sheen 9s cubic-bezier(.35,0,.2,1) 2s infinite;
}
@keyframes writer-callout-sheen {
    0%   { transform: translateX(-170%); }
    22%  { transform: translateX(380%); }
    100% { transform: translateX(380%); }
}

/* -- the face ------------------------------------------------------------- */

.writer-callout-shot {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,.22);
    background: #0a2340;
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.writer-callout-shot--none {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(255,255,255,.72);
}

/* -- the words ------------------------------------------------------------ */

.writer-callout-body { min-width: 0; flex: 1 1 auto; }

.article-container .writer-callout-kicker {
    margin: 0 0 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8fc3f2;
}
.article-container .writer-callout-head {
    margin: 0 0 10px;
    font-size: 1.75rem !important;   /* outranks .article-container h2 */
    line-height: 1.15;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.015em;
}
/* The beat, as a byline strap. Deliberately NOT styled like the kicker above
   the name: that one is uppercase tracked sans, and a second line in the same
   voice would read as a two-deck label rather than as a credit. Italic serif
   with a rule is how a newspaper sets a reporter's beat line. */
.article-container .writer-callout-beat {
    margin: 0 0 13px;
    padding-left: 12px;
    border-left: 2px solid rgba(143, 195, 242, .55);
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: .9375rem;
    line-height: 1.4;
    color: #bcd6f2;
}

.article-container .writer-callout-text {
    margin: 0 0 16px;
    font-size: 1.0125rem;
    line-height: 1.6;
    color: #d6e2ef;
    max-width: 46rem;
}

/* -- the two things to press ---------------------------------------------- */

.writer-callout-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.article-container .writer-callout-btn {
    display: inline-flex;
    align-items: center;
    /* 44px minimum, which is the smallest target a thumb hits reliably. At
       11px padding these came out 41px -- close enough to look right and not
       close enough to press right. */
    min-height: 44px;
    padding: 11px 22px;
    border-radius: 999px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.34);
    color: #eaf2fb;
    background: rgba(255,255,255,.07);
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.article-container .writer-callout-btn:hover,
.article-container .writer-callout-btn:focus-visible {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.6);
    transform: translateY(-2px);
    text-decoration: none;
    outline: none;
}
/* The one the reader is most likely to want. */
.article-container .writer-callout-btn--primary {
    background: #ffffff;
    color: #0d2b4c;
    border-color: #ffffff;
}
.article-container .writer-callout-btn--primary:hover,
.article-container .writer-callout-btn--primary:focus-visible {
    background: #dceafc;
    border-color: #dceafc;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
}

.article-container .writer-callout-foot {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8125rem;
    line-height: 1.6;
    color: #9fb6cd;
}
.article-container .writer-callout-foot a {
    color: #bfd8f2;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.article-container .writer-callout-foot a:hover { color: #ffffff; }

/* Without a writer there is no face, so the text takes the full width rather
   than sitting in a column that no longer has a neighbour. */
.writer-callout--newsroom .writer-callout-body { max-width: none; }

@media (max-width: 40rem) {
    .article-container .writer-callout { flex-direction: column; gap: 16px; padding: 22px 20px; }
    .writer-callout-shot { flex-basis: 68px; width: 68px; height: 68px; }
    .writer-callout-shot--none { font-size: 1.5rem; }
    .article-container .writer-callout-head { font-size: 1.45rem !important; }
    .writer-callout-actions { flex-direction: column; align-items: stretch; }
    .article-container .writer-callout-btn { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .writer-callout-sheen { animation: none; opacity: 0; }
    .article-container .writer-callout-btn { transition: none; }
    .article-container .writer-callout-btn:hover,
    .article-container .writer-callout-btn:focus-visible { transform: none; }
}

/* Printing a story should not print an invitation to email about it, and a
   dark panel wastes a great deal of ink. */
@media print {
    .writer-callout { display: none !important; }
}