/* Alpaca Fiber Uses — page-specific stylesheet */

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

.uses-page{color:var(--uses-ink);font-family:var(--uses-body);background:#fff}
.uses-shell{width:min(calc(100% - 3rem),var(--uses-shell));margin-inline:auto}
.uses-page img{display:block;width:100%}
.uses-page button{font:inherit}
.uses-page a{color:var(--uses-accent)}

.uses-kicker,.uses-number,.uses-detail-label{
  margin:0;color:var(--uses-accent);font-size:.7rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase
}
.uses-number{padding-top:.8rem;border-top:1px solid currentColor}

.uses-hero{padding:clamp(3.5rem,6vw,6rem) 0 clamp(4.5rem,7vw,7rem)}
.uses-hero-grid{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(3rem,6vw,6rem);align-items:center
}
.uses-hero-copy{max-width:38rem}
.uses-hero h1{
  margin:.8rem 0 1.4rem;font-family:var(--uses-display);
  font-size:clamp(4rem,7.4vw,7.5rem);line-height:.89;
  letter-spacing:-.055em;font-weight:600
}
.uses-lede{margin:0;font-size:clamp(1.08rem,1.4vw,1.24rem);line-height:1.72}
.uses-start{display:inline-flex;gap:.5rem;align-items:center;margin-top:1.6rem;font-weight:600;text-decoration:none}
.uses-start span{transition:transform .18s ease}
.uses-start:hover span{transform:translateY(.2rem)}
.uses-hero-media{margin:0}
.uses-hero-media img{aspect-ratio:3/2;object-fit:cover}

.uses-intro{padding:clamp(5rem,8vw,8rem) 0;background:var(--uses-soft)}
.uses-intro-grid,.uses-editorial-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(2.5rem,6vw,6rem);align-items:start
}
.uses-intro h2,.uses-section-head h2,.uses-blanket h2,.uses-editorial h2,.uses-practical h2,.uses-next h2{
  margin:1rem 0 0;font-family:var(--uses-display);
  font-size:clamp(3rem,5.2vw,5.2rem);line-height:.97;
  letter-spacing:-.04em;font-weight:600
}
.uses-intro-copy{max-width:43rem}
.uses-intro-copy p,.uses-editorial-grid>div:last-child p{
  margin:0 0 1rem;color:var(--uses-copy);line-height:1.78
}

.uses-section{padding:clamp(6rem,9vw,9rem) 0}
.uses-section-head{
  display:grid;grid-template-columns:.26fr 1fr;
  gap:clamp(1.5rem,4vw,4rem);align-items:start;
  margin-bottom:clamp(3rem,5vw,5rem)
}
.uses-section-head>div{max-width:52rem}
.uses-section-head>div>p{
  margin:1rem 0 0;max-width:42rem;color:var(--uses-copy);line-height:1.72
}
.uses-section-head-compact{margin-bottom:3rem}

