/* Layout primitives + editorial/technical motifs */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container--narrow {
  max-width: var(--content-narrow);
}

.section {
  padding-block: var(--space-12);
}

.section--tight { padding-block: var(--space-8); }

.section.is-inverse {
  background: var(--color-ink);
  color: var(--color-paper);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--space-5); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Icon/marker + wrapping paragraph text (e.g. a bulleted list row) — unlike
   .cluster, this must never let the text drop to its own row away from the
   icon just because the text itself wraps to multiple lines. */
.list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.list-item__icon { flex-shrink: 0; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

/* Hero */

.section--hero { padding-block: var(--space-8) var(--space-6); }
.hero { text-align: center; }
.hero__title { margin-top: var(--space-3); }
.hero__highlight {
  position: relative;
  display: inline-block;
}
.hero__highlight::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -3%;
  right: -3%;
  bottom: -0.04em;
  height: 0.34em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.35' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='9'/%3E%3C/filter%3E%3Crect x='2' y='8' width='396' height='24' fill='%23D8F000' filter='url(%23r)'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.hero__lead { margin: var(--space-4) auto 0; max-width: 46ch; }
.hero__ctas { justify-content: center; margin-top: var(--space-5); }
.hero__banner {
  display: block;
  width: 100%;
  height: auto;
  max-width: 990px;
  margin: var(--space-8) auto 0;
  border-radius: var(--radius-md);
}

/* Site header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--color-line);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
}

.site-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
}

.site-logo__image {
  height: 64px;
  width: auto;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-nav__list {
  display: flex;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-nav__list a {
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  border-color: var(--color-signal);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-line-strong);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.site-nav__cta-mobile { display: none; }

@media (max-width: 860px) {
  .site-nav__list { display: none; }
  .nav-toggle { display: inline-flex; }
  .btn.site-nav__cta-desktop { display: none; }

  .site-nav.is-open .site-nav__list {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--color-paper);
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-line);
    gap: var(--space-4);
  }

  .site-nav__cta-mobile { display: block; margin-top: var(--space-2); }
  .site-nav__cta-mobile .btn { display: inline-flex; }
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-10);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(2, 1fr);
  gap: var(--space-8);
}

@media (max-width: 700px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.site-footer__list a {
  display: block;
  padding-block: var(--space-1);
}
.site-footer__list a:hover { color: var(--color-ink); }

/* Editorial/technical motifs */

.annotation {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.annotation::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--color-signal);
  border-radius: 1px;
}

.index-mark {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.bracket {
  position: relative;
  padding-inline: var(--space-4);
}
.bracket::before, .bracket::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--color-line-strong);
}
.bracket::before { left: 0; }
.bracket::after { right: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
  display: block;
}

.mark-signal { background: var(--color-signal); color: var(--color-signal-ink); padding: 0 0.25em; }

.hr-tech {
  border: 0;
  border-top: 1px dashed var(--color-line-strong);
  margin-block: var(--space-8);
}

.system-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-mono);
}

.system-flow__step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-paper-raised);
}

.system-flow__arrow {
  align-self: center;
  color: var(--color-muted);
}

/* Search system scrollytelling section */

.search-system__grid {
  margin-top: var(--space-12);
}

/* Tracker — bordered boxes with connecting arrows, matching the original
   system-flow diagram style (just repurposed as the sticky sidebar nav
   instead of the thing that scrolls). */
.search-system__tracker-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: rgba(244, 241, 232, 0.55);
  border: 1px solid rgba(244, 241, 232, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(244, 241, 232, 0.03);
  transition: color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}
.search-system__tracker-arrow {
  text-align: center;
  color: rgba(244, 241, 232, 0.35);
  padding-block: var(--space-1);
  font-family: var(--font-mono);
}
.search-system__step-icon {
  display: inline-flex;
  color: currentColor;
  opacity: 0.7;
}
.search-system__step-icon .search-system__icon-svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Narrative (the real, always-visible content — this is what gives natural
   scroll distance, no artificial min-height needed). */
.search-system__block {
  padding-block: var(--space-8);
  border-bottom: 1px dashed rgba(244, 241, 232, 0.15);
}
.search-system__block:first-child { padding-top: 0; }

.search-system__block-icon {
  display: inline-flex;
  color: var(--color-signal);
  margin-bottom: var(--space-3);
}
.search-system__block-icon .search-system__icon-svg { width: 40px; height: 40px; }

.search-system__block-title {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  color: var(--color-paper);
  margin-top: var(--space-2);
}

.search-system__block-desc {
  color: rgba(244, 241, 232, 0.7);
  margin-top: var(--space-3);
  max-width: 60ch;
}

.search-system__cta {
  text-align: center;
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px dashed rgba(244, 241, 232, 0.2);
}

@media (min-width: 900px) {
  .search-system--enhanced .search-system__grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-10);
    /* Default (stretch) align-items so .search-system__tracker-col spans
       the full height of the (much taller) narrative column — that's what
       gives its sticky child room to stay pinned for the whole scroll
       instead of un-sticking as soon as the tracker's own short content ends. */
  }

  .search-system--enhanced .search-system__tracker {
    position: sticky;
    /* Top-anchored, not center-anchored: a sticky element with top:50%
       engages the moment its natural position crosses the viewport's
       midpoint, which happens almost immediately once the section merely
       starts entering view from the bottom — while the previous section's
       background still fills the top half of the screen. That produced a
       tracker box floating over the wrong background. Anchoring near the
       top instead means it only engages once you've scrolled meaningfully
       into the section, which is the standard, safe pattern. */
    top: 6rem;
    background: var(--color-ink);
    padding-block: var(--space-4);
  }

  .search-system--enhanced .search-system__tracker-item.is-active {
    color: var(--color-signal);
    border-color: var(--color-signal);
    background: rgba(216, 240, 0, 0.08);
  }
}

/* Scroll reveal (progressive enhancement; content visible without JS) */

.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}