/* The Articles route inherits the Origami shell, type, colour, paper and grid
   system from styles.css. This file only composes those governed materials. */
body[data-page-kind='articles-index'] {
  --page-stock: var(--paper-cotton);
  --section-stock: var(--paper-rag);
}

.articles-index-intro {
  padding: clamp(9.5rem, 15vw, 13rem) var(--hero-inline) clamp(4.5rem, 8vw, 7.5rem);
  color: var(--midnight);
  background-color: var(--page-stock);
  background-image:
    linear-gradient(112deg, rgba(255, 255, 255, .56), transparent 58%),
    var(--paper-light),
    var(--paper-fibres);
  border-bottom: 1px solid var(--paper-rule);
}

.articles-index-intro__inner {
  width: min(100%, 82rem);
  margin-inline: auto;
}

.articles-index-intro__kicker {
  margin: 0 0 1rem;
  color: var(--text-accent);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.articles-index-intro h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--midnight);
  font: 400 clamp(4rem, 8vw, 8rem)/.9 var(--serif);
  letter-spacing: -.055em;
  text-wrap: balance;
}

.articles-index-intro__inner > p:last-child {
  max-width: 43rem;
  margin: clamp(1.5rem, 3vw, 2.3rem) 0 0;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.62;
}

.articles-index-collection {
  padding: clamp(4rem, 7vw, 7rem) var(--hero-inline) clamp(5rem, 9vw, 9rem);
  background-color: var(--section-stock);
  background-image: var(--paper-fibres);
}

.articles-index-collection__inner {
  width: min(100%, 82rem);
  margin-inline: auto;
}

.articles-index-search {
  --focus-ring: var(--midnight);
  --focus-halo: rgba(255, 255, 255, .92);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background-color: var(--paper-cotton);
  background-image: var(--paper-fibres);
  border-block: 1px solid var(--paper-rule);
}

.articles-index-search__field {
  display: grid;
  align-content: start;
  gap: .5rem;
  min-width: 0;
}

.articles-index-search__field label {
  color: var(--midnight);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.articles-index-search__field input,
.articles-index-search__field select {
  width: 100%;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .65rem .8rem;
  color: var(--midnight);
  background: rgba(255, 255, 255, .7);
  border: 2px solid var(--paper-rule);
  border-radius: 0;
}

.articles-index-search__field input:hover,
.articles-index-search__field select:hover {
  border-color: var(--midnight);
  box-shadow: inset 0 -3px 0 var(--teal);
}

.articles-index-search [data-articles-index-category-filter] {
  appearance: auto;
  cursor: pointer;
}

.articles-index-search [data-articles-index-category-filter]:has(option:checked:not([value=''])) {
  border-inline-start-width: .4rem;
  box-shadow: inset 0 -3px 0 var(--teal);
  font-weight: 750;
}

.articles-index-search [data-articles-index-category-filter]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--focus-halo), inset 0 -3px 0 var(--teal);
}

.articles-index-search [data-articles-index-search-status] {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-muted);
  font-size: .9rem;
  font-weight: 650;
}

.articles-index-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.articles-index-list__item {
  min-width: 0;
  height: 100%;
}

.articles-index-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--midnight);
  border: 1px solid rgba(17, 43, 57, .2);
  border-radius: 0;
  box-shadow: 0 1.2rem 2.8rem rgba(13, 32, 48, .12);
}

.articles-index-card__paper {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  color: var(--ink);
  background-color: var(--paper-cotton);
  background-image:
    linear-gradient(108deg, rgba(255, 255, 255, .6), transparent 64%),
    var(--paper-fibres);
  border-top: 1px solid var(--paper-rule);
}

.articles-index-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem 1.25rem;
  margin-bottom: clamp(.85rem, 1.4vw, 1.2rem);
}

