/* ==========================================================================
   Alpaca Fiber vs Wool
   Page-specific stylesheet
   ========================================================================== */

:root{
  --wool-ink:#24211d;
  --wool-copy:#5e5952;
  --wool-muted:#8a837a;
  --wool-rule:#d8d2c8;
  --wool-soft:#f7f4ed;
  --wool-deep:#173f47;
  --wool-accent:#1f5c6b;
  --wool-display:"Fraunces",Georgia,"Times New Roman",serif;
  --wool-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wool-shell:80rem;
}

.wool-page{
  padding:0;
  background:#fff;
  color:var(--wool-ink);
  font-family:var(--wool-body);
}

.wool-shell{
  width:min(calc(100% - 3rem),var(--wool-shell));
  margin-inline:auto;
}

.wool-page img{width:100%;display:block}
.wool-page button{font:inherit}
.wool-page h1,.wool-page h2,.wool-page h3{color:var(--wool-ink)}
.wool-page a{color:var(--wool-accent)}

.wool-kicker,
.wool-number,
.wool-detail-label{
  margin:0;
  color:var(--wool-accent);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.wool-number{
  padding-top:.8rem;
  border-top:1px solid currentColor;
}

/* Hero */
.wool-hero{
  padding:clamp(3.5rem,6vw,6.5rem) 0 clamp(4.5rem,7vw,7rem);
  background:#fff;
}

.wool-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(3rem,6vw,6.5rem);
  align-items:center;
}

.wool-hero-copy{max-width:38rem}

.wool-hero h1{
  margin:.8rem 0 1.4rem;
  font-family:var(--wool-display);
  font-size:clamp(4.1rem,7.6vw,7.7rem);
  line-height:.88;
  letter-spacing:-.055em;
  font-weight:600;
}

.wool-lede{
  margin:0;
  font-size:clamp(1.08rem,1.4vw,1.24rem);
  line-height:1.72;
}

.wool-start{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  margin-top:1.6rem;
  font-weight:600;
  text-decoration:none;
}

.wool-start span{transition:transform .18s ease}
.wool-start:hover span{transform:translateY(.2rem)}

.wool-hero-media{
  margin:0;
  position:relative;
}

.wool-hero-media::after{
  content:"";
  position:absolute;
  left:-1rem;
  bottom:-1rem;
  width:32%;
  height:1px;
  background:var(--wool-accent);
}

/* Intro */
.wool-intro{
  padding:clamp(5rem,8vw,8rem) 0;
  background:var(--wool-soft);
}

.wool-intro-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}

.wool-intro h2,
.wool-section-head h2,
.wool-structure h2,
.wool-editorial h2,
.wool-next h2{
  margin:1rem 0 0;
  font-family:var(--wool-display);
  font-size:clamp(3rem,5.3vw,5.25rem);
  line-height:.97;
  letter-spacing:-.04em;
  font-weight:600;
}

.wool-intro-copy{
  max-width:43rem;
}

.wool-intro-copy p{
  margin:0 0 1rem;
  color:var(--wool-copy);
  line-height:1.78;
}

.wool-intro-copy p:first-child{color:var(--wool-ink)}

/* Shared sections */
.wool-section{
  padding:clamp(6rem,9vw,9rem) 0;
}

