/* Containers, sections and grids */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:var(--section-y);position:relative}
.section--tint{
  background:linear-gradient(180deg,rgba(11,19,32,.5),rgba(2,5,10,0));
  border-top:1px solid var(--color-border);
}

/* A hairline between stacked sections gives the page structure without
   relying on large empty gaps to separate content. */
.section + .section::before{
  content:"";
  position:absolute;
  inset:0 auto auto 50%;
  translate:-50% 0;
  width:min(var(--container),calc(100% - 2 * var(--gutter)));
  height:1px;
  background:linear-gradient(90deg,transparent,var(--color-border) 22%,var(--color-border) 78%,transparent);
}

.section-head{
  max-width:680px;
  margin-bottom:clamp(2rem,3.2vw,3rem);
}
.section-head.is-center{margin-inline:auto;text-align:center}
.section-head.is-center .lede{margin-inline:auto}
.section-title{font-size:var(--fs-h2);margin-bottom:.75rem}
.section-head .lede{font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.65}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(.9rem,1.4vw,1.35rem);
  align-items:stretch;
}
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.9rem,1.4vw,1.35rem);
  align-items:stretch;
}

/* Scroll reveal, disabled under prefers-reduced-motion */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
/* Cards in a grid stagger in, which reads as designed rather than mechanical. */
.grid-3 > .reveal:nth-child(2),
.grid-2 > .reveal:nth-child(2){transition-delay:.07s}
.grid-3 > .reveal:nth-child(3){transition-delay:.14s}
.grid-3 > .reveal:nth-child(4){transition-delay:.04s}
.grid-3 > .reveal:nth-child(5){transition-delay:.11s}
.grid-3 > .reveal:nth-child(6){transition-delay:.18s}
.reveal.is-in{opacity:1;transform:none}

.breadcrumbs{
  position:relative;
  z-index:2;
  /* Clears the fixed header, since this is now the first thing in <main>. */
  margin-top:var(--header-h);
  border-bottom:1px solid var(--color-border);
  background:rgba(7,13,22,.55);
  backdrop-filter:blur(10px);
  font-size:var(--fs-small);
}
.breadcrumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  padding-block:.8rem;
  color:var(--color-text-secondary);
}
.breadcrumbs li{display:flex;align-items:center;gap:.45rem}
.breadcrumbs a{transition:color var(--t-fast)}
.breadcrumbs [aria-current="page"]{color:#DCE6F1;font-weight:600}

/* The hero no longer needs to reserve room for the fixed header when the
   breadcrumb bar has already done it. */
.breadcrumbs + .page-hero{padding-top:clamp(2.5rem,5vw,4rem)}
.breadcrumbs + .page-hero .page-hero__glow{top:-55%}
.breadcrumbs li + li::before{content:"/";opacity:.35}
.breadcrumbs a:hover{color:var(--color-primary)}

.pagination{margin-top:clamp(2.5rem,5vw,4rem)}
.pagination ul{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.pagination a,.pagination span{
  display:grid;place-items:center;
  min-width:44px;height:44px;padding-inline:.85rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-size:.9rem;font-weight:600;
  transition:all var(--t-fast);
}
.pagination a:hover{
  border-color:var(--color-border-strong);
  background:rgba(25,199,242,.08);
  color:var(--color-primary);
}
.pagination .current{
  background:var(--grad-cta);
  border-color:transparent;
  color:#02070E;
}

.empty-state{
  text-align:center;
  max-width:56ch;
  margin-inline:auto;
  padding-block:clamp(2rem,6vw,5rem);
}
.empty-state h2{margin-bottom:var(--space-sm)}
.empty-state p{color:var(--color-text-secondary);margin-bottom:var(--space-md)}