.articles-index-card__date {
  margin: 0;
  color: var(--text-accent);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.articles-index-card__categories {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .85rem;
  margin: 0;
  padding: 0 0 0 1.25rem;
  color: var(--ink-muted);
  border-left: 1px solid var(--teal);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .075em;
  list-style: none;
  text-transform: uppercase;
}

.articles-index-card h2 {
  max-width: 20ch;
  margin: 0;
  color: var(--midnight);
  font: 400 clamp(1.65rem, 2.1vw, 2.25rem)/1 var(--serif);
  letter-spacing: -.04em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.articles-index-card h2 a {
  display: block;
  min-height: 2.75rem;
  text-decoration: none;
}

.articles-index-card h2 a:hover,
.articles-index-card h2 a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}

.articles-index-card__excerpt {
  max-width: 44rem;
  margin: clamp(.85rem, 1.4vw, 1.15rem) 0 0;
  color: var(--ink-muted);
  font-size: clamp(.95rem, 1vw, 1rem);
  line-height: 1.52;
  overflow-wrap: anywhere;
}

.articles-index-card__link {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  gap: .75rem;
  margin-top: clamp(1rem, 1.7vw, 1.35rem);
  color: var(--midnight);
  border-bottom: 1px solid var(--teal);
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .055em;
  text-decoration: none;
  text-transform: uppercase;
}

.articles-index-card__link:hover,
.articles-index-card__link:focus-visible {
  color: var(--text-accent);
  border-bottom-color: var(--midnight);
}

.articles-index-card__inlay {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  margin: clamp(.65rem, 1vw, .85rem);
  overflow: hidden;
  background-color: var(--midnight);
  background-image: var(--paper-fibres);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(169, 205, 202, .05);
}

.articles-index-card__inlay img {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.articles-index-card__inlay--ratio-sixteen-nine {
  aspect-ratio: 16 / 9;
}

.articles-index-card__inlay--ratio-eight-five {
  aspect-ratio: 8 / 5;
}

.articles-index-card__inlay--ratio-three-two {
  aspect-ratio: 3 / 2;
}

.articles-index-card__inlay--ratio-four-three {
  aspect-ratio: 4 / 3;
}

.articles-index-card__inlay--fit-cover img {
  object-fit: cover;
}

.articles-index-card__inlay--fit-contain img {
  object-fit: contain;
}

.articles-index-card__inlay--focal-left img {
  object-position: left center;
}

.articles-index-card__inlay--focal-center img {
  object-position: center center;
}

.articles-index-card__inlay--focal-right img {
  object-position: right center;
}

@media (max-width: 1120px) {
  .articles-index-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .articles-index-search__field--query {
    grid-column: 1 / -1;
  }

  .articles-index-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .articles-index-intro {
    padding: calc(4.75rem + clamp(3.5rem, 12vw, 5.5rem)) var(--gutter) clamp(3.5rem, 12vw, 5rem);
  }

  .articles-index-intro h1 {
    font-size: clamp(3.7rem, 19vw, 6rem);
  }

  .articles-index-collection {
    padding: clamp(2.5rem, 8vw, 4rem) var(--gutter) clamp(4rem, 14vw, 6rem);
  }

  .articles-index-search {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
    margin-bottom: clamp(1.5rem, 7vw, 2.5rem);
    padding: clamp(1rem, 4vw, 1.25rem);
  }

  .articles-index-search__field--query {
    grid-column: 1;
  }

  .articles-index-list {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 4.5vw, 1.35rem);
  }

  .articles-index-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 0;
  }

  .articles-index-card__paper {
    grid-column: 1;
    grid-row: 2;
    padding: clamp(1.15rem, 5vw, 1.5rem);
    border: 0;
    border-top: 1px solid var(--paper-rule);
  }

  .articles-index-card__inlay {
    grid-column: 1;
    grid-row: 1;
    margin: clamp(.5rem, 2.5vw, .75rem);
  }

  .articles-index-card h2 {
    max-width: 20ch;
    font-size: clamp(1.6rem, 7.2vw, 2rem);
  }

  .articles-index-card__categories {
    gap: .25rem .65rem;
    padding-left: .8rem;
  }
}

@media (max-width: 420px) {
  .articles-index-card__meta {
    gap: .4rem .75rem;
  }

  .articles-index-card__categories {
    gap: .2rem .55rem;
    padding-left: .65rem;
    font-size: .7rem;
  }

  .articles-index-card__excerpt {
    font-size: .9375rem;
    line-height: 1.48;
  }
}