/* An acoustic study in the same bone, purple and gold material as the cast. */
.sound-design{padding:64px var(--page-gutter) 64px;overflow:hidden;position:relative}
.sound-design::after{content:"";position:absolute;inset:0 var(--page-gutter) auto;border-top:1px solid #17122044;pointer-events:none}
.sound-heading{margin-bottom:34px}
.sound-heading h2{width:68%}
.sound-heading p{max-width:29ch}
.sound-stage{display:grid;grid-template-columns:minmax(0,1fr) 210px;column-gap:38px;position:relative}
.sound-space{position:relative;min-width:0;height:370px;isolation:isolate;touch-action:pan-y pinch-zoom;overflow:hidden}
.sound-space::before{content:"";position:absolute;inset:36px 0 30px;pointer-events:none;border:1px solid #4f2bab4a;z-index:2;clip-path:polygon(0 0,14px 0,14px 1px,calc(100% - 14px) 1px,calc(100% - 14px) 0,100% 0,100% 14px,calc(100% - 1px) 14px,calc(100% - 1px) calc(100% - 14px),100% calc(100% - 14px),100% 100%,calc(100% - 14px) 100%,calc(100% - 14px) calc(100% - 1px),14px calc(100% - 1px),14px 100%,0 100%,0 calc(100% - 14px),1px calc(100% - 14px),1px 14px,0 14px)}
.sound-space-label{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.025em;color:var(--purple);z-index:2}
.sound-mode{display:inline-flex;gap:8px;align-items:center}
.sound-mode i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.sound-stage[data-sound-state="playing"] .sound-mode{color:#36531f}
#sound-canvas{position:absolute;inset:12px 0 16px;width:100%;height:calc(100% - 28px);touch-action:pan-y pinch-zoom}
.sound-axis{position:absolute;font:500 9px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#655577;pointer-events:none}
.sound-axis-left{left:7px;top:50%;writing-mode:vertical-rl;transform:rotate(180deg)}
.sound-axis-bottom{left:50%;bottom:9px;transform:translateX(-50%)}
.sound-fallback{position:absolute;inset:44px 20px 40px;z-index:-1;pointer-events:none}
.sound-fallback svg{width:100%;height:100%;color:var(--purple);opacity:.55}
.sound-fallback path{stroke-width:1}
.sound-stage[data-sound-ready="true"] .sound-fallback{display:none}
.sound-analysis{padding-top:37px;display:flex;flex-direction:column;gap:28px;min-width:0;color:var(--purple)}
.sound-analysis h3{font:500 11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.025em;margin-bottom:10px}
#sound-spectrum{display:block;width:100%;height:70px;overflow:visible}
#sound-spectrum .sound-spectrum-baseline{stroke:#4f2bab25;stroke-width:1}
#sound-spectrum [data-spectrum-path]{stroke:var(--purple);stroke-width:1.5;fill:none;stroke-linejoin:round;stroke-linecap:round}
.sound-frequency-labels{display:flex;justify-content:space-between;margin-top:9px;font:500 9px var(--mono);color:#655577;text-transform:uppercase}
.sound-stereo{position:relative;padding-top:20px;border-top:1px solid #4f2bab33}
.sound-meter-row{display:flex;align-items:center;gap:12px;margin-bottom:9px;font:500 10px var(--mono)}
.sound-meter{display:block;flex:1;height:6px;background:#4f2bab13;overflow:hidden}
.sound-meter i{height:100%;width:100%;display:block;background:var(--purple);transform:scaleX(0);transform-origin:left center}
.sound-meter-row:nth-of-type(2) .sound-meter i{background:#8a611e}
.sound-level{display:block;text-align:right;margin-top:10px;font:500 10px var(--mono);font-variant-numeric:tabular-nums}
.sound-analysis-note{font-size:13px;line-height:1.55;max-width:23ch;color:#51445e}
.sound-transport{grid-column:1/-1;display:flex;align-items:center;gap:24px;padding-top:20px;border-top:1px solid #17122044;margin-top:8px}
#sound-play{min-width:194px;min-height:52px;gap:16px;justify-content:flex-start;flex-shrink:0}
#sound-play svg{width:18px;height:18px}
#sound-play[aria-busy="true"]{opacity:.75}
.sound-demo-credit strong{font-weight:600;font-size:14px;line-height:1.5}
#sound-status{font-size:13px;line-height:1.5;color:#51445e;margin-top:2px}
.sound-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:34px}
.sound-principles>div{border-top:1px solid #17122044;padding-top:13px}
.sound-principles h3{font:500 11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.025em}
.sound-principles p{font-size:14px;line-height:1.6;margin-top:5px;color:#51445e}
.sound-noscript{margin-top:24px}
.sound-noscript a{text-decoration:underline;text-underline-offset:5px}
@media(min-width:1600px){.sound-space{height:400px}}
@media(max-width:1000px){.sound-design{padding:56px var(--mobile-edge-left) 56px;padding-right:var(--mobile-edge-right)}.sound-design::after{left:var(--mobile-edge-left);right:var(--mobile-edge-right)}.sound-stage{grid-template-columns:minmax(0,1fr) 170px;column-gap:24px}.sound-space{height:330px}.sound-analysis{gap:22px}.sound-heading p{font-size:16px}.sound-principles{gap:20px}}
@media(max-width:700px){.sound-design{padding-top:48px;padding-bottom:44px}.sound-heading{margin-bottom:26px}.sound-heading h2{width:100%}.sound-heading p{max-width:34ch;font-size:16px}.sound-stage{grid-template-columns:minmax(0,1fr);gap:0}.sound-space{height:260px}.sound-axis-left{font-size:8px}.sound-analysis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding-top:5px;padding-bottom:16px}.sound-stereo{border-top:0;padding-top:0}.sound-analysis h3{font-size:10px;margin-bottom:9px}#sound-spectrum{height:48px}.sound-analysis-note{display:none}.sound-level{margin-top:14px}.sound-transport{margin-top:0;padding-top:17px;gap:14px;align-items:flex-start}#sound-play{min-width:0;min-height:48px;padding:13px 16px;gap:9px;font-size:13px}.sound-demo-credit{padding-top:2px;min-width:0}.sound-demo-credit strong{font-size:13px}#sound-status{font-size:12px;max-width:22ch}.sound-principles{gap:14px;margin-top:26px}.sound-principles h3{font-size:10px;line-height:1.6}.sound-principles p{display:none}.sound-space-label{font-size:10px}.sound-frequency-labels{font-size:8px}}
@media(max-width:350px){.sound-space{height:240px}.sound-transport{flex-wrap:wrap;gap:12px}.sound-demo-credit{flex:1 1 130px}#sound-play{min-width:148px}.sound-principles{gap:12px}.sound-principles h3{font-size:9px}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){.sound-heading{display:flex;gap:28px}.sound-heading h2{width:60%;font-size:58px}.sound-heading p{width:40%;margin-top:0;max-width:28ch}.sound-stage{grid-template-columns:minmax(0,1fr) 170px}.sound-space{height:250px}.sound-analysis{display:flex;padding-top:36px;gap:18px}.sound-principles{margin-top:24px}}
@media(forced-colors:active){.sound-space::before{border-color:CanvasText}.sound-analysis,.sound-space-label,.sound-axis,.sound-frequency-labels,.sound-level,.sound-analysis-note,#sound-status,.sound-principles p{color:CanvasText}.sound-meter{border:1px solid CanvasText}.sound-meter i{background:CanvasText!important}#sound-spectrum [data-spectrum-path]{stroke:CanvasText}}
