/* The Music Stem: the showroom design system (studio/showroom.mjs, redesign 2026-10-22).
   The owner's image: "a car shop with expensive cars nicely parked". Large real pictures on a quiet floor, gold only as
   trim, a short placard for each, and calm motion. Phone first (390), then 768 and 1100+.
   Everything is scoped under .sr so it never leaks into a page that does not use it. */

/* ---------- tokens ---------- */
.sr{
  --sr-paper:#f4f1e8;--sr-card:#fffdf8;--sr-ink:#142e30;--sr-dim:#45524f;--sr-faint:#6a7672;--sr-rule:rgba(20,46,48,.12);
  --sr-night:#0f2b2c;--sr-night2:#173f3f;--sr-cream:#fbf3df;--sr-gold:#b8863a;--sr-gold2:#d6a75a;--sr-gold-ink:#8a6420;
  --sr-serif:Georgia,"Times New Roman",serif;--sr-sans:Arial,"Helvetica Neue",sans-serif;
  /* spacing: one scale for every recipe */
  --sr-1:6px;--sr-2:10px;--sr-3:16px;--sr-4:24px;--sr-5:36px;--sr-6:56px;--sr-7:84px;
  --sr-gap:14px;--sr-pad:16px;--sr-r:20px;--sr-r-sm:14px;
  --sr-ease:cubic-bezier(.2,.7,.2,1);--sr-dur:.7s;
  /* the family's colors; each family sets these (data-tint) */
  --sr-c:#23584f;--sr-t:#e4ece8;--sr-t2:#d3e1db;--sr-on:#fff;
  --sr-lift:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -26px rgba(15,43,44,.55),0 2px 6px -3px rgba(15,43,44,.18);
  --sr-lift-hi:0 1px 0 rgba(255,255,255,.7) inset,0 30px 60px -28px rgba(15,43,44,.6),0 4px 12px -4px rgba(15,43,44,.22);
  color:var(--sr-ink);font:16px/1.55 var(--sr-sans)}
