/* ============================================================
   CATALOG - other products as an editorial index.
   ------------------------------------------------------------
   Lifted out of pages/index.css so /catalogue can have it without
   pulling 43KB of home-page rules with it. Both pages load this
   file; neither keeps its own copy of these rules.
   ============================================================ */

.catalog{
  padding:clamp(4rem,8vw,7rem) 0;
  background:var(--paper);
}

.catalog__list{
  list-style:none;
  counter-reset:cat;
  border-top:1px solid var(--rule);
}
.catalog__item{
  display:grid;
  grid-template-columns:60px 1.1fr 1.4fr 130px;
  gap:clamp(1rem,3vw,2.5rem);
  align-items:baseline;
  padding:clamp(1rem,2.5vw,1.5rem) 0;
  border-bottom:1px solid var(--rule-soft);
  font-family:var(--serif);
  counter-increment:cat;
  transition:background .18s ease;
  position:relative;
}
.catalog__item:hover{background:var(--paper-warm)}

.catalog__num{
  font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;
  color:var(--text-muted);
}
.catalog__num::before{content:counter(cat,decimal-leading-zero) " /";color:var(--ember)}

.catalog__title{
  font-family:var(--serif);
  font-variation-settings:"opsz" 48,"SOFT" 40,"wght" 500;
  font-size:clamp(1.15rem,1rem + .6vw,1.45rem);
  letter-spacing:-.012em;
  line-height:1.15;
}
.catalog__title a{color:inherit;text-decoration:none;transition:color .18s ease}
.catalog__title a:hover{color:var(--ember)}
.catalog__title em{
  display:block;
  font-style:italic;
  font-variation-settings:"opsz" 18,"SOFT" 80,"wght" 360;
  font-size:.75em;
  color:var(--text-muted);
  margin-top:.15rem;
}
.catalog__desc{
  font-family:var(--serif);
  font-variation-settings:"opsz" 14,"SOFT" 40,"wght" 400;
  font-size:.95rem;
  color:var(--text-muted);
  line-height:1.5;
  max-width:46ch;
}
.catalog__status{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text);
  white-space:nowrap;
  padding:.35rem .6rem;
  border:1px solid var(--rule);
  display:inline-block;
  line-height:1;
  justify-self:end;
}
.catalog__status--live{color:var(--ember);border-color:var(--ember)}
.catalog__status--dev{color:var(--text-muted);border-style:dashed}
.catalog__status--paper{
  color:var(--steel);border-color:var(--steel);
}

@media (max-width:860px){
  .catalog__item{grid-template-columns:50px 1fr;gap:.5rem 1rem}
  .catalog__desc{grid-column:1/-1;padding-left:calc(50px + 1rem)}
  .catalog__status{grid-column:2/3;justify-self:start;margin-top:.4rem}
}

.catalog__more{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  font-family:var(--mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
}
.catalog__more a{
  color:var(--ember-text);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:.25rem;
  transition:border-color .18s ease;
}
.catalog__more a:hover{border-bottom-color:var(--ember-text)}