/* Articles index (/articles): a short hero, topic filters, one featured article, then cards.
   The whole card is the link target through its title; the filters only appear once the
   script runs, so without it every article stays visible. */
body[data-page="articles"] .page-hero { --hero-accent: var(--hero-orange-amber); }
/* The one exception to the equal desktop hero height (styles.css, owner 2026-09-30): the index
   has no hero art, so the chosen mockup keeps it short and the articles sit near the top. */
.articles-hero { padding-block: clamp(2.2rem, 5vw, 3.6rem) clamp(2.4rem, 5vw, 3.8rem); }
.page-hero.articles-hero { min-height: 0; }
.articles-hero .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
.articles-hero .page-hero-copy { max-width: 760px; }
.articles-byline { margin: 0; color: rgb(255 255 255 / .78); font-size: .9rem; line-height: 1.5; }
.articles-byline strong { color: #fff; }

.article-card-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; width: 100%; margin: 0; color: var(--orange-accessible); font: 700 .72rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.article-card-meta span + span { color: var(--muted); font-weight: 600; letter-spacing: .03em; text-transform: none; }

.articles-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.6rem; }
.articles-filter[hidden] { display: none; }
.articles-filter button { min-height: 40px; padding: .45rem .95rem; border: 1px solid rgba(27,28,28,.16); border-radius: 999px; background: rgba(255,255,255,.85); color: var(--ink); font: 600 .86rem var(--body); cursor: pointer; }
.articles-filter button:hover { border-color: var(--orange); }
.articles-filter button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.articles-filter button:focus-visible { outline: 3px solid var(--orange-accessible); outline-offset: 2px; }

.articles-feature { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; border: 1px solid rgba(242,129,29,.55); border-radius: var(--panel-radius); background: rgba(255,255,255,.85); box-shadow: 0 20px 48px rgba(194,90,10,.14); }
.articles-feature img { width: 100%; height: 100%; min-height: 300px; max-height: 380px; object-fit: cover; object-position: 50% 30%; background: #fdf0e3; }
.articles-feature-copy { display: grid; align-content: center; justify-items: start; gap: .9rem; padding: clamp(1.4rem, 3vw, 2.6rem); }
.articles-feature h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.16; letter-spacing: -.025em; }
.articles-feature-copy > p:not(.article-card-meta) { margin: 0; color: var(--muted); line-height: 1.6; }
.articles-tag { display: inline-block; padding: .2rem .65rem; border-radius: 999px; background: #fdf0e3; color: var(--orange-accessible); font: 700 .72rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }

.articles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.4rem); margin-top: clamp(1rem, 2vw, 1.4rem); }
.articles-card { position: relative; display: grid; align-content: start; gap: .65rem; padding: clamp(1.2rem, 2.2vw, 1.6rem); border: 1px solid rgba(27,28,28,.12); border-radius: var(--panel-radius); background: rgba(255,255,255,.8); transition: border-color .2s ease, box-shadow .2s ease; }
.articles-card:hover, .articles-card:focus-within { border-color: rgba(242,129,29,.55); box-shadow: 0 14px 34px rgba(104,48,7,.1); }
.articles-card h2 { margin: 0; font-size: 1.22rem; line-height: 1.2; letter-spacing: -.015em; }
.articles-card > p:not(.article-card-meta) { margin: 0; color: var(--muted); line-height: 1.6; }
.articles-feature h2 a, .articles-card h2 a { color: inherit; text-decoration: none; }
.articles-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.articles-feature h2 a:hover, .articles-card h2 a:hover { color: var(--orange-accessible); text-decoration: underline; text-underline-offset: .18em; }
.articles-card h2 a:focus-visible { outline: none; }
.articles-card:has(h2 a:focus-visible) { outline: 3px solid var(--orange-accessible); outline-offset: 3px; }
[data-articles] [hidden] { display: none !important; }

.articles-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.3rem, 3vw, 2rem); border-radius: var(--panel-radius); background: #fdf0e3; }
.articles-band p { margin: 0; max-width: 46ch; font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; line-height: 1.25; }
.articles-band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.articles-link { color: var(--orange-accessible); font-size: .92rem; font-weight: 700; text-underline-offset: .2em; }

@media (max-width: 900px) {
  .articles-feature { grid-template-columns: minmax(0, 1fr); }
  .articles-feature img { min-height: 200px; max-height: 240px; }
  .articles-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .articles-card { transition: none; } }