/* NSB news, look A "The Feature": the site's cult-magazine type, as a feature spread. Drawn by nsb-server desk/render.js
   on /news pages, the homepage's Inside this issue, and The Desk, so a change here changes all three. */
.news-main { max-width: 760px; margin: 0 auto; padding: 32px 16px 72px; }
.news-page { padding: 22px 20px 30px; }
.news-kicker { display: inline-block; background: var(--gold); color: var(--ink); font: 700 11px var(--mono); letter-spacing: 3px; padding: 5px 9px; min-width: 2em; min-height: 1.6em; }
.news-headline { font-family: var(--display); font-size: clamp(42px, 9vw, 76px); line-height: .95; text-transform: uppercase; margin: 14px 0 0; text-shadow: 3px 3px 0 var(--red); }
@media (min-width: 720px) { .news-headline { text-shadow: 4px 4px 0 var(--red); } }
.news-standfirst { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 3vw, 24px); line-height: 1.3; margin: 14px 0; color: var(--ink-2); }
.news-byline { font: 11px var(--mono); letter-spacing: 2px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding: 8px 0; margin-bottom: 18px; }
.news-cover { margin: 0 0 22px; }
.news-cover-frame { border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper); }
.news-cover-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-cover-empty { display: flex; align-items: center; justify-content: center; font: 700 13px var(--mono); color: var(--muted); }
.news-credit { font: 10px var(--mono); color: var(--muted); margin-top: 10px; }
.news-body { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.news-p { margin: 0 0 1em; }
.news-p a { color: var(--red); text-decoration: underline; }
.news-dropcap::first-letter { font-family: var(--display); float: left; font-size: 4.1em; line-height: .85; color: var(--red); margin: 6px 8px 0 0; }
.news-sub { font-family: var(--display); font-size: 28px; text-transform: uppercase; margin: 1.2em 0 .4em; }
.news-quote { font-family: var(--display); font-size: clamp(26px, 5vw, 36px); line-height: 1.05; color: var(--red); text-transform: uppercase; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: 12px 0; margin: 1.2em 0; }
.news-photo { margin: 1.4em 0; }
.news-photo img { width: 100%; display: block; border: 3px solid var(--ink); }
.news-photo figcaption { font: 12px var(--mono); margin-top: 8px; }
.news-photo-empty { aspect-ratio: 3 / 2; border: 3px dashed var(--ink); display: flex; align-items: center; justify-content: center; font: 700 13px var(--mono); }
.news-shop { display: grid; gap: 2px; padding: 14px 16px; margin: 1.2em 0; background: var(--paper); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); color: var(--ink); text-decoration: none; }
.news-shop-label { font: 700 10px var(--mono); letter-spacing: 2px; color: var(--red); }
.news-shop strong { font-family: var(--display); font-size: 24px; text-transform: uppercase; }
/* /news */
.news-index-h { font-family: var(--display); font-size: clamp(48px, 10vw, 96px); text-transform: uppercase; margin: 12px 0 22px; }
.news-index-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .news-main:has(.news-index) { max-width: 1180px; } .news-index-grid { grid-template-columns: 2fr 1fr; } }
.news-card { display: block; color: var(--ink); text-decoration: none; margin-bottom: 30px; }
.news-card-img { border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 14px; }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card-hed { font-family: var(--display); font-size: 34px; line-height: .98; text-transform: uppercase; margin: 10px 0 6px; }
.news-card-sf { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-2); }
.news-bulletin { position: relative; background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 18px; margin: 0 0 22px; }
.news-stamp { position: absolute; top: -12px; right: 14px; background: var(--red); color: #fff; font-family: var(--display); font-size: 15px; letter-spacing: 1px; padding: 4px 10px; transform: rotate(3deg); }
.news-bulletin h3 { font-family: var(--display); font-size: 24px; line-height: 1; text-transform: uppercase; }
.news-bulletin p { font-size: 14px; margin-top: 8px; line-height: 1.45; }
.news-bulletin-date { font: 10px var(--mono); color: var(--muted); margin-top: 10px; letter-spacing: 1px; }
.news-quiet, .news-404 { font-family: var(--serif); font-style: italic; font-size: 22px; padding: 30px 0; }
/* Inside this issue: a bulletin's tag, and articles as links */
.issue-tag { display: inline-block; background: var(--red); color: #fff; font-family: var(--display); font-size: 12px; letter-spacing: 1px; padding: 2px 7px; margin-right: 8px; vertical-align: 2px; transform: rotate(-2deg); }
.issue-link { display: contents; color: inherit; text-decoration: none; }
.issue-link:hover .issue-hed { text-decoration: underline; }
/* The Facebook card mock (The Desk only) */
.fb-card { background: #fff; border: 1px solid #dadde1; font-family: Helvetica, Arial, sans-serif; }
.fb-card-img { aspect-ratio: 1.91 / 1; overflow: hidden; background: #eee; }
.fb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-card-text { padding: 10px 12px; background: #f0f2f5; }
.fb-card-host { font-size: 12px; color: #65676b; }
.fb-card-title { font-size: 16px; font-weight: 700; color: #050505; margin: 3px 0; }
.fb-card-desc { font-size: 14px; color: #65676b; }
/* Phone and tablet: the Wire is a swipe strip right under the heading, not a pile below every article */
@media (max-width: 899px) {
  .news-wire { order: -1; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 14px 16px 12px; margin: -6px -16px 0; scrollbar-width: none; }
  .news-wire::-webkit-scrollbar { display: none; }
  .news-wire:empty { display: none; }
  .news-wire .news-bulletin { flex: 0 0 72%; max-width: 280px; margin: 0; padding: 24px 14px 14px; scroll-snap-align: start; box-shadow: 4px 4px 0 var(--ink); }
  .news-wire .news-bulletin h3 { font-size: 19px; }
  .news-wire .news-bulletin p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .news-wire .news-stamp { font-size: 13px; top: -10px; }
}