/* The shop front: the live square instrument as hero, then the range. */
.shop-stage { width: min(100%, 720px); margin: clamp(2.4rem, 5vw, 4rem) auto 0; }
.shop-caption { margin: 1rem 0 0; color: var(--ivory-dim); font-size: .78rem; line-height: 1.6; text-align: center; }

.range { padding: clamp(4rem, 8vw, 7rem) 0 clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(240, 197, 106, .12); }
.range .eyebrow { text-align: center; }
.range-title { max-width: 22ch; margin: 0 auto clamp(2.4rem, 5vw, 3.6rem); font-family: var(--font-serif); font-size: clamp(1.8rem, 3.4vw, 2.9rem); font-weight: 400; line-height: 1.15; text-align: center; color: var(--ivory); }
.range-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.range-item a { display: flex; flex-direction: column; height: 100%; padding: 1.1rem 1.1rem 1.6rem; border: 1px solid rgba(240, 197, 106, .14); background: rgba(6, 14, 40, .45); color: inherit; text-decoration: none; transition: border-color .2s, background .2s; }
.range-item a:hover { border-color: var(--gold-border); background: rgba(215, 184, 120, .04); }
.range-item a:focus-visible { outline: 2px solid var(--gold-primary); outline-offset: 3px; }
.range-pic { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 1.4rem; overflow: hidden; background: #05070d; }
.range-pic img { display: block; }
.range-pic-square img { width: 70%; height: auto; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 0 1px rgba(240, 197, 106, .25); }
.range-pic-wide img { width: 100%; height: 100%; object-fit: cover; }
.range-pic-round img { width: 70%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.range-item .section-eyebrow { font-size: .6rem; letter-spacing: .22em; margin-bottom: .7rem; text-align: left; }
.range-name { font-family: var(--font-serif); font-size: 1.45rem; line-height: 1.25; color: var(--ivory); margin-bottom: .6rem; }
.range-text { flex: 1; font-size: .86rem; line-height: 1.7; color: var(--ivory-muted); font-weight: 300; }
.range-go { margin-top: 1.2rem; font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-primary); }
.range-item a:hover .range-go { color: var(--gold-light); }

@media (max-width: 860px) {
  .range-row { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

/* /instruments/ */
.inst-page { padding: clamp(2.6rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }
.inst-intro { max-width: 760px; margin: 0 auto clamp(3rem, 6vw, 5rem); text-align: center; }
.inst-intro h1 { margin: 0; font-family: var(--font-serif); font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 400; line-height: 1.08; color: var(--ivory); }
.inst-intro p { margin: 1.2rem auto 0; max-width: 620px; color: var(--ivory-muted); font-size: clamp(.94rem, 1.2vw, 1.05rem); font-weight: 300; line-height: 1.8; }
.inst { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid rgba(240, 197, 106, .12); scroll-margin-top: 5rem; }
.inst-media .sq-instrument { max-width: 620px; }
.inst-media img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px rgba(240, 197, 106, .2); }
.inst-media img.round { width: min(100%, 520px); margin: 0 auto; border-radius: 50%; box-shadow: none; }
.inst-media figcaption { margin-top: .8rem; color: var(--ivory-dim); font-size: .74rem; line-height: 1.6; text-align: center; }
.inst-copy h2 { margin: 0 0 1rem; font-family: var(--font-serif); font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 400; line-height: 1.12; color: var(--ivory); }
.inst-copy > p { margin: 0 0 1rem; color: var(--ivory-muted); font-size: .98rem; font-weight: 300; line-height: 1.8; }
.inst-status { display: inline-block; margin-bottom: 1.1rem; padding: .35rem .7rem; border: 1px solid rgba(240, 197, 106, .35); color: var(--gold-primary); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; }
.inst-facts { list-style: none; margin: 1.4rem 0 1.6rem; padding: 0; border-top: 1px solid rgba(240, 197, 106, .12); }
.inst-facts li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid rgba(240, 197, 106, .12); font-size: .88rem; line-height: 1.6; color: var(--ivory-muted); font-weight: 300; }
.inst-facts b { color: var(--gold-primary); font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding-top: .2rem; }
.inst-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.inst-flip .inst-media { order: 2; }

.register { max-width: 760px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 0 0; border-top: 1px solid rgba(240, 197, 106, .12); scroll-margin-top: 5rem; }
.register h2 { margin: 0 0 .8rem; font-family: var(--font-serif); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 400; color: var(--ivory); text-align: center; }
.register > p { margin: 0 auto 2rem; max-width: 600px; color: var(--ivory-muted); font-size: .95rem; font-weight: 300; line-height: 1.8; text-align: center; }

@media (max-width: 900px) {
  .inst { grid-template-columns: 1fr; }
  .inst-flip .inst-media { order: 0; }
  .inst-facts li { grid-template-columns: 1fr; gap: .2rem; }
}