/* ==========================================================================
   newsbrief page layout on top of anti-corpo.css  (/srv/newsbrief/site.css)
   Colours, type and components come from anti-corpo.css; this file only
   arranges them for the news page. After editing: ./nb.sh --rebuild isn't
   needed for CSS-only changes - just refresh the page.
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- header ------------------------------------------------------------- */
.nb-masthead { --ac-gap: 12px; }
.nb-home { text-decoration: none; color: inherit; }
.nb-home:hover { color: inherit; }
.nb-home:hover .ac-accent-text { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.nb-tagline { --ac-gap: 16px; align-items: baseline; }

.nb-theme { display: flex; align-items: center; gap: var(--ac-space-2); }
.nb-theme[hidden] { display: none; }
.nb-theme .ac-select { min-height: 40px; font-size: 14px; padding: 0 12px; }

.nb-jump { --ac-gap: 8px; }
.nb-jump .ac-tag { text-decoration: none; }
.nb-jump .ac-tag:hover { box-shadow: inset 0 0 0 var(--ac-stroke) var(--ac-accent); background: color-mix(in srgb, var(--ac-accent) 14%, transparent); }
.nb-count { font-family: var(--ac-font-mono); margin-left: 6px; color: var(--ac-muted); }

/* ---- sections ----------------------------------------------------------- */
.nb-main { display: flex; flex-direction: column; gap: var(--ac-space-6); }
.nb-section { display: flex; flex-direction: column; gap: var(--ac-space-3); }
.nb-section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--ac-space-2) var(--ac-space-3); }
.nb-section__head .ac-title { font-size: clamp(16px, 2.2vw, 22px); }

/* ---- cards -------------------------------------------------------------- */
.nb-cards { --ac-grid-min: 300px; gap: 16px; }
.nb-card { height: 100%; }
.nb-card .ac-story__body { flex: 1; }
.nb-card .ac-story__title a { color: var(--ac-ink); }
.nb-card .ac-story__title a:hover { color: var(--ac-accent-text); text-decoration: underline; text-decoration-color: var(--ac-accent); }
.nb-summary { color: var(--ac-secondary); font-size: 16px; line-height: 1.5; }
.nb-src { margin-top: auto; padding-top: var(--ac-space-1); }
.nb-src a { color: var(--ac-accent-text); }

.nb-empty, .nb-note { margin: 0; }

/* ---- footer / archive ---------------------------------------------------- */
.nb-footer { display: flex; flex-direction: column; gap: var(--ac-space-4); margin-top: var(--ac-space-4); }
.nb-archive { --ac-gap: 8px; }
.nb-archive .ac-tag { text-decoration: none; font-size: 10px; }
.nb-archive .ac-tag--outline:hover { background: color-mix(in srgb, var(--ac-accent) 14%, transparent); }

/* ---- phones ------------------------------------------------------------- */
@media (max-width: 640px) {
  .nb-cards { --ac-grid-min: 100%; }
  .ac-story__num { font-size: 20px; }
  .nb-summary { font-size: 15px; }
  .ac-header__bar { align-items: flex-start; }
  .ac-barcode { display: none; }
}

/* ---- light-theme contrast ------------------------------------------------
   Bright accents (esp. cyan) are too pale on Bone, so text-like accents use
   --ac-accent-text, which anti-corpo.css deepens on light grounds. */
.nb-tagline .ac-kana { color: var(--ac-accent-text); }
.nb-jump .ac-tag--outline { box-shadow: inset 0 0 0 var(--ac-stroke) var(--ac-accent-text); }

/* ---- about page ----------------------------------------------------------
   Centred block, framed by anti-corpo corner brackets. */
.nb-about { display: grid; place-items: center; padding: var(--ac-space-4) 0 var(--ac-space-5); }
.nb-about__frame {
  --ac-bracket-len: 32px;
  width: min(100%, 760px);
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 56px);
}
.nb-about__body { display: flex; flex-direction: column; align-items: center; gap: var(--ac-space-3); text-align: center; }
.nb-about__body .ac-text { max-width: 60ch; }
.nb-about__body .ac-divider { width: 100%; }
.nb-about__kv { width: min(100%, 420px); text-align: left; margin-top: var(--ac-space-2); }
.nb-about__actions { justify-content: center; margin-top: var(--ac-space-3); --ac-gap: 12px; }
.nb-about__actions .ac-btn { text-decoration: none; }