body[data-display="grotesk"] { --font-display: "Space Grotesk", "Mona Sans", sans-serif; }
  body[data-display="mona"] { --font-display: "Mona Sans", -apple-system, sans-serif; }
  @font-face { font-family: "Mona Sans"; src: url("/fonts/MonaSans-VariableFont_wdth_wght.ttf") format("truetype-variations"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; }
  @font-face { font-family: "Mona Sans"; src: url("/fonts/MonaSans-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"); font-weight: 200 900; font-stretch: 75% 125%; font-style: italic; font-display: swap; }
  .news-hero { display: grid; gap: 16px; }
  @media (min-width: 1000px) { .news-hero { grid-template-columns: 1.5fr 1fr; } }
  .news-lead { background: var(--hai-ocean); color: var(--hai-off-white); border-radius: var(--radius-lg); padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; text-decoration: none; }
  .news-lead::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(217,233,232,0.12); filter: blur(60px); right: -100px; top: -120px; }
  .news-lead h2 { font-size: clamp(24px, 3vw, 38px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 10px 0 0; max-width: 24ch; position: relative; color: var(--hai-off-white); }
  .news-lead p { font-size: 15px; line-height: 1.6; color: rgba(247,243,238,0.76); margin: 0; max-width: 52ch; position: relative; }
  .news-lead__meta { position: relative; margin-top: auto; padding-top: 16px; border-top: 1px dashed rgba(247,243,238,0.2); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: rgba(247,243,238,0.55); }
  @media (min-width: 900px) { .news-lead { padding: 40px; } }
  .news-side { display: flex; flex-direction: column; gap: 16px; }
  .news-mini { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; text-decoration: none; color: inherit; flex: 1; display: flex; flex-direction: column; gap: 8px; transition: border-color 200ms var(--ease-hover), transform 200ms var(--ease-hover); }
  .news-mini:hover { border-color: var(--border-strong); transform: translateY(-1px); }
  .news-mini h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; margin: 0; }
  .news-mini span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-subtle); }
  .news-row { display: flex; gap: 20px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; transition: background 180ms var(--ease-hover); }
  .news-row[hidden] { display: none; }
  .news-row:hover { background: rgba(17,17,17,0.02); }
  .news-row__date { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; flex-shrink: 0; line-height: 1; text-align: center; }
  .news-row__day { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.04em; color: var(--fg); }
  .news-row__month { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); }
  .news-row__year { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-subtle); }
  .news-row__body h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.28; margin: 0 0 7px; }
  .news-row__body p { font-size: 14.5px; line-height: 1.55; color: var(--fg-muted); margin: 0 0 10px; max-width: 62ch; }
  .news-row__src { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-subtle); }
  .news-row__arrow { margin-left: auto; font-family: var(--font-mono); color: var(--fg-subtle); align-self: center; transition: transform 200ms var(--ease-hover), color 200ms var(--ease-hover); }
  .news-row:hover .news-row__arrow { transform: translateX(4px); color: var(--fg); }
  @media (max-width: 640px) { .news-row { flex-direction: column; gap: 10px; } .news-row__date { width: auto; } .news-row__arrow { display: none; } }