@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;450;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--sans:'IBM Plex Sans',Arial,sans-serif;--serif:var(--sans);--mono:'IBM Plex Mono',monospace;--bg:#f4f1e9;--accent:#2c594d;--ink:#292a26;--line:#d1cec3}body{font-family:var(--sans)}.hero{max-width:100%;padding:65px 0 48px}.hero-title{font-family:var(--sans);font-size:64px;font-weight:500;letter-spacing:-2.7px}.hero-intro{max-width:650px}.hero-intro p{font-size:19px;font-weight:400;color:#62645c}.hero-links{display:none}.eyebrow,.label{letter-spacing:.5px}.brand{font-weight:500}.about h2,.music h2,.contact h2{font-weight:450;font-size:33px;letter-spacing:-1px}.projecthero h1{font-weight:500;font-size:72px}.casebody h2{font-weight:500;font-size:29px}.projecthero .subtitle{font-size:27px}
#work{padding:35px 0 60px;border-top:1px solid var(--line)}.work-head{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:35px}.kicker{font:10px/1.7 var(--mono);color:var(--muted)}.work-head h2{font:450 36px/1.2 var(--sans);letter-spacing:-1.1px;margin:12px 0 0}.work-head>p{max-width:280px;font-size:14px;color:var(--muted);margin:0 0 3px}.instrument-toolbar{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:20px;gap:20px}.mode-switch{display:flex;gap:4px;background:#e5e2d8;padding:4px;border-radius:5px}.mode-switch button,#sound{font:12px var(--sans);border:0;background:transparent;color:var(--muted);padding:10px 17px;cursor:pointer;border-radius:3px}.mode-switch button[aria-pressed=true]{color:var(--ink);background:var(--bg);box-shadow:0 1px 3px #00000010}#sound{border:1px solid var(--line);padding:9px 14px}#mode-description{font-size:12px;color:var(--muted);margin:13px 0 26px}.marimba{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:0 8px}.bank-title{display:flex;gap:18px;align-items:center;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:22px}.bank-title>span{font:9px var(--mono);color:var(--muted)}.bank-bars{height:310px;display:flex;gap:12px;position:relative}.bank-bars:before,.bank-bars:after{content:'';position:absolute;left:-8px;right:-8px;top:55px;height:4px;background:#b5aa96}.bank-bars:after{top:190px}.bar{height:var(--length);flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;padding:19px 8px;border:1px solid #80583e;border-radius:3px;background:linear-gradient(90deg,#956740,#b18354 55%,#9f7048);color:#fbefd8;box-shadow:0 6px 0 #674b35,0 12px 16px #3c30211a;cursor:pointer;transition:background .3s,color .3s,transform .2s}.bar:nth-child(2){background:linear-gradient(90deg,#8c5b39,#a5774a 55%,#956340)}.bar[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:5px;transform:translateY(-4px)}.bar:hover{filter:brightness(1.08)}.bar-number,.bar-note{font:10px var(--mono);opacity:.7}.bar-name{font:450 17px var(--sans);writing-mode:vertical-rl;transform:rotate(180deg);margin:auto 0;letter-spacing:.3px}.bar-pin{height:5px;width:5px;border-radius:50%;background:#453421;margin-bottom:12px;box-shadow:0 0 0 2px #c29e7566}.bar-pin.end{margin:12px 0 0}.instrument-caption{display:flex;justify-content:space-between;gap:20px;font:9px/1.6 var(--mono);color:var(--muted);padding:23px 0;border-bottom:1px solid var(--line)}#project-detail{display:grid;grid-template-columns:1fr 1.4fr;gap:55px;padding:32px 0 0;min-height:330px}.detail-heading h3{font-size:30px;line-height:1.2;font-weight:500;letter-spacing:-.8px;margin:12px 0}.purpose{font-size:16px;line-height:1.6;margin:0 0 23px}.case-link{font-size:12px;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:3px}.detail-content>p{font-size:15px;line-height:1.75;color:var(--muted);margin:0 0 25px}.experience-line{display:flex;align-items:center;gap:20px;padding:20px 0;border-top:1px solid var(--line);font-size:13px}.experience-line i{font-style:normal;color:var(--accent)}.look-inside{border:0;padding:10px 0;background:none;font:12px var(--sans);color:var(--accent);cursor:pointer}.signal-path{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0;list-style:none;margin:0 0 25px}.signal-path li{border-top:2px solid var(--accent);padding-top:10px;font:11px/1.5 var(--mono)}.signal-path li span{display:block;color:var(--muted);font-size:9px;margin-bottom:8px}.open-question{border-left:2px solid var(--line);padding-left:15px}.open-question>span{font:10px var(--mono);color:var(--accent)}.open-question p{font-size:12px;color:var(--muted);margin-bottom:0}.struck{animation:hit .3s ease-out}#work[data-mode=analysis] .bar{background:#e6e9e3;color:#304b40;border-color:#8e9d91;box-shadow:0 5px 0 #a5b2a7;background-image:repeating-linear-gradient(0deg,transparent,transparent 21px,#c8d2c7 22px)}#work[data-mode=analysis] .bar-pin{background:var(--accent);box-shadow:none}#work[data-mode=analysis] .bank-bars:before,#work[data-mode=analysis] .bank-bars:after{background:#8e9d91}#work[data-mode=analysis] .bank-title{color:var(--accent)}@keyframes hit{0%{translate:0 5px}50%{translate:0 -2px}100%{translate:0 0}}@media(max-width:700px){.hero{padding:42px 0 30px}.hero-title{font-size:49px;letter-spacing:-2px}.hero-intro p{font-size:17px}.work-head{display:block;margin-bottom:25px}.work-head h2{font-size:30px}.work-head>p{max-width:340px;margin-top:16px}.marimba{gap:12px;padding:0 5px}.bank-title{font-size:11px;gap:5px;display:block}.bank-title span{display:block;margin-bottom:4px}.bank-bars{height:245px;gap:7px}.bank-bars:after{top:150px}.bar{padding:14px 3px}.bar-name{font-size:13px}.bar-pin{height:4px;width:4px}.bar-number,.bar-note{font-size:8px}.instrument-caption{font-size:8px}.instrument-caption span{max-width:48%}#project-detail{display:block;min-height:0}.detail-content{margin-top:28px}.detail-heading h3{font-size:27px}.signal-path{gap:7px}.signal-path li{font-size:9px}.mode-switch button,#sound{font-size:11px;padding:9px 12px}.projecthero h1{font-size:49px}.about h2,.music h2,.contact h2{font-size:29px}}@media(prefers-reduced-motion:reduce){.bar{transition:none}.struck{animation:none}}