/* ==========================================================================
   The Hmong Inc. — News & notices, v1 draft
   The blog / announcements index. Its own composition: a category filter, one
   large FEATURED lead article, then a post grid, then a get-updates strip.
   Posts are grouped by the same four areas the board posts into.

   Type is the SHARED scale — display (Archivo) for the page head and labels,
   Faustina serif for the readable headlines (exactly as the home page sets a
   news headline). No bespoke display sizes. Light register. Extends styles.css.
   Everything here is placeholder copy under the .tbd flag until the client
   sends real posts. Tokens from :root.
   ========================================================================== */

/* --- breadcrumb + page head (same convention as About / Programs) --------- */
.crumb {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--secondary); display: flex; gap: .55rem; align-items: center; margin: 0 0 1.6rem;
}
.crumb a { color: var(--secondary); text-decoration: none; }
.crumb a:hover { color: var(--green-ink); }
.crumb span { color: var(--hair-strong); }
.crumb b { font-variation-settings: "wdth" 100, "wght" 700; color: var(--ink); }

.phead { padding-block: clamp(52px, 7vw, 104px) clamp(30px, 3.5vw, 48px); }
.phead__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: end; }
@media (max-width: 900px) { .phead__grid { grid-template-columns: 1fr; gap: 2rem; } }
.phead .d1 { font-size: clamp(2.75rem, 6.4vw, 5.4rem); }
.phead__lede { color: var(--secondary); max-width: 40ch; }

/* --- category filter ------------------------------------------------------ */
.nfilter { display: flex; gap: .55rem; flex-wrap: wrap; }
.nchip {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .8rem; letter-spacing: .03em; padding: .58em 1.05em; border-radius: 999px;
  border: 1px solid var(--hair-strong); color: var(--secondary); text-decoration: none; background: transparent;
}
.nchip:hover { border-color: var(--ink); color: var(--ink); }
.nchip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* --- shared meta line ----------------------------------------------------- */
.nmeta { display: flex; gap: .6rem; align-items: center; font-family: var(--ui);
  font-variation-settings: "wdth" 100, "wght" 600; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--secondary); font-variant-numeric: lining-nums; margin: 0; }
.nmeta .cat { color: var(--green-ink); font-variation-settings: "wdth" 100, "wght" 800; }
.nmeta .dot { color: var(--hair-strong); }

/* --- featured lead -------------------------------------------------------- */
.nfeat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (max-width: 860px) { .nfeat { grid-template-columns: 1fr; gap: 1.6rem; } }
.nfeat__media { margin: 0; }
.nfeat__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.nfeat__flag { font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 800;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: var(--crimson); padding: .34em .6em; border-radius: 3px; display: inline-block; margin-bottom: 1rem; }
.nfeat__title { font-family: var(--body); font-size: clamp(1.6rem, 2.7vw, 2.35rem); line-height: 1.2;
  font-weight: 600; letter-spacing: -.008em; color: var(--ink); margin: .9rem 0 .8rem; text-wrap: pretty; }
.nfeat__title a { color: inherit; text-decoration: none; }
.nfeat__title a:hover { text-decoration: underline; text-underline-offset: .14em; }
.nfeat__excerpt { color: var(--secondary); font-size: 1.06rem; line-height: 1.6; margin: 0 0 1.5rem; max-width: 52ch; }

/* --- post grid ------------------------------------------------------------ */
.ngrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(24px, 3vw, 40px) clamp(22px, 2.6vw, 36px); }
@media (max-width: 960px) { .ngrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ngrid { grid-template-columns: 1fr; } }
.ncard { display: block; text-decoration: none; color: inherit; }
.ncard__media { margin: 0 0 1.05rem; }
.ncard__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.ncard .nmeta { margin-bottom: .55rem; }
.ncard__title { font-family: var(--body); font-size: 1.28rem; line-height: 1.32; font-weight: 600;
  letter-spacing: -.005em; color: var(--ink); margin: 0 0 .5rem; }
.ncard:hover .ncard__title { text-decoration: underline; text-underline-offset: .14em; }
.ncard__excerpt { color: var(--secondary); font-size: .98rem; line-height: 1.5; margin: 0; }

/* --- get updates strip ---------------------------------------------------- */
.nsub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 820px) { .nsub { grid-template-columns: 1fr; gap: 1.6rem; } }
.nsub__form { display: flex; gap: .7rem; flex-wrap: wrap; }
.nsub__form input { flex: 1 1 220px; font: inherit; font-size: 1rem; padding: .82em .95em;
  border: 1px solid var(--hair-strong); border-radius: 4px; background: #fff; color: var(--ink); }
.nsub__form input:focus { border-color: var(--green); outline: 2px solid rgba(7,118,65,.28); outline-offset: 1px; }
.nsub__fine { font-size: .82rem; color: var(--secondary); margin: .9rem 0 0; }