/* ==========================================================================
   How Alpaca Fiber Is Made
   Page-specific stylesheet
   ========================================================================== */

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

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

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

.process-page img{display:block;width:100%}
.process-page button{font:inherit}
.process-page a{color:var(--process-accent)}

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

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

/* Hero */
.process-hero{
  padding:clamp(3.5rem,6vw,6rem) 0 clamp(4.5rem,7vw,7rem);
}

.process-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(3rem,6vw,6rem);
  align-items:center;
}

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

.process-hero h1{
  margin:.8rem 0 1.4rem;
  font-family:var(--process-display);
  font-size:clamp(4rem,7.4vw,7.5rem);
  line-height:.89;
  letter-spacing:-.055em;
  font-weight:600;
}

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

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

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

.process-hero-media{margin:0}
.process-hero-media img{aspect-ratio:3/2;object-fit:cover}

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

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

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

.process-intro-copy{max-width:43rem}

.process-intro-copy p,
.process-editorial-grid>div:last-child p{
  margin:0 0 1rem;
  color:var(--process-copy);
  line-height:1.78;
}

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

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

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

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

/* Process explorer */
.process-journey{background:#fff}

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

.process-step-rail{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  border-bottom:1px solid var(--process-ink);
}

.process-step-rail button{
  min-height:5.8rem;
  padding:1rem;
  border:0;
  border-right:1px solid var(--process-rule);
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.process-step-rail button:last-child{border-right:0}

.process-step-rail span,
.process-step-rail strong{display:block}

.process-step-rail span{
  color:var(--process-muted);
  font-size:.63rem;
  letter-spacing:.08em;
}

.process-step-rail strong{
  margin-top:.25rem;
  font-family:var(--process-display);
  font-size:1.15rem;
}

.process-step-rail button.is-active{
  background:var(--process-deep);
  color:#fff;
}

.process-step-rail button.is-active span{color:#a9c8cd}

.process-stage{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:center;
  padding:2rem 0;
}

.process-stage-media{margin:0}
.process-stage-media img{aspect-ratio:3/2;object-fit:cover}

.process-stage-copy h3{
  margin:.5rem 0 .8rem;
  font-family:var(--process-display);
  font-size:clamp(2rem,3vw,3rem);
  line-height:1.05;
}

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

.process-change,
.process-next-step{
  display:grid;
  grid-template-columns:.35fr 1fr;
  gap:1rem;
  padding-top:1rem;
  margin-top:1rem;
  border-top:1px solid var(--process-rule);
}

.process-change span,
.process-next-step span{
  color:var(--process-accent);
  font-size:.67rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.process-change p,
.process-next-step p{
  margin:0;
  color:var(--process-copy);
  line-height:1.6;
}

/* Three-form comparison */
.process-transform{
  background:var(--process-soft);
}

.process-transform-grid{
  display:grid;
  grid-template-columns:.76fr 1.24fr;
  gap:clamp(3rem,6vw,6rem);
  align-items:center;
}

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

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

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

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

.process-form-detail{
  margin-top:1.5rem;
  padding-top:1.2rem;
  border-top:1px solid var(--process-rule);
}

.process-form-detail p:last-child{
  margin:.6rem 0 0;
  font-family:var(--process-display);
  font-size:clamp(1.25rem,2vw,1.75rem);
  line-height:1.42;
}

.process-transform-media{margin:0}
.process-transform-media img{aspect-ratio:3/2;object-fit:cover}

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

.process-editorial .process-number{
  color:#a9c8cd;
  max-width:12rem;
}

.process-editorial h2{color:#fff}

.process-editorial-grid>div:last-child p{
  color:#d7e3e5;
}

.process-editorial a{color:#fff}

/* Finish sequence */
.process-finish{background:#fff}

.process-finish-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--process-ink);
  border-bottom:1px solid var(--process-ink);
}

.process-finish-grid figure{
  margin:0;
  padding:1.3rem;
  border-right:1px solid var(--process-rule);
}

.process-finish-grid figure:first-child{padding-left:0}
.process-finish-grid figure:last-child{padding-right:0;border-right:0}

.process-finish-grid img{
  aspect-ratio:3/2;
  object-fit:cover;
}

.process-finish-grid figcaption{
  padding-top:1rem;
}

.process-finish-grid figcaption span{
  color:var(--process-accent);
  font-size:.66rem;
  letter-spacing:.09em;
}

.process-finish-grid figcaption strong{
  display:block;
  margin:.25rem 0 .45rem;
  font-family:var(--process-display);
  font-size:1.4rem;
}

.process-finish-grid figcaption p{
  margin:0;
  color:var(--process-copy);
  line-height:1.6;
}

/* Bottom navigation */
.process-next{
  padding:clamp(5rem,8vw,8rem) 0;
  background:var(--process-soft);
}

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

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

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

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

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

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

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

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

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

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

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

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

  .process-step-rail{
    grid-template-columns:repeat(4,1fr);
  }

  .process-step-rail button:nth-child(4){border-right:0}
  .process-step-rail button:nth-child(-n+4){border-bottom:1px solid var(--process-rule)}

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

  .process-transform-grid{
    grid-template-columns:.9fr 1.1fr;
  }

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

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

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

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

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

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

  .process-step-rail{
    grid-template-columns:repeat(2,1fr);
  }

  .process-step-rail button{
    border-bottom:1px solid var(--process-rule);
  }

  .process-step-rail button:nth-child(odd){border-right:1px solid var(--process-rule)}
  .process-step-rail button:nth-child(even){border-right:0}
  .process-step-rail button:last-child{
    grid-column:1 / -1;
    border-right:0;
    border-bottom:0;
  }

  .process-transform-grid,
  .process-finish-grid{
    grid-template-columns:1fr;
  }

  .process-change,
  .process-next-step{
    grid-template-columns:1fr;
    gap:.35rem;
  }

  .process-finish-grid figure,
  .process-finish-grid figure:first-child,
  .process-finish-grid figure:last-child{
    padding:1.2rem 0;
    border-right:0;
    border-bottom:1px solid var(--process-rule);
  }

  .process-finish-grid figure:last-child{border-bottom:0}

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

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

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