/* ==========================================================================
   Alpaca Farms — types of alpaca farms editorial page
   Production path: /alpaca-farm/types-of-alpaca-farms/style/types.css
   ========================================================================== */

.types-page{
  --guide-accent:#735844;
  --type-breeding:#7a5a45;
  --type-fiber:#496f77;
  --type-visitor:#9b6446;
  --type-store:#66785e;
  --type-gold:#bd913f;
}

/* Hero */
.types-hero{
  display:grid;
  grid-template-columns:minmax(0, .82fr) minmax(23rem, 1.18fr);
  gap:clamp(2.5rem, 8vw, 7rem);
  align-items:center;
  padding-block:clamp(1rem, 4vw, 3rem);
}

.types-hero h1{
  max-width:9ch;
  font-size:clamp(2.65rem, 6vw, 4.8rem);
  line-height:1;
}

.types-hero__lede{
  color:var(--fleece-brown);
  font-size:clamp(1.05rem, 2vw, 1.2rem);
  line-height:1.65;
}

.types-hero__copy > p:last-child{
  margin-bottom:0;
  color:var(--fleece-brown);
}

.types-hero__media{
  position:relative;
  margin:0;
  padding-left:1rem;
  border-left:5px solid var(--type-gold);
}

.types-hero__media img{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  border:1px solid var(--fleece-beige);
}

.types-hero__media figcaption{
  max-width:34rem;
  margin-top:.65rem;
  color:var(--fleece-silver);
  font-size:.78rem;
  line-height:1.5;
}

/* Quick type index */
.type-index{
  margin-top:clamp(4.5rem, 9vw, 7rem);
}

.type-index__head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(16rem, .55fr);
  gap:1rem 4rem;
  align-items:end;
  margin-bottom:1.75rem;
}

.type-index__head .guide-kicker,
.type-index__head h2{
  grid-column:1;
}

.type-index__head h2{
  margin:.15rem 0 0;
  font-size:clamp(1.75rem, 4vw, 2.5rem);
}

.type-index__head > p:last-child{
  grid-column:2;
  grid-row:1 / span 2;
  margin:0;
  color:var(--fleece-brown);
}

.type-index ul{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1px;
  margin:0;
  padding:1px;
  background:var(--fleece-beige);
  list-style:none;
}

.type-index li{
  --type-color:var(--guide-accent);
  background:var(--fleece-card);
}

.type-index__breeding{ --type-color:var(--type-breeding) !important; }
.type-index__fiber{ --type-color:var(--type-fiber) !important; }
.type-index__visitor{ --type-color:var(--type-visitor) !important; }
.type-index__store{ --type-color:var(--type-store) !important; }

.type-index a{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:.35rem 1.2rem;
  min-height:9rem;
  padding:1.35rem 1.5rem;
  color:var(--fleece-bay);
  text-decoration:none;
  border-left:4px solid var(--type-color);
  transition:background .2s var(--ease);
}

.type-index a:hover{
  background:var(--fleece-white);
}

.type-index__number{
  grid-row:1 / span 2;
  color:var(--type-color);
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:600;
}

.type-index strong{
  font-family:var(--font-display);
  font-size:1.25rem;
  line-height:1.25;
}

.type-index small{
  color:var(--fleece-brown);
  font-size:.82rem;
  line-height:1.5;
}

/* Individual type profiles */
.type-profile{
  --profile-color:var(--guide-accent);
  display:grid;
  grid-template-columns:5.25rem minmax(0, 1.03fr) minmax(20rem, .97fr);
  gap:clamp(1.5rem, 4vw, 3.5rem);
  align-items:center;
  scroll-margin-top:6.5rem;
}

.type-profile--breeding{ --profile-color:var(--type-breeding); }
.type-profile--fiber{ --profile-color:var(--type-fiber); }
.type-profile--visitor{ --profile-color:var(--type-visitor); }
.type-profile--store{ --profile-color:var(--type-store); }

.type-profile--reverse{
  grid-template-columns:minmax(20rem, .97fr) minmax(0, 1.03fr) 5.25rem;
}

.type-profile--reverse .type-profile__label{
  grid-column:3;
  grid-row:1;
}

.type-profile--reverse .type-profile__copy{
  grid-column:2;
  grid-row:1;
}

.type-profile--reverse .type-profile__media{
  grid-column:1;
  grid-row:1;
}