.uses-explorer-section{background:#fff}
.uses-explorer{border-top:1px solid var(--uses-ink);border-bottom:1px solid var(--uses-ink)}
.uses-category-rail{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--uses-ink)
}
.uses-category-rail button{
  min-height:5.4rem;padding:1rem;border:0;border-right:1px solid var(--uses-rule);
  background:transparent;text-align:left;cursor:pointer
}
.uses-category-rail button:last-child{border-right:0}
.uses-category-rail span,.uses-category-rail strong{display:block}
.uses-category-rail span{color:var(--uses-muted);font-size:.63rem;letter-spacing:.08em}
.uses-category-rail strong{margin-top:.2rem;font-family:var(--uses-display);font-size:1.25rem}
.uses-category-rail button.is-active{background:var(--uses-deep);color:#fff}
.uses-category-rail button.is-active span{color:#a9c8cd}

.uses-category-stage{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(2rem,4vw,4rem);align-items:center;padding:2rem 0
}
.uses-category-image{margin:0}
.uses-category-image img{aspect-ratio:3/2;object-fit:cover}
.uses-category-copy h3{
  margin:.5rem 0 .8rem;font-family:var(--uses-display);
  font-size:clamp(2rem,3vw,3rem);line-height:1.05
}
.uses-category-copy>p:not(.uses-detail-label){color:var(--uses-copy);line-height:1.72}

.uses-clothing{background:var(--uses-soft)}
.uses-product-explorer{border-top:1px solid var(--uses-ink);border-bottom:1px solid var(--uses-ink)}
.uses-product-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--uses-ink)}
.uses-product-tabs button{
  min-height:3.8rem;border:0;border-right:1px solid var(--uses-rule);
  background:transparent;cursor:pointer;font-weight:600
}
.uses-product-tabs button:last-child{border-right:0}
.uses-product-tabs button.is-active{background:var(--uses-accent);color:#fff}
.uses-product-stage{
  display:grid;grid-template-columns:1.2fr .8fr;
  gap:clamp(2rem,4vw,4rem);align-items:center;padding:2rem 0
}
.uses-product-stage figure{margin:0}
.uses-product-stage img{aspect-ratio:3/2;object-fit:cover}
.uses-product-copy h3{
  margin:.5rem 0 .8rem;font-family:var(--uses-display);
  font-size:clamp(1.9rem,2.8vw,2.7rem);line-height:1.1
}
.uses-product-copy>p:not(.uses-detail-label){color:var(--uses-copy);line-height:1.72}
.uses-product-copy a,.uses-blanket-copy a{
  display:inline-flex;gap:.45rem;align-items:center;margin-top:1rem;
  font-weight:600;text-decoration:none
}
.uses-product-copy a span,.uses-blanket-copy a span{transition:transform .18s ease}
.uses-product-copy a:hover span,.uses-blanket-copy a:hover span{transform:translateX(.25rem)}
.uses-clothing-overview{margin:1.6rem 0 0;color:var(--uses-copy)}

.uses-blanket{background:#fff}
.uses-blanket-grid{
  display:grid;grid-template-columns:1.2fr .8fr;
  gap:clamp(3rem,6vw,6rem);align-items:center
}
.uses-blanket-media{margin:0}
.uses-blanket-media img{aspect-ratio:3/2;object-fit:cover}
.uses-blanket-copy>p:not(.uses-number){color:var(--uses-copy);line-height:1.72}

.uses-editorial{
  padding:clamp(5.5rem,8vw,8rem) 0;background:var(--uses-deep);color:#fff
}
.uses-editorial .uses-number{color:#a9c8cd;max-width:12rem}
.uses-editorial h2{color:#fff}
.uses-editorial-grid>div:last-child p{color:#d7e3e5}
.uses-editorial a{color:#fff}

.uses-arts{background:#fff}
.uses-arts-grid{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--uses-ink);border-bottom:1px solid var(--uses-ink)
}
.uses-arts-grid article{padding:2rem 2rem 2.4rem 0}
.uses-arts-grid article+article{
  padding-left:2rem;padding-right:0;border-left:1px solid var(--uses-rule)
}
.uses-arts-grid figure{margin:0 0 1.4rem}
.uses-arts-grid img{aspect-ratio:3/2;object-fit:cover}
.uses-arts-grid h3{
  margin:.5rem 0 .7rem;font-family:var(--uses-display);
  font-size:clamp(1.65rem,2.5vw,2.25rem);line-height:1.15
}
.uses-arts-grid article>p:last-child{color:var(--uses-copy);line-height:1.68;margin:0}

.uses-practical{background:var(--uses-soft)}
.uses-practical-grid{
  display:grid;grid-template-columns:.78fr 1.22fr;
  gap:clamp(3rem,6vw,6rem);align-items:center
}
.uses-practical-copy>p:not(.uses-number){color:var(--uses-copy);line-height:1.72}
.uses-practical-media{margin:0}
.uses-practical-media img{aspect-ratio:3/2;object-fit:cover}

.uses-category-strip{background:#fff}
.uses-category-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--uses-ink);border-bottom:1px solid var(--uses-ink)
}
.uses-category-grid figure{margin:0;padding:1.1rem;border-right:1px solid var(--uses-rule)}
.uses-category-grid figure:first-child{padding-left:0}
.uses-category-grid figure:last-child{padding-right:0;border-right:0}
.uses-category-grid img{aspect-ratio:3/2;object-fit:cover;margin-bottom:1rem}
.uses-category-grid figcaption strong,.uses-category-grid figcaption span{display:block}
.uses-category-grid figcaption strong{font-family:var(--uses-display);font-size:1.3rem}
.uses-category-grid figcaption span{
  margin-top:.2rem;color:var(--uses-muted);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase
}

.uses-next{padding:clamp(5rem,8vw,8rem) 0;background:var(--uses-soft)}
.uses-next .uses-number{max-width:12rem}
.uses-next-intro{max-width:44rem;margin:1rem 0 3rem;color:var(--uses-copy);line-height:1.72}
.uses-spoke-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--uses-ink);border-bottom:1px solid var(--uses-ink)
}
.uses-spoke-grid a{
  min-width:0;padding:1.2rem;color:var(--uses-ink);
  text-decoration:none;border-right:1px solid var(--uses-rule)
}
.uses-spoke-grid a:first-child{padding-left:0}
.uses-spoke-grid a:last-child{padding-right:0;border-right:0}
.uses-spoke-grid img{aspect-ratio:3/2;object-fit:cover;margin-bottom:1rem}
.uses-spoke-grid span,.uses-spoke-grid strong{display:block}
.uses-spoke-grid span{
  color:var(--uses-muted);font-size:.65rem;
  letter-spacing:.09em;text-transform:uppercase
}
.uses-spoke-grid strong{margin-top:.25rem;font-family:var(--uses-display);font-size:1.35rem}
.uses-spoke-grid a:hover strong{color:var(--uses-accent)}
.uses-back{margin:2rem 0 0}
.uses-back a{font-weight:600;text-decoration:none}

@media (max-width:64rem){
  .uses-hero-grid,.uses-intro-grid,.uses-editorial-grid{grid-template-columns:1fr}
  .uses-category-stage,.uses-product-stage{grid-template-columns:1fr}
  .uses-blanket-grid,.uses-practical-grid{grid-template-columns:.9fr 1.1fr}
  .uses-category-grid,.uses-spoke-grid{grid-template-columns:repeat(2,1fr)}
  .uses-category-grid figure:nth-child(2),.uses-spoke-grid a:nth-child(2){border-right:0}
  .uses-category-grid figure:nth-child(-n+2),.uses-spoke-grid a:nth-child(-n+2){border-bottom:1px solid var(--uses-rule)}
  .uses-category-grid figure:nth-child(3),.uses-spoke-grid a:nth-child(3){padding-left:0}
}

@media (max-width:48rem){
  .uses-shell{width:min(calc(100% - 2rem),var(--uses-shell))}
  .uses-hero h1{font-size:clamp(3.7rem,17vw,5.6rem)}
  .uses-section-head{grid-template-columns:1fr;gap:1rem}
  .uses-section-head .uses-number{max-width:10rem}
  .uses-category-rail,.uses-product-tabs{grid-template-columns:repeat(2,1fr)}
  .uses-category-rail button,.uses-product-tabs button{border-bottom:1px solid var(--uses-rule)}
  .uses-category-rail button:nth-child(2n),.uses-product-tabs button:nth-child(2n){border-right:0}
  .uses-product-tabs button:last-child{grid-column:1 / -1;border-right:0;border-bottom:0}
  .uses-blanket-grid,.uses-arts-grid,.uses-practical-grid{grid-template-columns:1fr}
  .uses-arts-grid article,.uses-arts-grid article+article{padding:1.5rem 0 2rem;border-left:0}
  .uses-arts-grid article+article{border-top:1px solid var(--uses-rule)}
  .uses-category-grid,.uses-spoke-grid{grid-template-columns:1fr}
  .uses-category-grid figure,.uses-category-grid figure:first-child,.uses-category-grid figure:last-child,.uses-spoke-grid a{
    padding:1rem 0;border-right:0;border-bottom:1px solid var(--uses-rule)
  }
  .uses-category-grid figure:last-child,.uses-spoke-grid a:last-child{border-bottom:0}
}