.sr *,.sr *::before,.sr *::after{box-sizing:border-box}
/* Family tints. Each pairs a deep accent (text on it reaches 7:1 or more in white) with a pale tint for its floor. */
.sr [data-tint=exam],.sr[data-tint=exam]{--sr-c:#22476b;--sr-t:#e6ecf3;--sr-t2:#d3deea}
.sr [data-tint=audition],.sr[data-tint=audition]{--sr-c:#5a3d6e;--sr-t:#efe8f1;--sr-t2:#e0d3e5}
.sr [data-tint=tools],.sr[data-tint=tools]{--sr-c:#173f3f;--sr-t:#e2ebe7;--sr-t2:#cfdeD8}
.sr [data-tint=western],.sr[data-tint=western]{--sr-c:#23584f;--sr-t:#e3ede9;--sr-t2:#cfe0d9}
.sr [data-tint=hindustani],.sr[data-tint=hindustani]{--sr-c:#8f4f1c;--sr-t:#f6ebdf;--sr-t2:#ecd8c3}
.sr [data-tint=jazz],.sr[data-tint=jazz]{--sr-c:#4b3f86;--sr-t:#ebe8f4;--sr-t2:#d9d4ea}
.sr [data-tint=work],.sr[data-tint=work]{--sr-c:#7a5418;--sr-t:#f6eedc;--sr-t2:#ecdfc2}
.sr [data-tint=path],.sr[data-tint=path]{--sr-c:#3a5f45;--sr-t:#e7eee6;--sr-t2:#d5e2d3}
.sr [data-tint=reg-us],.sr[data-tint=reg-us]{--sr-c:#22476b;--sr-t:#e6ecf3;--sr-t2:#d3deea}
.sr [data-tint=reg-eu],.sr[data-tint=reg-eu]{--sr-c:#2f5a43;--sr-t:#e7eee6;--sr-t2:#d5e2d3}
.sr [data-tint=reg-asia],.sr[data-tint=reg-asia]{--sr-c:#8f4f1c;--sr-t:#f6ebdf;--sr-t2:#ecd8c3}
.sr [data-tint=night],.sr[data-tint=night]{--sr-c:#0f2b2c;--sr-t:#173f3f;--sr-t2:#0c2324}

/* ---------- section and header ---------- */
.sr-sec{position:relative;margin:0 auto;max-width:1180px;padding:var(--sr-6) var(--sr-pad) 0}
.sr-sec+.sr-sec{padding-top:var(--sr-6)}
.sr-head{display:grid;gap:var(--sr-2);margin:0 0 var(--sr-4);max-width:42rem}
.sr-kick{display:flex;align-items:center;gap:10px;margin:0;font:700 11.5px/1 var(--sr-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--sr-gold-ink)}
.sr-kick::before{content:"";width:28px;height:1.5px;background:var(--sr-gold)}
.sr-head h2{margin:0;font:400 clamp(30px,7.6vw,46px)/1.06 var(--sr-serif);letter-spacing:-.018em;color:var(--sr-ink)}
.sr-head h2 em{font-style:italic;color:var(--sr-gold-ink)}
.sr-head p.sr-lead{margin:2px 0 0;font:400 17px/1.5 var(--sr-serif);color:var(--sr-dim)}
/* a section set on the night floor */
.sr-sec.sr-dark{max-width:none;margin-top:var(--sr-6);padding:var(--sr-6) 0;background:radial-gradient(70% 60% at 50% 0,rgba(214,167,90,.13),rgba(214,167,90,0) 70%),linear-gradient(180deg,#123435,#0c2324)}
.sr-sec.sr-dark>.sr-wrap{max-width:1180px;margin:0 auto;padding:0 var(--sr-pad)}
.sr-sec.sr-dark .sr-head h2{color:var(--sr-cream)}.sr-sec.sr-dark .sr-head h2 em{color:var(--sr-gold2)}
.sr-sec.sr-dark .sr-kick{color:var(--sr-gold2)}.sr-sec.sr-dark .sr-lead{color:rgba(243,238,224,.8)}

/* ---------- the picture: a real screenshot on a lit floor ---------- */
.sr-pic{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;border-radius:var(--sr-r-sm);background:var(--sr-t)}
.sr-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform 1.1s var(--sr-ease)}
/* the floor light: a soft pool of light at the top, so every picture sits in the same lighting */
.sr-pic::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 30%),linear-gradient(0deg,rgba(15,43,44,.10),rgba(15,43,44,0) 26%);
  box-shadow:inset 0 0 0 1px rgba(15,43,44,.08)}
/* staged: the screenshot floats on its family's floor, inset, with a shadow beneath (the car on the showroom floor) */
.sr-pic.sr-stage{padding:7% 7% 0;background:radial-gradient(80% 70% at 50% 0,rgba(255,255,255,.75),rgba(255,255,255,0) 70%),linear-gradient(180deg,var(--sr-t),var(--sr-t2))}
.sr-pic.sr-stage img{height:auto;aspect-ratio:16/10;border-radius:10px 10px 0 0;box-shadow:0 -1px 0 rgba(255,255,255,.6),0 24px 40px -18px rgba(15,43,44,.55),0 0 0 1px rgba(15,43,44,.10)}

/* ---------- tiles: shared ---------- */
.sr-tile{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--sr-r);text-decoration:none;color:var(--sr-ink);background:var(--sr-card);
  box-shadow:var(--sr-lift);transition:transform .35s var(--sr-ease),box-shadow .35s var(--sr-ease);-webkit-tap-highlight-color:transparent;outline-offset:4px}
.sr-tile:focus-visible{outline:2.5px solid var(--sr-gold)}
.sr-tile .sr-pic{border-radius:var(--sr-r) var(--sr-r) 0 0}
.sr-plac{display:grid;gap:5px;padding:14px 16px 16px;align-content:start}
/* the placard's family line: a short colored rule and the kicker */
.sr-plac .sr-fam{display:flex;align-items:center;gap:8px;margin:0;font:700 10.5px/1.2 var(--sr-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--sr-c)}
.sr-plac .sr-fam::before{content:"";flex:none;width:16px;height:3px;border-radius:2px;background:var(--sr-c)}
.sr-plac b{display:block;font:400 21px/1.18 var(--sr-serif);letter-spacing:-.01em;color:var(--sr-ink)}
.sr-plac span.sr-line{display:block;font:400 14.5px/1.45 var(--sr-sans);color:var(--sr-dim)}
.sr-go{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font:700 13.5px/1 var(--sr-sans);color:var(--sr-c)}
.sr-go i{font-style:normal;transition:transform .3s var(--sr-ease)}
@media (hover:hover){
  .sr-tile:hover{transform:translateY(-4px);box-shadow:var(--sr-lift-hi)}
  .sr-tile:hover .sr-pic img{transform:scale(1.025)}
  .sr-tile:hover .sr-go i{transform:translateX(4px)}}
.sr-tile:active{transform:translateY(-1px) scale(.992);transition-duration:.12s}

/* ---------- the flagship hero tile ---------- */
.sr-hero{background:var(--sr-night);color:var(--sr-cream);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(214,167,90,.35),0 30px 60px -32px rgba(8,26,27,.75)}
.sr-hero .sr-pic{border-radius:0;aspect-ratio:16/10;background:var(--sr-night2)}
.sr-hero .sr-pic::after{background:linear-gradient(0deg,rgba(12,35,36,.35) 0,rgba(12,35,36,0) 30%);box-shadow:none}
.sr-hero .sr-plac{padding:16px 18px 20px;position:relative;z-index:1;border-top:1px solid rgba(214,167,90,.28)}
.sr-hero .sr-plac .sr-fam{color:var(--sr-gold2)}.sr-hero .sr-plac .sr-fam::before{background:var(--sr-gold2)}
.sr-hero .sr-plac b{font-size:clamp(26px,6.6vw,38px);color:#fff6e2}
.sr-hero .sr-plac span.sr-line{color:rgba(243,238,224,.84);font-size:15.5px;max-width:34em}
.sr-hero .sr-go{color:#f1d48f}
/* chips inside a placard (e.g. the practice songs in the Editor tile); each is its own link */
.sr-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px;padding:0;list-style:none}
.sr-chips a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;font:600 13.5px/1.2 var(--sr-sans);text-decoration:none;
  color:var(--sr-ink);background:rgba(255,253,248,.92);border:1px solid var(--sr-rule);transition:background .2s,transform .2s var(--sr-ease)}
.sr-hero .sr-chips a{color:#fff6e2;background:rgba(255,255,255,.07);border-color:rgba(214,167,90,.4)}
.sr-chips a:hover{transform:translateY(-1px)}.sr-hero .sr-chips a:hover{background:rgba(214,167,90,.18)}
.sr-chips a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sr-gold2);box-shadow:0 0 0 3px rgba(214,167,90,.18)}

/* ---------- the feature tile: a large picture with a placard ---------- */
.sr-feat .sr-plac{border-top:3px solid var(--sr-c)}

/* ---------- the compact tile: a small picture beside a short placard ---------- */
.sr-cmp{flex-direction:column}
.sr-cmp .sr-pic{aspect-ratio:16/10}
.sr-cmp .sr-plac{padding:10px 12px 13px;gap:3px}
.sr-cmp .sr-plac b{font-size:17px}
.sr-cmp .sr-plac span.sr-line{font-size:13px;line-height:1.4}
.sr-cmp .sr-plac .sr-fam{font-size:9.5px;letter-spacing:.14em}

/* ---------- the group button: one beautiful thumbnail that opens a family of similar items ---------- */
.sr-grp{position:relative;border-radius:var(--sr-r);background:var(--sr-card);box-shadow:var(--sr-lift);overflow:hidden;transition:box-shadow .35s var(--sr-ease)}
.sr-grp-btn{all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-columns:1fr;width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--sr-ink)}
.sr-grp-btn:focus-visible{outline:2.5px solid var(--sr-gold);outline-offset:-3px;border-radius:var(--sr-r)}
.sr-grp-art{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,var(--sr-c),color-mix(in srgb,var(--sr-c) 70%,#000))}
.sr-grp-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:.9;transition:transform 1.1s var(--sr-ease),opacity .4s}
.sr-grp-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--sr-c) 88%,#000) 0,color-mix(in srgb,var(--sr-c) 20%,transparent) 60%,transparent)}
/* the fan: a few of the family's own tiles peek out of the thumbnail and spread when touched or opened */
.sr-fan{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-height:72px;overflow:hidden;padding:4px 2px 2px}
.sr-fan span{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;font:700 12px/1 var(--sr-sans);letter-spacing:.01em;color:#fff;
  background:color-mix(in srgb,var(--h,#fff) 78%,#000);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 6px 14px -8px rgba(0,0,0,.7);
  transform:translateY(calc(var(--k) * 2px)) rotate(calc((var(--k) - 2) * -1.2deg));transition:transform .5s var(--sr-ease);transition-delay:calc(var(--k) * 30ms)}
.sr-fan span svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr-grp-plac{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;padding:14px 16px 16px;border-top:3px solid var(--sr-c)}
.sr-grp-plac .sr-fam{grid-column:1/-1}
.sr-grp-plac b{font:400 22px/1.15 var(--sr-serif);letter-spacing:-.01em}
.sr-grp-plac .sr-line{grid-column:1;font:400 14.5px/1.45 var(--sr-sans);color:var(--sr-dim)}
.sr-grp-plac .sr-fam{display:flex;align-items:center;gap:8px;margin:0;font:700 10.5px/1.2 var(--sr-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--sr-c)}
.sr-grp-plac .sr-fam::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--sr-c)}
/* the open-and-close mark: a plus that turns into a minus */
.sr-tog{grid-column:2;grid-row:2/4;position:relative;width:44px;height:44px;border-radius:50%;background:var(--sr-c);box-shadow:0 8px 18px -10px var(--sr-c);transition:transform .45s var(--sr-ease)}
.sr-tog::before,.sr-tog::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:1px;background:#fff;transition:transform .45s var(--sr-ease)}
.sr-tog::after{transform:rotate(90deg)}
.sr-grp-btn[aria-expanded=true] .sr-tog{transform:rotate(180deg)}
.sr-grp-btn[aria-expanded=true] .sr-tog::after{transform:rotate(180deg)}
@media (hover:hover){
  .sr-grp:hover{box-shadow:var(--sr-lift-hi)}
  .sr-grp-btn:hover .sr-grp-art img{transform:scale(1.03)}
  .sr-grp-btn:hover .sr-fan span{transform:translateY(calc(var(--k) * -2px - 3px)) rotate(0deg)}}
.sr-grp-btn[aria-expanded=true] .sr-fan span{transform:translateY(-3px) rotate(0)}
/* the panel: grows open (grid rows 0fr to 1fr), its items rise in turn */
.sr-grp-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--sr-ease)}
.sr-grp-panel>div{overflow:hidden;min-height:0}
.sr-grp.sr-open .sr-grp-panel{grid-template-rows:1fr}
.sr-grp-list{display:grid;grid-template-columns:1fr;gap:8px;margin:0;padding:4px 12px 14px;list-style:none}
.sr-grp-list li{opacity:0;transform:translateY(10px);transition:opacity .4s var(--sr-ease),transform .5s var(--sr-ease);transition-delay:calc(var(--i) * 35ms + 120ms)}
.sr-grp.sr-open .sr-grp-list li{opacity:1;transform:none}
.sr-item{display:grid;grid-template-columns:40px 1fr 16px;align-items:center;gap:12px;min-height:56px;padding:8px 12px 8px 8px;border-radius:12px;text-decoration:none;color:var(--sr-ink);
  background:color-mix(in srgb,var(--h,var(--sr-c)) 7%,#fffdf8);border:1px solid color-mix(in srgb,var(--h,var(--sr-c)) 18%,transparent);transition:background .2s,transform .25s var(--sr-ease)}
.sr-item:hover{background:color-mix(in srgb,var(--h,var(--sr-c)) 13%,#fffdf8);transform:translateX(2px)}
.sr-item:focus-visible{outline:2.5px solid var(--sr-gold);outline-offset:2px}
.sr-item>svg:first-child{width:40px;height:40px;padding:9px;border-radius:10px;background:var(--h,var(--sr-c));fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sr-item b{display:block;font:700 14.5px/1.25 var(--sr-sans)}
.sr-item small{display:block;margin-top:2px;font:400 12.5px/1.35 var(--sr-sans);color:var(--sr-dim)}
.sr-item i{font-style:normal;color:var(--h,var(--sr-c));font-weight:700}
.sr-grp-more{display:flex;justify-content:flex-end;padding:0 16px 16px}
.sr-grp-more a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:700 14px/1 var(--sr-sans);color:var(--sr-c);text-decoration:none;border-bottom:1.5px solid color-mix(in srgb,var(--sr-c) 35%,transparent)}

/* ---------- recipes: arrangements with rhythm, never a uniform grid ---------- */
.sr-r{display:grid;gap:var(--sr-gap);grid-template-columns:minmax(0,1fr)}
/* pairs: two compact tiles side by side even on a phone */
.sr-pair{display:grid;gap:var(--sr-gap);grid-template-columns:repeat(2,minmax(0,1fr))}
/* the shelf: a carousel on a phone (one tile and the edge of the next), a row on wider screens */
.sr-shelf{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:var(--sr-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--sr-pad);
  margin:0 calc(var(--sr-pad) * -1);padding:4px var(--sr-pad) 22px;scrollbar-width:none;overscroll-behavior-x:contain}
.sr-shelf::-webkit-scrollbar{display:none}
.sr-shelf>*{scroll-snap-align:start}
.sr-shelf-dots{display:flex;justify-content:center;gap:6px;margin-top:-8px}
.sr-shelf-dots i{width:6px;height:6px;border-radius:3px;background:rgba(20,46,48,.2);transition:width .3s var(--sr-ease),background .3s}
.sr-shelf-dots i.on{width:18px;background:var(--sr-gold)}
.sr-dark .sr-shelf-dots i{background:rgba(255,255,255,.25)}.sr-dark .sr-shelf-dots i.on{background:var(--sr-gold2)}
.sr-stack{display:grid;gap:var(--sr-gap)}

@media (min-width:768px){
  .sr{--sr-gap:18px;--sr-pad:28px}
  .sr-sec{padding-top:var(--sr-7)}.sr-sec+.sr-sec{padding-top:var(--sr-7)}
  .sr-sec.sr-dark{padding:var(--sr-7) 0}
  .sr-head{margin-bottom:var(--sr-5)}
  /* featured: one large tile beside a stack of two (asymmetric) */
  .sr-r.sr-featured{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:stretch}
  .sr-r.sr-featured>:first-child{grid-row:span 2}
  .sr-r.sr-featured.sr-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
  .sr-r.sr-featured.sr-flip>:first-child{grid-column:2;grid-row:1/span 2}
  /* one plus two, and two plus one: a wide tile over a pair, or a pair over a wide tile */
  .sr-r.sr-12,.sr-r.sr-21{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sr-r.sr-12>:first-child{grid-column:1/-1}
  .sr-r.sr-21>:last-child{grid-column:1/-1}
  .sr-r.sr-12>:first-child .sr-pic,.sr-r.sr-21>:last-child .sr-pic{aspect-ratio:21/9}
  .sr-shelf{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));overflow:visible;margin:0;padding:0}
  .sr-shelf-dots{display:none}
  .sr-pair.sr-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sr-hero .sr-plac{padding:20px 28px 26px}
  .sr-plac{padding:16px 20px 20px}
  .sr-cmp .sr-plac{padding:12px 16px 16px}.sr-cmp .sr-plac b{font-size:19px}.sr-cmp .sr-plac span.sr-line{font-size:14px}}
@media (min-width:1100px){
  .sr-r.sr-featured{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  /* the editorial row: a wide picture and its placard side by side, alternating */
  .sr-ed{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}
  .sr-ed .sr-pic{aspect-ratio:auto;height:100%;min-height:340px;border-radius:var(--sr-r) 0 0 var(--sr-r)}
  .sr-ed .sr-plac{align-content:center;padding:32px;border-top:0;border-left:3px solid var(--sr-c)}
  .sr-ed.sr-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}.sr-ed.sr-flip .sr-pic{order:2;border-radius:0 var(--sr-r) var(--sr-r) 0}
  .sr-ed.sr-flip .sr-plac{border-left:0;border-right:3px solid var(--sr-c)}
  .sr-ed .sr-plac b{font-size:30px}
  .sr-hero.sr-ed .sr-plac{margin-top:0;padding:40px}
  .sr-hero.sr-ed .sr-pic::after{background:linear-gradient(270deg,rgba(12,35,36,.6),rgba(12,35,36,0) 40%)}
  .sr-grp-art{aspect-ratio:2/1}}

/* ---------- choreography: tiles rise into place in turn as they come into view ---------- */
.sr-anim .sr-rise{opacity:0;transform:translateY(22px);transition:opacity var(--sr-dur) var(--sr-ease),transform var(--sr-dur) var(--sr-ease);transition-delay:calc(var(--i,0) * 80ms)}
.sr-anim .sr-rise.sr-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sr *,.sr *::before,.sr *::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
  .sr-anim .sr-rise{opacity:1;transform:none}}

/* ---------- buttons and the doors ---------- */
.sr-acts{display:flex;flex-wrap:wrap;gap:12px;margin:var(--sr-4) 0 0}
.sr-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;text-decoration:none;font:400 17px/1 var(--sr-serif);
  color:#1d1405;background:linear-gradient(180deg,#e0b46a,#b8863a);box-shadow:0 12px 26px -14px rgba(184,134,58,.95),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .25s var(--sr-ease)}
.sr-btn:hover{transform:translateY(-2px)}
.sr-doors{margin:18px 0 6px}
.sr-doors .sr-pair{gap:10px}
.sr-doors .sr-cmp .sr-plac{padding:9px 11px 11px}
.sr-doors .sr-cmp .sr-plac b{font-size:17px}
.sr-doors .sr-cmp .sr-plac span.sr-line{font-size:12.5px}
.sr-doors .sr-cmp{border-top:0}
.sr-doors .sr-cmp .sr-pic{aspect-ratio:16/9}
@media (min-width:768px){.sr-doors .sr-pair.sr-4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- rhythm between arrangements in a section ---------- */
.sr-sec>:not(.sr-head)+*:not(.sr-shelf-dots),.sr-wrap>:not(.sr-head)+*:not(.sr-shelf-dots){margin-top:var(--sr-gap)}
.sr-sec>.sr-shelf-dots+*,.sr-wrap>.sr-shelf-dots+*{margin-top:var(--sr-4)}
/* on a phone a featured arrangement can keep its flagship full width and set the other two side by side */
@media (max-width:767px){
  .sr-r.sr-featured.sr-ppair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sr-r.sr-featured.sr-ppair>:first-child{grid-column:1/-1}
  .sr-r.sr-featured.sr-ppair>:not(:first-child) .sr-plac{padding:10px 12px 13px;gap:3px}
  .sr-r.sr-featured.sr-ppair>:not(:first-child) .sr-plac b{font-size:17px}
  .sr-r.sr-featured.sr-ppair>:not(:first-child) .sr-plac span.sr-line{font-size:13px;line-height:1.4}
  .sr-r.sr-featured.sr-ppair>:not(:first-child) .sr-plac .sr-fam{font-size:9.5px;letter-spacing:.12em}
  .sr-r.sr-featured.sr-ppair>:not(:first-child) .sr-go{display:none}}
/* the flagship of a featured arrangement fills its full height: its screenshot is never cropped or zoomed. It stands on its
   family's lit floor, centered, with a soft shadow beneath, and the floor takes whatever height the pair beside it needs */
@media (min-width:768px){
  .sr-r.sr-featured>:first-child>.sr-pic,.sr-r.sr-featured>:first-child>.sr-picwrap{flex:1 1 auto;min-height:280px}
  .sr-r.sr-featured>:first-child .sr-pic{display:grid;place-items:center;aspect-ratio:auto;height:100%;padding:6% 6%;
    background:radial-gradient(75% 60% at 50% 18%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),linear-gradient(180deg,var(--sr-t),var(--sr-t2))}
  .sr-r.sr-featured>:first-child.sr-hero .sr-pic{background:radial-gradient(70% 55% at 50% 12%,rgba(214,167,90,.22),rgba(214,167,90,0) 70%),linear-gradient(180deg,#173f3f,#0c2324)}
  .sr-r.sr-featured>:first-child .sr-pic img{width:100%;height:auto;aspect-ratio:16/10;border-radius:12px;box-shadow:0 30px 50px -26px rgba(8,26,27,.6),0 0 0 1px rgba(15,43,44,.10)}
  .sr-r.sr-featured>:first-child.sr-hero .sr-pic img{box-shadow:0 34px 60px -24px rgba(0,0,0,.75),0 0 0 1px rgba(214,167,90,.3)}
  .sr-r.sr-featured>:first-child .sr-pic::after{display:none}
  .sr-r.sr-featured>:first-child>.sr-picwrap .sr-pic{flex:1}}
.sr-picwrap{display:flex;flex-direction:column;text-decoration:none}

/* ---------- a group button standing alone in a section: picture and placard side by side on wider screens ---------- */
@media (min-width:768px){
  .sr-sec>.sr-grp .sr-grp-btn,.sr-wrap>.sr-grp .sr-grp-btn{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .sr-sec>.sr-grp .sr-grp-art,.sr-wrap>.sr-grp .sr-grp-art{aspect-ratio:auto;min-height:230px}
  .sr-sec>.sr-grp .sr-grp-plac,.sr-wrap>.sr-grp .sr-grp-plac{border-top:0;border-left:3px solid var(--sr-c);padding:24px 28px;align-content:center}}

/* ---------- the deck: a group button whose picture is its own family, fanned like cards ---------- */
.sr-grp-art.sr-deck{display:grid;place-items:center;background:radial-gradient(70% 80% at 50% 30%,color-mix(in srgb,var(--sr-c) 70%,#fff 8%),color-mix(in srgb,var(--sr-c) 85%,#000))}
.sr-grp-art.sr-deck::after{display:none}
.sr-deck .sr-fan{position:relative;inset:auto;display:flex;justify-content:center;gap:0;overflow:visible;padding:0}
.sr-deck .sr-fan span{flex-direction:column;justify-content:center;gap:8px;width:clamp(72px,19vw,104px);height:clamp(96px,25vw,136px);margin:0 -10px;padding:10px 6px;border-radius:12px;
  font:700 clamp(10.5px,2.6vw,13px)/1.15 var(--sr-sans);text-align:center;white-space:normal;
  background:linear-gradient(170deg,color-mix(in srgb,var(--h) 92%,#fff),color-mix(in srgb,var(--h) 80%,#000));
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 14px 24px -12px rgba(0,0,0,.65);
  transform:translateY(calc((var(--k) - var(--m,2)) * (var(--k) - var(--m,2)) * 4px)) rotate(calc((var(--k) - var(--m,2)) * 7deg));transform-origin:50% 120%}
.sr-deck .sr-fan span svg{width:clamp(26px,7vw,38px);height:clamp(26px,7vw,38px);stroke-width:1.5}
@media (hover:hover){.sr-grp-btn:hover .sr-deck .sr-fan span{transform:translateY(calc((var(--k) - var(--m,2)) * (var(--k) - var(--m,2)) * 3px - 6px)) rotate(calc((var(--k) - var(--m,2)) * 10deg))}}
.sr-grp-btn[aria-expanded=true] .sr-deck .sr-fan span{transform:translateY(-4px) rotate(calc((var(--k) - var(--m,2)) * 3deg))}

/* ---------- the home page in the showroom (studio/home-showroom.mjs) ---------- */
html[data-home=showroom] .hero-copy .hero-deck,html[data-home=showroom] .hero-copy .hero-actions{display:none!important}
html[data-home=showroom] .hero-copy h1 em{font-style:italic;color:#8a6420}
html[data-home=showroom] .sr-home{display:block}
html[data-home=showroom] .sr-home>section.hp{margin-top:var(--sr-6,56px)}

/* a group's list follows the group's own width, wherever it sits */
.sr-grp{container-type:inline-size}
@container (min-width:520px){.sr-grp-list{grid-template-columns:repeat(2,minmax(0,1fr));padding:6px 16px 16px}}
@container (min-width:860px){.sr-grp-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* a group that opens never stretches its neighbor */
.sr-r.sr-12,.sr-r.sr-21,.sr-pair{align-items:start}
.sr-hero a.sr-go{min-height:44px}
@media (min-width:1100px){.sr-tile.sr-ed>.sr-pic{width:100%;aspect-ratio:auto!important;height:100%}}
/* while no family is open, the tiles of a row share one height */
.sr-r:not(:has(.sr-open)),.sr-pair:not(:has(.sr-open)){align-items:stretch}
.sr-grp{display:flex;flex-direction:column}.sr-grp-btn{flex:1 1 auto;grid-template-rows:auto 1fr}
/* on wider screens each door is a short row (picture beside its name), so the doors and the finder share the first screen */
@media (min-width:768px){
  .sr-doors .sr-cmp{flex-direction:row;align-items:stretch;min-height:92px}
  .sr-doors .sr-cmp .sr-pic{flex:0 0 44%;aspect-ratio:auto;border-radius:var(--sr-r) 0 0 var(--sr-r)}
  .sr-doors .sr-cmp .sr-plac{align-content:center;padding:10px 12px}
  .sr-doors .sr-cmp .sr-plac b{font-size:18px}}

/* ---------- door pages: the head, its jump links, and the quiet "more" button ---------- */
.sr-door{position:relative;margin:0 0 var(--sr-2);padding:var(--sr-5) var(--sr-pad) var(--sr-4);
  background:radial-gradient(90% 120% at 85% 0,color-mix(in srgb,var(--sr-c) 16%,transparent),transparent 60%),linear-gradient(180deg,var(--sr-t),var(--sr-paper));border-bottom:1px solid var(--sr-rule)}
.sr-door-in{max-width:1180px;margin:0 auto;display:grid;gap:var(--sr-2)}
.sr-door h1{margin:0;font:400 clamp(36px,9vw,64px)/1.02 var(--sr-serif);letter-spacing:-.022em;color:var(--sr-ink)}
.sr-door h1 em{font-style:italic;color:var(--sr-gold-ink)}
.sr-door .sr-lead{margin:4px 0 0;max-width:40rem;font:400 18px/1.5 var(--sr-serif);color:var(--sr-dim)}
.sr-jump{display:flex;gap:8px;margin:var(--sr-3) calc(var(--sr-pad) * -1) 0;padding:2px var(--sr-pad) 6px;overflow-x:auto;scrollbar-width:none}
.sr-jump::-webkit-scrollbar{display:none}
.sr-jump a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font:600 14px/1 var(--sr-sans);color:var(--sr-ink);text-decoration:none;
  background:rgba(255,253,248,.9);border:1px solid color-mix(in srgb,var(--sr-c) 30%,transparent);box-shadow:0 6px 14px -12px rgba(15,43,44,.6);transition:transform .2s var(--sr-ease),background .2s}
.sr-jump a:hover{transform:translateY(-1px);background:#fff}
.sr-sec[id]{scroll-margin-top:84px}
.sr-more{display:flex;justify-content:center;margin:var(--sr-4) 0 0}
.sr-btn.sr-line{color:var(--sr-ink);background:transparent;border:1.5px solid color-mix(in srgb,var(--sr-ink) 70%,transparent);box-shadow:none;font-size:16px}
.sr-dark .sr-btn.sr-line{color:var(--sr-cream);border-color:rgba(243,238,224,.6)}
.sr-grp-own{padding:4px 14px 16px}
@media (min-width:768px){.sr-door{padding:var(--sr-6) var(--sr-pad) var(--sr-5)}.sr-jump{flex-wrap:wrap;overflow:visible;margin:var(--sr-3) 0 0;padding:0}}

/* two columns from tablet width up, one on a phone */
@media (min-width:768px){.sr-r.sr-g2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* phone rhythm: tighter sections, shorter group pictures, and a small shelf with two tiles in view */
@media (max-width:767px){
  .sr-sec{padding-top:40px}.sr-sec+.sr-sec{padding-top:40px}.sr-sec.sr-dark{margin-top:40px;padding:40px 0}
  .sr-head{margin-bottom:16px}
  .sr-grp-art{aspect-ratio:2/1}
  .sr-shelf.sr-small{grid-auto-columns:46%}
  .sr-doors .sr-cmp .sr-pic{aspect-ratio:2/1}}
@media (max-width:767px){
  .sr-doors .sr-cmp .sr-pic{aspect-ratio:5/2}
  .sr-doors .sr-cmp .sr-plac span.sr-line{display:none}
  .sr-home #sr-exams .sr-lead{display:none}
  .sr-home .sr-hero .sr-plac span.sr-line{display:none}}

/* ---------- a door page inside the site frame: the cream page, as the exam and FAQ pages have it ---------- */
body[data-review][data-exp=door]{background:#f4f1e8!important;--x-text:#142e30;--x-dim:#45534f;--x-faint:#5f6d6a;--x-hair:#e2ddd1;--x-hair2:#d4cfc2;--x-surface:#fbfaf6}
body[data-review][data-exp=door]::before,body[data-review][data-exp=door]::after{display:none!important}
body[data-review][data-exp=door] header.wrap{background:transparent}
body[data-review][data-exp=door] .nav{border-bottom:1px solid #ddd8cb}
body[data-review][data-exp=door] .brand,body[data-review][data-exp=door] .brand *{color:#142e30!important;-webkit-text-fill-color:currentColor!important;background:none!important}
body[data-review][data-exp=door] .xp-tab.on{background:transparent}
body[data-review][data-exp=door] .xp-page::before{display:none}
/* the site frame styles headings and links for its dark pages; inside the showroom our own colors hold */
body[data-review] .sr :is(h1,h2,h3,b,p,span,a,em,small,i){-webkit-text-fill-color:currentColor;text-shadow:none}
body[data-review] .sr-door h1{color:var(--sr-ink)!important}body[data-review] .sr-door h1 em{color:var(--sr-gold-ink)!important}
body[data-review] .sr-kick{color:var(--sr-gold-ink)!important}body[data-review] .sr-dark .sr-kick{color:var(--sr-gold2)!important}
body[data-review] .sr-head h2{color:var(--sr-ink)!important}body[data-review] .sr-head h2 em{color:var(--sr-gold-ink)!important}
body[data-review] .sr-dark .sr-head h2{color:var(--sr-cream)!important}body[data-review] .sr-dark .sr-head h2 em{color:var(--sr-gold2)!important}
body[data-review] .sr-lead{color:var(--sr-dim)!important}body[data-review] .sr-dark .sr-lead{color:rgba(243,238,224,.8)!important}
body[data-review] .sr-jump a{color:var(--sr-ink)!important}
body[data-review] .sr-tile:not(.sr-hero),body[data-review] .sr-item,body[data-review] .sr-grp-btn{color:var(--sr-ink)!important}
body[data-review] .sr-plac b{color:var(--sr-ink)!important}body[data-review] .sr-hero .sr-plac b,body[data-review] .sr-hero .sr-plac b a{color:#fff6e2!important}
body[data-review] .sr-btn.sr-line{color:var(--sr-ink)!important}body[data-review] .sr-dark .sr-btn.sr-line{color:var(--sr-cream)!important}
.sr-door-host{display:block}
body[data-review] .sr-plac span.sr-line,body[data-review] .sr-grp-plac .sr-line,body[data-review] .sr-item small{color:var(--sr-dim)!important}
body[data-review] .sr-hero .sr-plac span.sr-line{color:rgba(243,238,224,.84)!important}
body[data-review] .sr-go{color:var(--sr-c)!important}body[data-review] .sr-hero .sr-go{color:#f1d48f!important}
body[data-review] .sr-plac .sr-fam,body[data-review] .sr-grp-plac .sr-fam{color:var(--sr-c)!important}body[data-review] .sr-hero .sr-plac .sr-fam{color:var(--sr-gold2)!important}
body[data-review] .sr-fan span{color:#fff!important}
.sr-live{border-radius:var(--sr-r);overflow:hidden}
/* The exams hub (studio/exam-hub-showroom.mjs): a board tile opens its card below, and the card glows once in its color. */
.sr-bt{margin-top:4px}
.ex2 .eb{scroll-margin-top:84px}
.ex2 .eb.eb-lit{animation:sr-eb-lit 1.8s cubic-bezier(.2,.7,.2,1)}
@keyframes sr-eb-lit{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 0%,transparent)}25%{box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 35%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.ex2 .eb.eb-lit{animation:none}}
/* Drawn tiles (SR.drawing): an exact drawing on the family's floor, in place of a screenshot. The ear lessons on Ear Training. */
.sr-drawn .sr-art{display:grid;place-items:center;padding:7% 9%;background:radial-gradient(90% 80% at 50% 0,rgba(255,255,255,.8),rgba(255,255,255,0) 70%),linear-gradient(180deg,var(--sr-t),var(--sr-t2))}
.sr-drawn .sr-art svg{display:block;width:100%;height:100%;max-height:100%;overflow:visible}
.sr-art .fr-t{font:600 13px Georgia,serif;fill:#142e30}.sr-art .fr-s{font:10px Arial,sans-serif;fill:#45524f}.sr-art .fr-c{font:14px Georgia,serif;fill:#142e30}
.sr-art .fr-a{fill:#b8863a}.sr-art .fr-b{fill:#23584f}.sr-art .fr-d{fill:#a9b4ae}.sr-art .fr-o{fill:#fbfaf6;stroke:#23584f;stroke-width:2}.sr-art .fr-arc{fill:none;stroke:#b8863a;stroke-width:1.5}
.sr-art .fr-l1{fill:none;stroke:#b8863a;stroke-width:3}.sr-art .fr-l2{fill:none;stroke:#23584f;stroke-width:3}
.sr-anim .sr-drawn.sr-in .fr-l1,.sr-anim .sr-drawn.sr-in .fr-l2,.sr-anim .sr-drawn.sr-in .fr-arc{stroke-dasharray:400;stroke-dashoffset:400;animation:sr-draw 1.6s .3s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes sr-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.sr-anim .sr-drawn.sr-in :is(.fr-l1,.fr-l2,.fr-arc){animation:none;stroke-dasharray:none}}
/* The auditions hub (studio/audition.mjs, ?showroom=1): room between the region groups and the pair below them. */
.au-sr .sr-pair{margin-top:var(--sr-4)}
/* Group pair (SR.oneTwo(tiles, {groups: true})): on a phone the two group buttons sit side by side under the wide tile, so
   the families read as one choice. The one that opens takes the whole row and shows every item. */
@media (max-width:760px){
  .sr-r.sr-12.sr-gpair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sr-r.sr-12.sr-gpair>:first-child,.sr-r.sr-12.sr-gpair>.sr-grp.sr-open{grid-column:1/-1}
  .sr-gpair>.sr-grp:not(.sr-open) .sr-grp-art{aspect-ratio:1/1}
  .sr-gpair>.sr-grp:not(.sr-open) .sr-fan{left:-50%;right:-50%;transform:scale(.56);transform-origin:50% 100%;bottom:8px}
  .sr-gpair>.sr-grp:not(.sr-open) .sr-grp-plac{grid-template-columns:1fr;padding:10px 12px 12px;gap:3px}
  .sr-gpair>.sr-grp:not(.sr-open) .sr-grp-plac b{font-size:17px}
  .sr-gpair>.sr-grp:not(.sr-open) .sr-grp-plac .sr-line{font-size:13px;line-height:1.4}
  .sr-gpair>.sr-grp:not(.sr-open) .sr-grp-plac .sr-fam{font-size:9.5px;letter-spacing:.12em}
  .sr-gpair>.sr-grp:not(.sr-open) .sr-tog{display:none}
  .sr-gpair>.sr-grp:not(.sr-open) .sr-deck .sr-fan{left:auto;right:auto;bottom:auto;transform:scale(.62);transform-origin:50% 50%}
  .sr-gpair>.sr-grp:not(.sr-open) .sr-deck .sr-fan span{width:84px;height:110px}
}