:root {
  --index-ink:#273334;
  --index-muted:#69716f;
  --index-primary:#2b7777;
  --index-paper:#f6f5f1;
  --index-white:#fdfcf9;
  --index-line:#d7d3c7;
}

* { box-sizing:border-box; }
html { color:var(--index-ink); background:var(--index-paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { margin:0; background:var(--index-white); }
a { color:inherit; }

.article-index-site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  max-width:1240px;
  margin:auto;
  padding:1.25rem 2rem;
  border-bottom:1px solid var(--index-line);
}
.article-index-site-mark { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.article-index-site-mark > span { display:grid; place-items:center; width:2.15rem; height:2.15rem; color:var(--index-white); background:var(--index-primary); font:700 1.15rem Georgia,serif; }
.article-index-site-mark strong { font-size:.9rem; letter-spacing:.04em; }
.article-index-home-link { color:var(--index-primary); font-size:.78rem; font-weight:800; letter-spacing:.09em; text-decoration:none; text-transform:uppercase; }

.article-index-page main { max-width:1240px; min-height:calc(100vh - 170px); margin:auto; padding:5rem 2rem 7rem; }
.article-index-hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr); gap:1rem 4rem; align-items:end; padding:0 0 3rem; border-bottom:1px solid var(--index-line); }
.article-index-hero > span { grid-column:1/-1; color:var(--index-primary); font-size:.74rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.article-index-hero h1 { margin:0; font:700 clamp(3.4rem,8vw,7rem)/.9 Georgia,"Times New Roman",serif; letter-spacing:-.045em; }
.article-index-hero p { margin:0; color:var(--index-muted); font:1.15rem/1.7 Georgia,"Times New Roman",serif; }
.article-index-hero small { grid-column:1/-1; color:var(--index-muted); font-size:.76rem; }

.article-index-discovery { display:grid; gap:1.4rem; padding:2rem 0 0; }
.article-index-discovery-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.article-index-discovery-heading > div > span { color:var(--index-primary); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.article-index-discovery-heading h2 { margin:.35rem 0 0; font:700 clamp(1.55rem,3vw,2.35rem)/1.1 Georgia,"Times New Roman",serif; }
.article-index-discovery-heading > a { color:var(--index-primary); font-size:.72rem; font-weight:800; text-decoration:none; }
.article-index-search { display:grid; grid-template-columns:minmax(260px,1fr) minmax(180px,.38fr) minmax(160px,.32fr) auto; gap:.8rem; align-items:end; padding:1.2rem; background:var(--index-paper); border:1px solid var(--index-line); }
.article-index-search label { display:grid; gap:.45rem; min-width:0; }
.article-index-search label > span { color:var(--index-muted); font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.article-index-search input,.article-index-search select { width:100%; min-height:2.9rem; padding:.7rem .8rem; color:var(--index-ink); background:var(--index-white); border:1px solid #bbb7aa; border-radius:0; font:inherit; }
.article-index-search input:focus,.article-index-search select:focus { outline:2px solid var(--index-primary); outline-offset:1px; }
.article-index-search button { min-height:2.9rem; padding:.75rem 1.1rem; color:var(--index-white); background:var(--index-primary); border:1px solid var(--index-primary); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.article-index-topics { display:flex; flex-wrap:wrap; gap:.55rem; }
.article-index-topics a { display:inline-flex; align-items:center; gap:.55rem; padding:.55rem .75rem; color:var(--index-muted); border:1px solid var(--index-line); font-size:.72rem; font-weight:750; text-decoration:none; }
.article-index-topics a span { display:grid; place-items:center; min-width:1.4rem; min-height:1.4rem; padding:0 .25rem; color:var(--index-primary); background:var(--index-paper); font-size:.62rem; }
.article-index-topics a[aria-current="page"] { color:var(--index-white); background:var(--index-primary); border-color:var(--index-primary); }
.article-index-topics a[aria-current="page"] span { color:var(--index-primary); background:var(--index-white); }
.article-index-result-count { margin:0; color:var(--index-muted); font-size:.76rem; }
.article-index-result-count strong { color:var(--index-ink); }

.article-index-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3.5rem 2rem; padding-top:2.2rem; }
.article-index-card { min-width:0; border-top:2px solid var(--index-ink); }
.article-index-visual { position:relative; display:grid; place-items:center; aspect-ratio:16/9; overflow:hidden; color:var(--index-primary); background:var(--index-paper); text-decoration:none; }
.article-index-visual > span { font:italic 3.8rem/1 Georgia,serif; opacity:.62; }
.article-index-visual img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.article-index-card:hover .article-index-visual img { transform:scale(1.025); }
.article-index-card-body { display:grid; align-content:start; gap:1rem; padding-top:1.25rem; }
.article-index-meta { display:flex; flex-wrap:wrap; gap:.45rem .85rem; margin:0; color:var(--index-muted); font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.article-index-meta span:first-child { color:var(--index-primary); }
.article-index-card h2 { margin:0; font:700 clamp(1.35rem,2vw,1.8rem)/1.15 Georgia,"Times New Roman",serif; overflow-wrap:anywhere; }
.article-index-card h2 a { text-decoration:none; }
.article-index-excerpt { margin:0; color:var(--index-muted); font:1rem/1.65 Georgia,"Times New Roman",serif; }
.article-index-read { justify-self:start; color:var(--index-primary); font-size:.76rem; font-weight:800; letter-spacing:.07em; text-decoration:none; text-transform:uppercase; }
.article-index-read span { display:inline-block; margin-left:.25rem; transition:transform .2s ease; }
.article-index-read:hover span,.article-index-read:focus-visible span { transform:translateX(.25rem); }

.article-index-pagination { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; margin-top:4rem; padding-top:1.4rem; border-top:1px solid var(--index-line); }
.article-index-pagination a { color:var(--index-primary); font-size:.78rem; font-weight:800; text-decoration:none; }
.article-index-pagination a:last-child { justify-self:end; }
.article-index-pagination strong { color:var(--index-muted); font-size:.72rem; font-weight:700; }
.article-index-empty { max-width:680px; margin:5rem auto; text-align:center; }
.article-index-empty > strong { color:var(--index-primary); font-size:.74rem; letter-spacing:.15em; }
.article-index-empty h2 { margin:1rem 0; font:700 clamp(2.3rem,6vw,4.5rem)/1 Georgia,serif; }
.article-index-empty p { color:var(--index-muted); line-height:1.7; }
.article-index-empty a { color:var(--index-primary); font-size:.78rem; font-weight:800; }
.article-index-footer { display:flex; justify-content:space-between; gap:1rem; max-width:1240px; margin:auto; padding:1.5rem 2rem; color:var(--index-muted); border-top:1px solid var(--index-line); font-size:.75rem; }
.article-index-footer a { color:var(--index-primary); font-weight:800; text-decoration:none; }

@media (max-width:900px) {
  .article-index-hero { grid-template-columns:1fr; }
  .article-index-hero > span,.article-index-hero small { grid-column:auto; }
  .article-index-search { grid-template-columns:1fr 1fr; }
  .article-index-search-query { grid-column:1/-1; }
  .article-index-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .article-index-site-header { padding:1rem 1.2rem; }
  .article-index-site-mark strong { display:none; }
  .article-index-page main { padding:3.5rem 1.25rem 5rem; }
  .article-index-hero { padding-bottom:2.2rem; }
  .article-index-hero h1 { font-size:clamp(3rem,17vw,4.6rem); }
  .article-index-discovery-heading { align-items:start; flex-direction:column; }
  .article-index-search { grid-template-columns:1fr; padding:1rem; }
  .article-index-search-query { grid-column:auto; }
  .article-index-search button { width:100%; }
  .article-index-topics { flex-wrap:nowrap; margin-right:-1.25rem; padding-right:1.25rem; overflow-x:auto; scrollbar-width:thin; }
  .article-index-topics a { flex:0 0 auto; }
  .article-index-grid { grid-template-columns:1fr; gap:2.8rem; padding-top:2rem; }
  .article-index-card h2 { font-size:1.55rem; }
  .article-index-footer { display:grid; padding:1.25rem; }
}