/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

/* --- Hero --- */
.hero{ padding-block:1rem 0; }

.hero-inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:4rem;
  align-items:center;
}
@media (max-width:56rem){
  .hero-inner{ grid-template-columns:1fr; gap:2.5rem; }
}

.hero-copy h1{ margin-bottom:1.25rem; }

/* Stat row */
.stat-row{
  display:flex;
  flex-wrap:wrap;
  gap:2.5rem;
  margin:2.25rem 0 0;
  padding:0;
  list-style:none;
}
.stat-num{
  display:block;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 90;
  font-size:2.25rem;
  font-weight:600;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat-label{
  display:block;
  margin-top:.35rem;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fleece-silver);
}

/* --- Fleece swatch card --- */
.fleece-card{
  padding:1.75rem;
  background:var(--fleece-card);
  border:1px solid var(--fleece-beige);
  border-radius:var(--radius);
}
.fleece-title{
  margin:0 0 .5rem;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 30;
  font-size:1.125rem;
  font-weight:600;
}
.fleece-sub{
  margin:0 0 1.25rem;
  font-size:.875rem;
  line-height:1.5;
  color:var(--fleece-brown);
}

.swatches{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:.375rem;
}
.swatch{
  aspect-ratio:1;
  padding:0;
  background:var(--c);
  border:1px solid rgba(46,40,35,.12);
  border-radius:2px;
  cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.swatch:hover,
.swatch.is-active{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}

.swatch-name{
  min-height:1.25rem;              /* reserve the line, no layout shift */
  margin:1rem 0 0;
  font-size:.8125rem;
  font-weight:500;
  color:var(--fleece-brown);
}

/* --- State finder --- */
/* The homepage now uses the state-picker component; the "browse all"
   escape hatch below it points at the full grid on /alpaca-farm/states/. */
.browse-all{
  margin:1rem 0 0;
  font-size:.875rem;
  color:var(--fleece-brown);
}

/* NOTE: .filter / .state-grid / .no-results below are no longer used on
   the homepage. Keep them — they'll move to a states.css (or stay shared)
   when we build /alpaca-farm/states/, which reuses this exact grid. */
.filter{ margin-bottom:1.5rem; max-width:26rem; }

.filter-input{
  width:100%;
  padding:.75rem 1rem;
  background:var(--fleece-card);
  border:1px solid var(--fleece-beige);
  border-radius:var(--radius);
  font:inherit;
  font-size:1rem;
  color:var(--fleece-bay);
  transition:border-color .2s var(--ease);
}
.filter-input::placeholder{ color:var(--fleece-silver); }
.filter-input:focus{
  outline:none;
  border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(31,92,107,.12);
}

.filter-count{
  min-height:1.25rem;
  margin:.5rem 0 0;
  font-size:.8125rem;
  color:var(--fleece-silver);
}

.state-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  gap:.5rem;
  margin:0;
  padding:0;
  list-style:none;
}
.state-grid a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 1rem;
  background:var(--fleece-card);
  border:1px solid var(--fleece-beige);
  border-left:3px solid var(--fleece-beige);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--fleece-bay);
  font-size:.9375rem;
  font-weight:500;
  text-decoration:none;
  transition:border-left-color .2s var(--ease),
             transform .2s var(--ease),
             box-shadow .2s var(--ease);
}
/* Same fiber rule as the accordion — the thread carries across the site. */
.state-grid a:hover{
  border-left-color:var(--indigo);
  transform:translateX(2px);
  box-shadow:var(--shadow-sm);
  color:var(--fleece-bay);
}
.state-grid em{
  font-style:normal;
  font-size:.8125rem;
  font-variant-numeric:tabular-nums;
  color:var(--fleece-silver);
}

.no-results{
  padding:2rem 0;
  color:var(--fleece-brown);
}

/* --- Primer --- */
.primer{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:2rem 2.5rem;
}
.primer h3{ margin-top:0; }
.primer p{
  margin:0;
  font-size:.9375rem;
  color:var(--fleece-brown);
}

/* Section headings that need h1 weight but aren't the page's h1. */
.h1-scale{
  font-size:clamp(1.75rem,4vw,2.25rem);
  font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 100;
  margin-top:0;
}