/* News feed (/news/ and /news/<slug>). Pages are generated by the Deploy Shop
   Poster tool; this file sits on top of site.css and uses its tokens. */

.news, .article { padding-top: 88px; padding-bottom: var(--section); }

/* Index */
.news__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; margin-bottom: clamp(28px, 4vw, 56px); }
.news__head h1 { grid-column: 1 / 8; font-size: var(--step-name); line-height: 0.8; letter-spacing: -0.05em; }
.news__head p { grid-column: 8 / 13; max-width: 34ch; color: var(--muted); font-size: var(--step-body); padding-bottom: 0.6em; }

.news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.empty { grid-column: 1 / -1; background: var(--surface); border-radius: var(--radius); padding: var(--pad); color: var(--muted); }

.story { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--paper); border-radius: var(--radius); overflow: hidden; transition: transform var(--t-hover) var(--ease-out); }
.story:active { transform: scale(0.99); }
.story__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
.story__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-reveal) var(--ease-out); }
.story__text { display: grid; align-content: start; gap: 0.7rem; padding: var(--pad); }
.story__title { font-size: clamp(1.4rem, 1.05rem + 0.9vw, 2rem); line-height: 1; }
.story__title a { text-decoration: none; }
.story__title a::after { content: ""; position: absolute; inset: 0; }
.story__title a:focus-visible { outline: none; }
.story:has(a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.story__dek { color: var(--muted); font-size: var(--step-small); line-height: 1.45; }

.story--feature { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: none; background: var(--navy); color: var(--ink-on-dark); }
.story--feature .story__img { aspect-ratio: auto; min-height: clamp(260px, 34vw, 520px); }
.story--feature .story__text { align-content: end; gap: 1rem; padding: clamp(24px, 3vw, 44px); }
.story--feature .story__title { font-size: var(--step-head); line-height: 0.92; letter-spacing: -0.04em; }
.story--feature .story__dek { color: var(--muted-on-dark); font-size: var(--step-body); }
.story--feature .kicker { color: var(--sky); }
.story--feature .kicker span { background: var(--navy-2); color: var(--ink-on-dark); }

@media (hover: hover) and (pointer: fine) {
  .story:hover .story__img img { transform: scale(1.03); }
  .story:not(.story--feature):hover { transform: translateY(-2px); }
}

/* Shared */
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.kicker span { background: var(--mist); color: var(--ink); border-radius: 4px; padding: 0.2rem 0.55rem; }

/* Article */
.article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46rem) minmax(0, 1fr); row-gap: clamp(20px, 2.4vw, 32px); }
.article > * { grid-column: 2; }
.crumbs { font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.article__head { display: grid; gap: 1.1rem; }
.article__head h1 { font-size: var(--step-head); line-height: 0.92; letter-spacing: -0.04em; }
.article__dek { font-size: var(--step-lead); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); max-width: 36ch; }
.article__figure { grid-column: 1 / -1; width: min(100%, 72rem); justify-self: center; border-radius: var(--radius); overflow: hidden; background: var(--navy); aspect-ratio: 16 / 9; }
.article__figure img { width: 100%; height: 100%; object-fit: cover; }

.article__body { display: grid; gap: 1.15rem; line-height: 1.65; }
.article__body h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1; margin-top: 1.4rem; }
.article__body ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: 0.6rem; }
.article__body li { display: list-item; padding-left: 0.2rem; }
.article__body li::marker { color: var(--accent); }
.cite { font-size: 0.72em; line-height: 0; margin-left: 0.12em; }
.cite + .cite { margin-left: 0.25em; }
.cite a { color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.15em; transition: text-decoration-color var(--t-hover) ease; }
.cite a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .cite a:hover { text-decoration-color: currentColor; } }

.sources { background: var(--surface); border-radius: var(--radius); padding: var(--pad); display: grid; gap: 1rem; }
.sources h2 { font-size: 1.6rem; }
.sources ol { list-style: decimal; display: grid; gap: 0.75rem; padding-left: 1.6rem; font-size: var(--step-small); line-height: 1.4; }
.sources li { display: list-item; scroll-margin-top: 88px; padding-left: 0.3rem; }
.sources li:target { background: var(--mist); border-radius: 4px; }
.sources li::marker { font-weight: 600; color: var(--muted); }
.sources a { font-weight: 600; text-decoration-color: var(--sky); overflow-wrap: anywhere; }
.sources__meta { display: block; color: var(--muted); }
.sources__note { font-size: var(--step-small); color: var(--muted); }

.article__cta { background: var(--navy); color: var(--ink-on-dark); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; }
.article__cta p { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1; letter-spacing: -0.03em; max-width: 24ch; }

@media (max-width: 1000px) {
  .news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story--feature { grid-template-columns: 1fr; }
  .story--feature .story__img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .news, .article { padding-top: 76px; }
  .news__head h1, .news__head p { grid-column: 1 / -1; }
  .news__head h1 { font-size: clamp(4.5rem, 24vw, 7rem); }
  .news__grid { grid-template-columns: 1fr; }
  .article { grid-template-columns: minmax(0, 1fr); }
  .article > *, .article__figure { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .story, .story__img img { transition: none; }
}