.wool-section:nth-of-type(even){background:#fff}

.wool-section-head{
  display:grid;
  grid-template-columns:.26fr 1fr;
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
  margin-bottom:clamp(3rem,5vw,5rem);
}

.wool-section-head>div{max-width:52rem}

.wool-section-head>div>p{
  max-width:42rem;
  margin:1rem 0 0;
  color:var(--wool-copy);
  line-height:1.72;
}

.wool-section-head-compact{
  margin-bottom:3rem;
}

/* Main comparison */
.wool-compare{
  background:#fff;
}

.wool-compare-explorer{
  border-top:1px solid var(--wool-ink);
}

.wool-trait-tabs{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-bottom:1px solid var(--wool-ink);
}

.wool-trait-tabs button{
  min-height:5.7rem;
  padding:1rem 1.1rem;
  border:0;
  border-right:1px solid var(--wool-rule);
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.wool-trait-tabs button:last-child{border-right:0}

.wool-trait-tabs span,
.wool-trait-tabs strong{
  display:block;
}

.wool-trait-tabs span{
  color:var(--wool-muted);
  font-size:.64rem;
  letter-spacing:.09em;
}

.wool-trait-tabs strong{
  margin-top:.25rem;
  font-family:var(--wool-display);
  font-size:1.3rem;
}

.wool-trait-tabs button.is-active{
  background:var(--wool-deep);
  color:#fff;
}

.wool-trait-tabs button.is-active span{color:#a8c7cc}

.wool-pair-stage{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.wool-pair-panel{
  min-width:0;
  padding:2rem 2rem 2.4rem;
}

.wool-pair-panel+ .wool-pair-panel{
  border-left:1px solid var(--wool-rule);
}

.wool-pair-label{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:baseline;
  margin-bottom:1.1rem;
}

.wool-pair-label span{
  color:var(--wool-accent);
  font-size:.67rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.wool-pair-label strong{
  font-family:var(--wool-display);
  font-size:1.25rem;
}

.wool-pair-panel figure{
  margin:0;
}

.wool-pair-panel img{
  aspect-ratio:3/2;
  object-fit:cover;
}

.wool-pair-panel>p{
  margin:1.2rem 0 0;
  color:var(--wool-copy);
  line-height:1.72;
}

.wool-compare-note{
  display:grid;
  grid-template-columns:.26fr 1fr;
  gap:clamp(1.5rem,4vw,4rem);
  padding:1.7rem 0 0;
  border-top:1px solid var(--wool-ink);
}

.wool-compare-note span{
  color:var(--wool-accent);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.wool-compare-note p{
  max-width:54rem;
  margin:0;
  font-family:var(--wool-display);
  font-size:clamp(1.45rem,2.5vw,2.15rem);
  line-height:1.35;
}

/* Structure */
.wool-structure{
  background:var(--wool-soft);
}

.wool-structure-grid{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:clamp(3rem,6vw,6rem);
  align-items:center;
}

.wool-structure-copy>p:not(.wool-number):not(.wool-detail-label){
  color:var(--wool-copy);
  line-height:1.72;
}

.wool-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:2rem;
  border-top:1px solid var(--wool-ink);
  border-bottom:1px solid var(--wool-ink);
}

.wool-switch button{
  min-height:3.5rem;
  border:0;
  border-right:1px solid var(--wool-rule);
  background:transparent;
  cursor:pointer;
}

.wool-switch button:last-child{border-right:0}
.wool-switch button.is-active{background:var(--wool-accent);color:#fff}

.wool-structure-detail{
  margin-top:1.6rem;
  padding-top:1.3rem;
  border-top:1px solid var(--wool-rule);
}

.wool-structure-detail p:last-child{
  margin:.65rem 0 0;
  font-family:var(--wool-display);
  font-size:clamp(1.3rem,2vw,1.75rem);
  line-height:1.42;
}

.wool-structure-media{
  margin:0;
}

.wool-structure-media img{
  aspect-ratio:3/2;
  object-fit:cover;
}

/* Lanolin */
.wool-lanolin{
  background:#fff;
}

.wool-lanolin-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--wool-ink);
  border-bottom:1px solid var(--wool-ink);
}

.wool-lanolin-grid article{
  min-width:0;
  padding:2rem 2rem 2.5rem 0;
}

.wool-lanolin-grid article+article{
  padding-left:2rem;
  padding-right:0;
  border-left:1px solid var(--wool-rule);
}

.wool-lanolin-grid figure{margin:0 0 1.5rem}
.wool-lanolin-grid img{aspect-ratio:3/2;object-fit:cover}

.wool-lanolin-grid h3{
  margin:.5rem 0 .65rem;
  font-family:var(--wool-display);
  font-size:clamp(1.65rem,2.5vw,2.25rem);
  line-height:1.15;
}

.wool-lanolin-grid article>p:last-child{
  max-width:34rem;
  margin:0;
  color:var(--wool-copy);
  line-height:1.72;
}

/* Editorial break */
.wool-editorial{
  padding:clamp(5.5rem,8vw,8rem) 0;
  background:var(--wool-deep);
  color:#fff;
}

.wool-editorial-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(2.5rem,6vw,6rem);
}

.wool-editorial .wool-number{
  max-width:12rem;
  color:#a8c7cc;
}

.wool-editorial h2{color:#fff}

.wool-editorial-grid>div:last-child{
  max-width:43rem;
}

.wool-editorial-grid>div:last-child p{
  margin:0 0 1rem;
  color:#d7e3e5;
  line-height:1.78;
}

/* Products */
.wool-products{
  background:#fff;
}

.wool-product-explorer{
  display:grid;
  grid-template-columns:.34fr 1.66fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:stretch;
}

.wool-product-rail{
  border-top:1px solid var(--wool-ink);
}

.wool-product-rail button{
  display:grid;
  grid-template-columns:2rem 1fr;
  gap:.6rem;
  width:100%;
  padding:1rem 0;
  border:0;
  border-bottom:1px solid var(--wool-rule);
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.wool-product-rail span{
  color:var(--wool-muted);
  font-size:.64rem;
}

.wool-product-rail strong{
  font-family:var(--wool-display);
  font-size:1.3rem;
}

.wool-product-rail button.is-active{
  color:var(--wool-accent);
}

.wool-product-stage{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:center;
}

.wool-product-stage figure{margin:0}
.wool-product-stage img{aspect-ratio:3/2;object-fit:cover}

.wool-product-copy h3{
  margin:.5rem 0 .8rem;
  font-family:var(--wool-display);
  font-size:clamp(1.65rem,2.7vw,2.45rem);
  line-height:1.14;
}

.wool-product-copy>p:not(.wool-detail-label){
  color:var(--wool-copy);
  line-height:1.72;
}

.wool-product-copy a{
  display:inline-flex;
  gap:.45rem;
  align-items:center;
  margin-top:1rem;
  font-weight:600;
  text-decoration:none;
}

.wool-product-copy a span{transition:transform .18s ease}
.wool-product-copy a:hover span{transform:translateX(.25rem)}

/* Raw pair */
.wool-raw-pair{
  background:var(--wool-soft);
}

.wool-raw-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,4rem);
}

.wool-raw-grid figure{margin:0}
.wool-raw-grid img{aspect-ratio:3/2;object-fit:cover}

.wool-raw-grid figcaption{
  display:grid;
  grid-template-columns:.3fr 1fr;
  gap:1rem;
  align-items:start;
  padding-top:1rem;
  border-top:1px solid var(--wool-ink);
}

.wool-raw-grid figcaption strong{
  font-family:var(--wool-display);
  font-size:1.25rem;
}

.wool-raw-grid figcaption span{
  color:var(--wool-copy);
  line-height:1.6;
}

/* Bottom spoke navigation */
.wool-next{
  padding:clamp(5rem,8vw,8rem) 0;
  background:#fff;
}

.wool-next .wool-number{max-width:12rem}

.wool-next-intro{
  max-width:44rem;
  margin:1rem 0 3rem;
  color:var(--wool-copy);
  line-height:1.72;
}

.wool-spoke-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--wool-ink);
  border-bottom:1px solid var(--wool-ink);
}

.wool-spoke-grid a{
  min-width:0;
  padding:1.2rem;
  color:var(--wool-ink);
  text-decoration:none;
  border-right:1px solid var(--wool-rule);
}

.wool-spoke-grid a:first-child{padding-left:0}
.wool-spoke-grid a:last-child{padding-right:0;border-right:0}

.wool-spoke-grid img{
  aspect-ratio:3/2;
  object-fit:cover;
  margin-bottom:1rem;
}

.wool-spoke-grid span,
.wool-spoke-grid strong{display:block}

.wool-spoke-grid span{
  color:var(--wool-muted);
  font-size:.65rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.wool-spoke-grid strong{
  margin-top:.25rem;
  font-family:var(--wool-display);
  font-size:1.35rem;
}

.wool-spoke-grid a:hover strong{color:var(--wool-accent)}

.wool-back{margin:2rem 0 0}
.wool-back a{font-weight:600;text-decoration:none}

@media (max-width:64rem){
  .wool-hero-grid,
  .wool-intro-grid,
  .wool-editorial-grid{
    grid-template-columns:1fr;
  }

  .wool-hero-copy,
  .wool-intro-copy{
    max-width:48rem;
  }

  .wool-structure-grid{
    grid-template-columns:.9fr 1.1fr;
  }

  .wool-product-explorer{
    grid-template-columns:.42fr 1.58fr;
  }

  .wool-product-stage{
    grid-template-columns:1fr;
  }

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

  .wool-spoke-grid a:nth-child(2){border-right:0}
  .wool-spoke-grid a:nth-child(-n+2){border-bottom:1px solid var(--wool-rule)}
  .wool-spoke-grid a:nth-child(3){padding-left:0}
}

@media (max-width:48rem){
  .wool-shell{width:min(calc(100% - 2rem),var(--wool-shell))}

  .wool-hero h1{
    font-size:clamp(3.7rem,17vw,5.6rem);
  }

  .wool-section-head{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .wool-section-head .wool-number{max-width:10rem}

  .wool-trait-tabs{
    grid-template-columns:repeat(2,1fr);
  }

  .wool-trait-tabs button{
    border-bottom:1px solid var(--wool-rule);
  }

  .wool-trait-tabs button:nth-child(2n){border-right:0}
  .wool-trait-tabs button:last-child{grid-column:1 / -1;border-bottom:0}

  .wool-pair-stage,
  .wool-lanolin-grid,
  .wool-structure-grid,
  .wool-raw-grid{
    grid-template-columns:1fr;
  }

  .wool-pair-panel{
    padding:1.5rem 0 2rem;
  }

  .wool-pair-panel+ .wool-pair-panel{
    border-left:0;
    border-top:1px solid var(--wool-rule);
  }

  .wool-compare-note{
    grid-template-columns:1fr;
    gap:.65rem;
  }

  .wool-lanolin-grid article,
  .wool-lanolin-grid article+article{
    padding:1.5rem 0 2rem;
    border-left:0;
  }

  .wool-lanolin-grid article+article{
    border-top:1px solid var(--wool-rule);
  }

  .wool-product-explorer{
    grid-template-columns:1fr;
  }

  .wool-product-rail{
    display:grid;
    grid-template-columns:repeat(2,1fr);
  }

  .wool-product-rail button:nth-child(odd){
    border-right:1px solid var(--wool-rule);
  }

  .wool-product-rail button:last-child{
    grid-column:1 / -1;
    border-right:0;
  }

  .wool-raw-grid figcaption{
    grid-template-columns:1fr;
    gap:.35rem;
  }

  .wool-spoke-grid{
    grid-template-columns:1fr;
  }

  .wool-spoke-grid a{
    padding:1rem 0;
    border-right:0;
    border-bottom:1px solid var(--wool-rule);
  }

  .wool-spoke-grid a:last-child{border-bottom:0}
}