.type-profile__label{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  min-height:16rem;
  padding:.8rem;
  color:#fff;
  background:var(--profile-color);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}

.type-profile__label span{
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.74;
}

.type-profile__label strong{
  font-family:var(--font-display);
  font-size:1.15rem;
}

.type-profile .guide-kicker{
  color:var(--profile-color);
}

.type-profile__facts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1px;
  margin:1.6rem 0 0;
  padding:1px;
  background:var(--fleece-beige);
}

.type-profile__facts > div{
  padding:.9rem;
  background:var(--fleece-card);
}

.type-profile__facts dt{
  margin-bottom:.3rem;
  color:var(--profile-color);
  font-size:.63rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.type-profile__facts dd{
  margin:0;
  color:var(--fleece-brown);
  font-size:.75rem;
  line-height:1.45;
}

.type-profile__media{
  position:relative;
}

.type-profile__media::after{
  content:"";
  position:absolute;
  inset:auto -1rem -1rem 1rem;
  z-index:-1;
  height:42%;
  background:color-mix(in srgb, var(--profile-color) 15%, var(--fleece-white));
}

.type-profile--reverse .type-profile__media::after{
  inset:auto 1rem -1rem -1rem;
}

/* Overlap section */
.overlap-section{
  padding-block:clamp(2.75rem, 7vw, 5rem);
  border-block:1px solid var(--fleece-beige);
}

.overlap-section__head{
  max-width:48rem;
  margin-bottom:2rem;
}

.overlap-section__head h2{
  margin:.15rem 0 .8rem;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
}

.overlap-section__head > p:last-child{
  color:var(--fleece-brown);
}

.overlap-paths{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0;
  border:1px solid var(--fleece-beige);
}

.overlap-paths article{
  --path-color:var(--type-breeding);
  min-height:16rem;
  padding:1.4rem;
  background:var(--fleece-card);
  border-top:4px solid var(--path-color);
}

.overlap-paths article + article{
  border-left:1px solid var(--fleece-beige);
}

.overlap-paths article:nth-child(2){ --path-color:var(--type-fiber); }
.overlap-paths article:nth-child(3){ --path-color:var(--type-visitor); }
.overlap-paths article:nth-child(4){ --path-color:var(--type-store); }

.overlap-paths span{
  color:var(--path-color);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.overlap-paths h3{
  margin:.65rem 0 .7rem;
  font-family:var(--font-display);
  font-size:1.15rem;
  line-height:1.3;
}

.overlap-paths p{
  margin:0;
  color:var(--fleece-brown);
  font-size:.82rem;
}

/* Listing interpretation */
.listing-guide{
  display:grid;
  grid-template-columns:minmax(17rem, .65fr) minmax(0, 1.35fr);
  gap:clamp(2.5rem, 8vw, 7rem);
  align-items:start;
}

.listing-guide__copy h2{
  margin:.15rem 0 .8rem;
  font-family:var(--font-display);
  font-size:clamp(1.75rem, 4vw, 2.45rem);
  line-height:1.15;
}

.listing-guide__copy > p:last-child{
  color:var(--fleece-brown);
}

.listing-questions{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:listing-question;
  border-top:1px solid var(--fleece-beige);
}

.listing-questions li{
  position:relative;
  padding:1.4rem 0 1.4rem 3.4rem;
  border-bottom:1px solid var(--fleece-beige);
  counter-increment:listing-question;
}

.listing-questions li::before{
  content:counter(listing-question, decimal-leading-zero);
  position:absolute;
  left:0;
  top:1.35rem;
  color:var(--type-gold);
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:600;
}

.listing-questions strong,
.listing-questions span{
  display:block;
}

.listing-questions strong{
  margin-bottom:.3rem;
  color:var(--fleece-bay);
  font-size:.92rem;
}

.listing-questions span{
  color:var(--fleece-brown);
  font-size:.82rem;
  line-height:1.55;
}

/* State links */
.type-states{
  padding-block:clamp(2.75rem, 7vw, 4.5rem);
  border-block:1px solid var(--fleece-beige);
}

.type-states__head{
  max-width:44rem;
  margin-bottom:2rem;
}

.type-states__head h2{
  margin:.15rem 0 .75rem;
  font-size:clamp(1.75rem, 4vw, 2.5rem);
}

.type-states__head > p:last-child{
  color:var(--fleece-brown);
}

.type-states__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}

.type-state{
  --state-color:var(--guide-accent);
  display:flex;
  flex-direction:column;
  min-height:15rem;
  padding:1.5rem;
  color:var(--fleece-bay);
  background:var(--fleece-card);
  border:1px solid var(--fleece-beige);
  border-top:5px solid var(--state-color);
  text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}

.type-state--michigan{ --state-color:var(--type-breeding); }
.type-state--oregon{ --state-color:var(--type-fiber); }
.type-state--new-jersey{ --state-color:var(--type-visitor); }

.type-state:hover{
  color:var(--fleece-bay);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

.type-state small{
  color:var(--state-color);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.type-state strong{
  margin:.65rem 0;
  font-family:var(--font-display);
  font-size:1.55rem;
}

.type-state span{
  color:var(--fleece-brown);
  font-size:.84rem;
  line-height:1.55;
}

.type-state::after{
  content:"Explore farms →";
  margin-top:auto;
  padding-top:1.2rem;
  color:var(--state-color);
  font-size:.8rem;
  font-weight:600;
}

.type-states__directory{
  margin:1.5rem 0 0;
  color:var(--fleece-brown);
  text-align:center;
}

/* Conclusion */
.types-conclusion{
  max-width:58rem;
}

.types-conclusion h2{
  margin:.15rem 0 1.25rem;
  font-family:var(--font-display);
  font-size:clamp(1.75rem, 4vw, 2.5rem);
  line-height:1.15;
}

.types-conclusion__columns{
  columns:2 20rem;
  column-gap:3.5rem;
}

.types-conclusion__columns p{
  break-inside:avoid;
  color:var(--fleece-brown);
}

@media (max-width:62rem){
  .type-profile,
  .type-profile--reverse{
    grid-template-columns:4rem minmax(0, 1.08fr) minmax(17rem, .92fr);
    gap:1.5rem;
  }

  .type-profile--reverse{
    grid-template-columns:minmax(17rem, .92fr) minmax(0, 1.08fr) 4rem;
  }

  .type-profile__facts{
    grid-template-columns:1fr;
  }

  .overlap-paths{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .overlap-paths article:nth-child(3){
    border-left:none;
    border-top-width:4px;
  }

  .overlap-paths article:nth-child(3),
  .overlap-paths article:nth-child(4){
    border-top-style:solid;
  }
}

@media (max-width:50rem){
  .types-hero{
    grid-template-columns:1fr;
  }

  .types-hero__copy{
    max-width:44rem;
  }

  .type-profile,
  .type-profile--reverse{
    grid-template-columns:3.5rem minmax(0, 1fr);
    align-items:start;
  }

  .type-profile__label,
  .type-profile--reverse .type-profile__label{
    grid-column:1;
    grid-row:1 / span 2;
  }

  .type-profile__copy,
  .type-profile--reverse .type-profile__copy{
    grid-column:2;
    grid-row:1;
  }

  .type-profile__media,
  .type-profile--reverse .type-profile__media{
    grid-column:2;
    grid-row:2;
  }

  .type-profile__facts{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .listing-guide{
    grid-template-columns:1fr;
  }

  .type-states__grid{
    grid-template-columns:1fr;
  }

  .type-state{
    min-height:0;
  }
}

@media (max-width:42rem){
  .type-index__head{
    grid-template-columns:1fr;
  }

  .type-index__head > p:last-child{
    grid-column:1;
    grid-row:auto;
  }

  .type-index ul{
    grid-template-columns:1fr;
  }

  .overlap-paths{
    grid-template-columns:1fr;
  }

  .overlap-paths article + article,
  .overlap-paths article:nth-child(3){
    border-left:none;
  }
}

@media (max-width:35rem){
  .types-hero h1{
    font-size:2.6rem;
  }

  .type-profile,
  .type-profile--reverse{
    grid-template-columns:1fr;
  }

  .type-profile__label,
  .type-profile--reverse .type-profile__label{
    grid-column:1;
    grid-row:1;
    flex-direction:row;
    justify-content:flex-start;
    min-height:0;
    writing-mode:horizontal-tb;
    transform:none;
  }

  .type-profile__copy,
  .type-profile--reverse .type-profile__copy{
    grid-column:1;
    grid-row:2;
  }

  .type-profile__media,
  .type-profile--reverse .type-profile__media{
    grid-column:1;
    grid-row:3;
  }

  .type-profile__facts{
    grid-template-columns:1fr;
  }
}