/* ==========================================================================\n   Alpaca Fiber Grades\n   Page-specific styles only\n   ========================================================================== */

.fiber-grade-page{background:#fff}
.fiber-grade-page .grade-section{padding:clamp(5rem,8vw,8rem) 0}
.fiber-grade-page .grade-microns,.fiber-grade-page .grade-body,.fiber-grade-page .grade-uses{background:#fff}
.fiber-grade-page .grade-uniformity,.fiber-grade-page .grade-staple{background:var(--fiber-soft)}

/* Hero */
.grade-hero{padding:clamp(3rem,5vw,5.5rem) 0 clamp(3.5rem,6vw,5.5rem);background:#fff}
.grade-hero-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2.5rem,5vw,5.5rem);align-items:center}
.grade-hero h1{margin:.75rem 0 1.35rem;font-family:var(--fiber-display);font-size:clamp(4rem,7.7vw,7.5rem);line-height:.9;letter-spacing:-.055em}
.grade-hero-lede{max-width:37rem;margin:0;color:var(--fiber-copy);font-size:clamp(1.08rem,1.35vw,1.25rem);line-height:1.72}
.grade-start{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.6rem;color:var(--fiber-accent);font-weight:600;text-decoration:none}
.grade-start span{font-size:1.15rem}
.grade-hero-media{margin:0}
.grade-hero-media img{aspect-ratio:16/9;object-fit:cover}

/* Short editorial intro */
.grade-intro{padding:clamp(4rem,6vw,6rem) 0;border-top:1px solid var(--fiber-rule);border-bottom:1px solid var(--fiber-rule);background:var(--fiber-soft)}
.grade-intro-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.grade-intro .fiber-number{max-width:11rem;margin:0 0 1.1rem;padding-top:.7rem;border-top:1px solid currentColor}
.grade-intro h2{max-width:33rem;margin:0;font-family:var(--fiber-display);font-size:clamp(2.8rem,4.9vw,4.8rem);line-height:.98;letter-spacing:-.04em}
.grade-intro-copy{max-width:43rem}
.grade-intro-copy p{margin:0 0 1.05rem;color:var(--fiber-copy);line-height:1.78}
.grade-intro-copy p:first-child{color:var(--fiber-ink);font-size:1.05rem}

/* Section headings */
.grade-section-head{display:grid;grid-template-columns:.24fr 1.05fr .85fr;gap:clamp(1.5rem,4vw,4rem);align-items:start;margin-bottom:clamp(2.8rem,5vw,4.5rem)}
.grade-section-head .fiber-number{margin:0;padding-top:.7rem;border-top:1px solid currentColor}
.grade-section-head h2{margin:0;font-family:var(--fiber-display);font-size:clamp(2.8rem,5.1vw,5rem);line-height:.97;letter-spacing:-.04em}
.grade-section-head>p:last-child{max-width:30rem;margin:.35rem 0 0;color:var(--fiber-copy);line-height:1.72}
.grade-head-split{grid-template-columns:1.1fr .9fr}
.grade-head-split>div{display:grid;grid-template-columns:.24fr 1fr;gap:clamp(1.5rem,4vw,4rem)}
.grade-head-split>p{justify-self:end}

/* Micron explorer */
.grade-stage{position:relative;margin:0;overflow:hidden;background:#ede9e1}
.grade-stage img{aspect-ratio:3/2;object-fit:cover}
.grade-stage-readout{position:absolute;right:1.25rem;bottom:1rem;display:flex;align-items:flex-start;padding:.55rem .7rem;background:rgba(255,255,255,.9);backdrop-filter:blur(4px)}
.grade-stage-readout strong{font-family:var(--fiber-display);font-size:clamp(3.2rem,7vw,6rem);line-height:.78;letter-spacing:-.05em}
.grade-stage-readout span{margin-left:.2rem;color:var(--fiber-accent);font-weight:600}
.grade-choice-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--fiber-ink);border-bottom:1px solid var(--fiber-ink)}
.grade-choice-row button{min-height:6rem;padding:1rem;border:0;border-right:1px solid var(--fiber-rule);background:#fff;text-align:left;cursor:pointer}
.grade-choice-row button:last-child{border-right:0}
.grade-choice-row strong,.grade-choice-row span{display:block}
.grade-choice-row strong{font-family:var(--fiber-display);font-size:1.45rem}
.grade-choice-row span{margin-top:.25rem;color:var(--fiber-muted);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.grade-choice-row button.is-active{background:var(--fiber-accent);color:#fff}
.grade-choice-row button.is-active span{color:#d9e9eb}
.grade-reveal{display:grid;grid-template-columns:.24fr 1fr;gap:clamp(1.5rem,4vw,4rem);padding-top:1.7rem}
.grade-reveal p{margin:0}
.grade-reveal>p:last-child{max-width:48rem;font-family:var(--fiber-display);font-size:clamp(1.45rem,2.5vw,2.15rem);line-height:1.35}

/* Uniformity */
.uniformity-explorer{display:grid;grid-template-columns:.32fr 1.13fr .72fr;gap:clamp(1.5rem,3vw,3rem);align-items:stretch}
.uniformity-selector{border-top:1px solid var(--fiber-ink)}
.uniformity-selector button{display:block;width:100%;padding:1.15rem 0;border:0;border-bottom:1px solid var(--fiber-rule);background:transparent;text-align:left;cursor:pointer}
.uniformity-selector span,.uniformity-selector strong{display:block}
.uniformity-selector span{color:var(--fiber-muted);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase}
.uniformity-selector strong{margin-top:.2rem;font-family:var(--fiber-display);font-size:1.35rem}
.uniformity-selector button.is-active{color:var(--fiber-accent)}
.uniformity-media{margin:0}
.uniformity-media img{height:100%;aspect-ratio:3/2;object-fit:cover}
.uniformity-copy{align-self:end;padding-top:1.3rem;border-top:1px solid var(--fiber-ink)}
.uniformity-copy>p:not(.detail-label):not(.grade-mini-fact){font-family:var(--fiber-display);font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.4}
.grade-mini-fact{margin-top:1.5rem;color:var(--fiber-copy);font-size:.92rem;line-height:1.65}

/* Body-location explorer */
.body-explorer{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.body-map-wrap{position:relative}
.body-map-media{margin:0}
.body-map-media img{aspect-ratio:3/2;object-fit:cover}
.body-map-controls{position:absolute;inset:0}
.body-hotspot{position:absolute;min-width:7.2rem;padding:.65rem .8rem;border:1px solid rgba(255,255,255,.95);background:rgba(23,63,71,.9);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.12);cursor:pointer;text-align:left}
.body-hotspot::before{content:"";position:absolute;width:.7rem;height:.7rem;border:2px solid #fff;border-radius:50%;background:var(--fiber-accent)}
.body-hotspot span{font-size:.72rem;font-weight:600}
.body-hotspot-blanket{left:50%;top:39%}.body-hotspot-blanket::before{left:-1.1rem;top:50%;transform:translateY(-50%)}
.body-hotspot-neck{left:68%;top:18%}.body-hotspot-neck::before{left:-1.1rem;top:50%;transform:translateY(-50%)}
.body-hotspot-secondary{left:38%;top:73%}.body-hotspot-secondary::before{right:-1.1rem;top:50%;transform:translateY(-50%)}
.body-hotspot.is-active{background:#fff;color:var(--fiber-deep);border-color:var(--fiber-deep)}
.body-hotspot.is-active::before{background:var(--fiber-deep);border-color:#fff}
.body-detail{display:grid;gap:1.25rem}
.body-detail figure{margin:0}
.body-detail img{aspect-ratio:3/2;object-fit:cover}
.body-detail h3{margin:.4rem 0 .6rem;font-family:var(--fiber-display);font-size:clamp(1.55rem,2.4vw,2.2rem);line-height:1.15}
.body-detail p:last-child{color:var(--fiber-copy);line-height:1.72}

/* Staple length */
.staple-explorer{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(2rem,4vw,4rem);align-items:stretch}
.staple-media{margin:0}
.staple-media img{height:100%;aspect-ratio:3/2;object-fit:cover}
.staple-panel{display:flex;flex-direction:column;justify-content:space-between}
.staple-buttons{border-top:1px solid var(--fiber-ink)}
.staple-buttons button{display:grid;grid-template-columns:2rem 1fr;gap:.7rem;width:100%;padding:1rem 0;border:0;border-bottom:1px solid var(--fiber-rule);background:transparent;text-align:left;cursor:pointer}
.staple-buttons span{color:var(--fiber-muted);font-size:.64rem}
.staple-buttons strong{font-family:var(--fiber-display);font-size:1.35rem}
.staple-buttons button.is-active{color:var(--fiber-accent)}
.staple-copy{padding-top:1.3rem;border-top:1px solid var(--fiber-ink)}
.staple-copy>p:last-child{font-family:var(--fiber-display);font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.4}

/* Match fiber to use */
.grade-use-explorer{display:grid;gap:2rem}
.grade-use-buttons{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--fiber-ink);border-bottom:1px solid var(--fiber-ink)}
.grade-use-buttons button{padding:1rem;border:0;border-right:1px solid var(--fiber-rule);background:#fff;text-align:left;cursor:pointer}
.grade-use-buttons button:last-child{border-right:0}
.grade-use-buttons span,.grade-use-buttons strong{display:block}
.grade-use-buttons span{color:var(--fiber-muted);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase}
.grade-use-buttons strong{margin-top:.25rem;font-family:var(--fiber-display);font-size:1.35rem}
.grade-use-buttons button.is-active{background:var(--fiber-deep);color:#fff}
.grade-use-buttons button.is-active span{color:#a8c7cc}
.grade-use-stage{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.grade-use-stage figure{margin:0}
.grade-use-stage img{aspect-ratio:3/2;object-fit:cover}
.grade-use-detail h3{margin:.45rem 0 .7rem;font-family:var(--fiber-display);font-size:clamp(1.65rem,2.8vw,2.5rem);line-height:1.12}
.grade-use-detail>p:not(.detail-label){color:var(--fiber-copy);line-height:1.72}
.grade-priority{display:grid;gap:.55rem;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--fiber-rule)}
.grade-priority span{display:block;font-size:.84rem;font-weight:600;color:var(--fiber-deep)}

/* Closing quality note */
.grade-quality-note{padding:clamp(5rem,8vw,7.5rem) 0;background:var(--fiber-deep);color:#fff}
.grade-quality-note-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.grade-quality-note figure{margin:0}
.grade-quality-note img{aspect-ratio:3/2;object-fit:cover}
.grade-quality-note .fiber-number{max-width:12rem;color:#a8c7cc;border-top-color:#a8c7cc}
.grade-quality-note h2{margin:1rem 0 1.2rem;color:#fff;font-family:var(--fiber-display);font-size:clamp(2.8rem,5vw,4.8rem);line-height:.98;letter-spacing:-.04em}
.grade-quality-note p:not(.fiber-number){max-width:38rem;color:#d7e3e5;line-height:1.72}

/* One navigation area for the other spokes */
.grade-next{padding:clamp(5rem,8vw,8rem) 0;background:#fff}
.grade-next .fiber-number{max-width:12rem;border-top:1px solid currentColor}
.grade-next h2{max-width:52rem;margin:1rem 0 1rem;font-family:var(--fiber-display);font-size:clamp(3rem,5.4vw,5.2rem);line-height:.98;letter-spacing:-.04em}
.grade-next-intro{max-width:43rem;margin:0 0 3rem;color:var(--fiber-copy);line-height:1.72}
.grade-spoke-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--fiber-ink);border-bottom:1px solid var(--fiber-ink)}
.grade-spoke-grid a{min-width:0;padding:1.2rem;text-decoration:none;color:var(--fiber-ink);border-right:1px solid var(--fiber-rule)}
.grade-spoke-grid a:first-child{padding-left:0}
.grade-spoke-grid a:last-child{border-right:0;padding-right:0}
.grade-spoke-grid img{aspect-ratio:3/2;object-fit:cover;margin-bottom:1rem}
.grade-spoke-grid span,.grade-spoke-grid strong{display:block}
.grade-spoke-grid span{color:var(--fiber-muted);font-size:.65rem;letter-spacing:.09em;text-transform:uppercase}
.grade-spoke-grid strong{margin-top:.25rem;font-family:var(--fiber-display);font-size:1.35rem}
.grade-spoke-grid a:hover strong{color:var(--fiber-accent)}
.grade-back{margin:2rem 0 0}
.grade-back a{font-weight:600;text-decoration:none}

@media (max-width:64rem){
  .grade-hero-grid,.grade-intro-grid{grid-template-columns:1fr}
  .grade-hero-copy,.grade-intro-copy{max-width:48rem}
  .grade-section-head{grid-template-columns:.24fr 1fr}
  .grade-section-head>p:last-child{grid-column:2}
  .grade-head-split{grid-template-columns:1fr}
  .grade-head-split>p{justify-self:start;max-width:40rem}
  .grade-head-split>div{grid-template-columns:.24fr 1fr}
  .uniformity-explorer{grid-template-columns:.42fr 1fr}
  .uniformity-copy{grid-column:2}
  .body-explorer,.staple-explorer,.grade-use-stage,.grade-quality-note-grid{grid-template-columns:1fr 1fr}
  .grade-spoke-grid{grid-template-columns:repeat(2,1fr)}
  .grade-spoke-grid a:nth-child(2){border-right:0}
  .grade-spoke-grid a:nth-child(-n+2){border-bottom:1px solid var(--fiber-rule)}
  .grade-spoke-grid a:nth-child(3){padding-left:0}
}

@media (max-width:46rem){
  .grade-hero h1{font-size:clamp(3.7rem,17vw,5.6rem)}
  .grade-section-head,.grade-head-split>div{grid-template-columns:1fr;gap:1rem}
  .grade-section-head>p:last-child{grid-column:auto}
  .grade-section-head .fiber-number{max-width:10rem}
  .grade-choice-row{grid-template-columns:repeat(2,1fr)}
  .grade-choice-row button:nth-child(2){border-right:0}
  .grade-choice-row button:nth-child(-n+2){border-bottom:1px solid var(--fiber-rule)}
  .grade-reveal{grid-template-columns:1fr;gap:.65rem}
  .uniformity-explorer,.body-explorer,.staple-explorer,.grade-use-stage,.grade-quality-note-grid{grid-template-columns:1fr}
  .uniformity-selector{display:grid;grid-template-columns:1fr 1fr}
  .uniformity-selector button:first-child{border-right:1px solid var(--fiber-rule)}
  .uniformity-copy{grid-column:auto}
  .body-hotspot{min-width:auto;padding:.45rem .55rem}
  .body-hotspot span{font-size:.62rem}
  .body-hotspot-blanket{left:43%;top:38%}
  .body-hotspot-neck{left:63%;top:15%}
  .body-hotspot-secondary{left:25%;top:72%}
  .grade-use-buttons{grid-template-columns:repeat(2,1fr)}
  .grade-use-buttons button:nth-child(2){border-right:0}
  .grade-use-buttons button:nth-child(-n+2){border-bottom:1px solid var(--fiber-rule)}
  .grade-spoke-grid{grid-template-columns:1fr}
  .grade-spoke-grid a{padding:1rem 0;border-right:0;border-bottom:1px solid var(--fiber-rule)}
  .grade-spoke-grid a:last-child{border-bottom:0}
}