/* Alpaca Fiber Colors — page-specific stylesheet */
:root{
  --colors-ink:#24211d;
  --colors-copy:#5f5a53;
  --colors-muted:#8b847b;
  --colors-rule:#d8d1c7;
  --colors-soft:#f6f2e9;
  --colors-deep:#173f47;
  --colors-accent:#1f5c6b;
  --colors-display:"Fraunces",Georgia,"Times New Roman",serif;
  --colors-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --colors-shell:80rem;
}
.colors-page{color:var(--colors-ink);font-family:var(--colors-body);background:#fff}
.colors-shell{width:min(calc(100% - 3rem),var(--colors-shell));margin-inline:auto}
.colors-page img{display:block;width:100%}
.colors-page button{font:inherit}
.colors-page a{color:var(--colors-accent)}
.colors-kicker,.colors-number,.colors-detail-label{margin:0;color:var(--colors-accent);font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.colors-number{padding-top:.8rem;border-top:1px solid currentColor}
.colors-hero{padding:clamp(3.5rem,6vw,6rem) 0 clamp(4.5rem,7vw,7rem)}
.colors-hero-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(3rem,6vw,6rem);align-items:center}
.colors-hero-copy{max-width:38rem}
.colors-hero h1{margin:.8rem 0 1.4rem;font-family:var(--colors-display);font-size:clamp(4.2rem,7.6vw,7.8rem);line-height:.88;letter-spacing:-.055em;font-weight:600}
.colors-lede{margin:0;font-size:clamp(1.08rem,1.4vw,1.24rem);line-height:1.72}
.colors-start{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;font-weight:600;text-decoration:none}
.colors-start span{transition:transform .18s ease}.colors-start:hover span{transform:translateY(.2rem)}
.colors-hero-media{margin:0}.colors-hero-media img{aspect-ratio:3/2;object-fit:cover}
.colors-intro{padding:clamp(5rem,8vw,8rem) 0;background:var(--colors-soft)}
.colors-intro-grid,.colors-editorial-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.colors-intro h2,.colors-section-head h2,.colors-living h2,.colors-editorial h2,.colors-variation h2,.colors-yarn h2,.colors-next h2{margin:1rem 0 0;font-family:var(--colors-display);font-size:clamp(3rem,5.2vw,5.2rem);line-height:.97;letter-spacing:-.04em;font-weight:600}
.colors-intro-copy{max-width:43rem}
.colors-intro-copy p,.colors-editorial-grid>div:last-child p{margin:0 0 1rem;color:var(--colors-copy);line-height:1.78}
.colors-section{padding:clamp(6rem,9vw,9rem) 0}
.colors-section-head{display:grid;grid-template-columns:.26fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:start;margin-bottom:clamp(3rem,5vw,5rem)}
.colors-section-head>div{max-width:52rem}
.colors-section-head>div>p{margin:1rem 0 0;max-width:42rem;color:var(--colors-copy);line-height:1.72}
.colors-section-head-compact{margin-bottom:3rem}
.colors-explorer-section{background:#fff}
.colors-explorer{border-top:1px solid var(--colors-ink);border-bottom:1px solid var(--colors-ink)}
.colors-family-row{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--colors-ink)}
.colors-family-row button{min-height:3.9rem;border:0;border-right:1px solid var(--colors-rule);background:transparent;cursor:pointer;font-weight:600}
.colors-family-row button:last-child{border-right:0}
.colors-family-row button.is-active{background:var(--colors-deep);color:#fff}
.colors-explorer-stage{display:grid;grid-template-columns:.3fr 1.15fr .55fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;padding:2rem 0}
.colors-shade-rail{border-top:1px solid var(--colors-rule)}
.colors-shade-rail button{display:grid;grid-template-columns:1.2rem 1fr;gap:.75rem;align-items:center;width:100%;padding:.95rem 0;border:0;border-bottom:1px solid var(--colors-rule);background:transparent;text-align:left;cursor:pointer}
.colors-shade-rail button.is-active strong{color:var(--colors-accent)}
.colors-dot{width:.9rem;height:.9rem;border-radius:50%;border:1px solid rgba(36,33,29,.35)}
.colors-dot-white{background:#f7f5ef}.colors-dot-cream{background:#eee4cb}.colors-dot-light-fawn{background:#d9bd8d}.colors-dot-medium-fawn{background:#bd9361}.colors-dot-dark-fawn{background:#a87d4f}.colors-dot-light-brown{background:#9a714d}.colors-dot-medium-brown{background:#765238}.colors-dot-dark-brown{background:#4e3528}.colors-dot-black{background:#211f1d}.colors-dot-silver-gray{background:#8d8c88}.colors-dot-rose-gray{background:#8a746a}
.colors-main-image{margin:0}.colors-main-image img{aspect-ratio:3/2;object-fit:cover}
.colors-main-copy h3{margin:.5rem 0 .8rem;font-family:var(--colors-display);font-size:clamp(2.1rem,3vw,3rem);line-height:1.05}
.colors-main-copy>p:not(.colors-detail-label){color:var(--colors-copy);line-height:1.72}
.colors-position{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--colors-rule)}
.colors-position span{display:block;color:var(--colors-accent);font-size:.67rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.colors-position p{margin:.5rem 0 0;color:var(--colors-copy);line-height:1.6}
.colors-living{background:var(--colors-soft)}
.colors-living-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(3rem,6vw,6rem);align-items:center}
.colors-living-copy>p:not(.colors-number){color:var(--colors-copy);line-height:1.72}
.colors-living-media{margin:0}.colors-living-media img{aspect-ratio:3/2;object-fit:cover}
.colors-editorial{padding:clamp(5.5rem,8vw,8rem) 0;background:var(--colors-deep);color:#fff}
.colors-editorial .colors-number{color:#a9c8cd;max-width:12rem}
.colors-editorial h2{color:#fff}.colors-editorial-grid>div:last-child p{color:#d7e3e5}.colors-editorial a{color:#fff}
.colors-variation{background:#fff}
.colors-variation-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:clamp(3rem,6vw,6rem);align-items:center}
.colors-variation figure{margin:0}.colors-variation figure img{aspect-ratio:3/2;object-fit:cover}
.colors-variation-grid>div>p:last-child{color:var(--colors-copy);line-height:1.72}
.colors-gray{background:var(--colors-soft)}
.colors-gray-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(3rem,6vw,6rem);align-items:center}
.colors-gray-grid figure{margin:0}.colors-gray-grid figure img{aspect-ratio:3/2;object-fit:cover}
.colors-gray-copy{border-top:1px solid var(--colors-ink)}
.colors-gray-copy>div{padding:1.5rem 0;border-bottom:1px solid var(--colors-rule)}
.colors-gray-copy h3{margin:.5rem 0 .6rem;font-family:var(--colors-display);font-size:clamp(1.6rem,2.5vw,2.2rem);line-height:1.15}
.colors-gray-copy p:last-child{margin:0;color:var(--colors-copy);line-height:1.65}
.colors-yarn{background:#fff}
.colors-yarn-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(3rem,6vw,6rem);align-items:center}
.colors-yarn-copy>p:not(.colors-number){color:var(--colors-copy);line-height:1.72}
.colors-yarn-media{margin:0}.colors-yarn-media img{aspect-ratio:3/2;object-fit:cover}
.colors-next{padding:clamp(5rem,8vw,8rem) 0;background:var(--colors-soft)}
.colors-next .colors-number{max-width:12rem}
.colors-next-intro{max-width:44rem;margin:1rem 0 3rem;color:var(--colors-copy);line-height:1.72}
.colors-spoke-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--colors-ink);border-bottom:1px solid var(--colors-ink)}
.colors-spoke-grid a{min-width:0;padding:1.2rem;color:var(--colors-ink);text-decoration:none;border-right:1px solid var(--colors-rule)}
.colors-spoke-grid a:first-child{padding-left:0}.colors-spoke-grid a:last-child{padding-right:0;border-right:0}
.colors-spoke-grid img{aspect-ratio:3/2;object-fit:cover;margin-bottom:1rem}
.colors-spoke-grid span,.colors-spoke-grid strong{display:block}
.colors-spoke-grid span{color:var(--colors-muted);font-size:.65rem;letter-spacing:.09em;text-transform:uppercase}
.colors-spoke-grid strong{margin-top:.25rem;font-family:var(--colors-display);font-size:1.35rem}
.colors-spoke-grid a:hover strong{color:var(--colors-accent)}
.colors-back{margin:2rem 0 0}.colors-back a{font-weight:600;text-decoration:none}
@media (max-width:64rem){
  .colors-hero-grid,.colors-intro-grid,.colors-editorial-grid{grid-template-columns:1fr}
  .colors-explorer-stage{grid-template-columns:.34fr 1.66fr}
  .colors-main-copy{grid-column:1 / -1;max-width:46rem}
  .colors-living-grid,.colors-yarn-grid{grid-template-columns:.9fr 1.1fr}
  .colors-spoke-grid{grid-template-columns:repeat(2,1fr)}
  .colors-spoke-grid a:nth-child(2){border-right:0}
  .colors-spoke-grid a:nth-child(-n+2){border-bottom:1px solid var(--colors-rule)}
  .colors-spoke-grid a:nth-child(3){padding-left:0}
}
@media (max-width:48rem){
  .colors-shell{width:min(calc(100% - 2rem),var(--colors-shell))}
  .colors-hero h1{font-size:clamp(3.7rem,17vw,5.6rem)}
  .colors-section-head{grid-template-columns:1fr;gap:1rem}
  .colors-section-head .colors-number{max-width:10rem}
  .colors-family-row{grid-template-columns:repeat(2,1fr)}
  .colors-family-row button{border-bottom:1px solid var(--colors-rule)}
  .colors-family-row button:nth-child(2n){border-right:0}
  .colors-family-row button:last-child{grid-column:1 / -1;border-right:0;border-bottom:0}
  .colors-explorer-stage{grid-template-columns:1fr}
  .colors-shade-rail{display:grid;grid-template-columns:repeat(2,1fr)}
  .colors-shade-rail button:nth-child(odd){border-right:1px solid var(--colors-rule)}
  .colors-main-copy{grid-column:auto}
  .colors-living-grid,.colors-variation-grid,.colors-gray-grid,.colors-yarn-grid{grid-template-columns:1fr}
  .colors-spoke-grid{grid-template-columns:1fr}
  .colors-spoke-grid a{padding:1rem 0;border-right:0;border-bottom:1px solid var(--colors-rule)}
  .colors-spoke-grid a:last-child{border-bottom:0}
}