:root { color-scheme: dark; --bg:#131416; --panel:#191a1d; --text:#ececed; --muted:#98999e; --line:#ffffff19; --accent:#cb895b; font:14px/1.6 'Helvetica Neue',Arial,sans-serif; background:var(--bg); color:var(--text); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:24px; } body { margin:0; } a { color:inherit; text-decoration:none; } button { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } :focus-visible { outline:2px solid var(--accent); outline-offset:5px; } .site { max-width:1440px; margin:auto; padding:0 64px; } h1,h2,p { margin:0; } .skip { position:fixed; top:12px; left:16px; padding:10px 16px; color:#17181a; background:var(--accent); transform:translateY(-200%); z-index:10; } .skip:focus { transform:none; }
.masthead { height:108px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:24px; } .brand { display:flex; align-items:center; gap:12px; font-size:19px; font-weight:650; letter-spacing:.09em; line-height:1.15; } .brand img { display:block; width:180px; height:auto; } .brand-studio { display:block; font-size:10px; letter-spacing:.24em; font-weight:400; color:var(--muted); border-left:1px solid var(--line); padding:8px 0 8px 18px; } .masthead nav { display:flex; gap:32px; font-size:12px; color:#c4c4c7; } .masthead nav a:hover { color:var(--accent); } .masthead nav span { color:var(--muted); font-size:10px; margin-left:5px; }
.intro { padding:67px 0 64px; display:flex; justify-content:space-between; gap:40px; align-items:end; } .eyebrow { font:10px/1.7 'SFMono-Regular',Consolas,monospace; letter-spacing:.11em; color:var(--muted); } h1 { margin-top:22px; font-size:clamp(40px,4.8vw,70px); letter-spacing:-.055em; line-height:1.05; font-weight:500; } h1 span { color:#85868b; } .intro-copy { padding-bottom:3px; min-width:230px; } .intro-copy p { color:#b2b3b8; line-height:1.75; font-size:14px; } .intro-copy a { display:inline-flex; gap:12px; align-items:center; margin-top:25px; font-size:12px; } .intro-copy svg { width:21px; }
.collection-bar { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; padding:19px 0; margin-bottom:26px; } .filters { display:flex; flex-wrap:wrap; gap:5px; } .filters button { color:#9b9ca2; background:transparent; border:1px solid transparent; padding:7px 14px; cursor:pointer; border-radius:3px; font-size:12px; white-space:nowrap; } .filters button:hover { color:var(--text); background:#ffffff05; } .filters button[aria-pressed=true] { border-color:#ffffff25; background:#ffffff0b; color:var(--text); } .result-count { color:var(--muted); white-space:nowrap; font-size:11px; font-family:'SFMono-Regular',Consolas,monospace; }
.instruments { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .instrument { min-width:0; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:4px; transition:border-color 160ms,background 160ms; overflow:hidden; } .instrument:hover { border-color:color-mix(in srgb,var(--instrument) 52%,transparent); background:#1d1e21; } .instrument:focus-visible { outline-color:var(--instrument); } .instrument[hidden] { display:none; } .instrument-top { display:flex; gap:12px; justify-content:space-between; align-items:center; padding:16px 17px 0; font:9px/1.6 'SFMono-Regular',Consolas,monospace; color:var(--muted); } .open-arrow { display:grid; place-items:center; color:var(--instrument); font:18px/1 sans-serif; width:18px; height:18px; flex-shrink:0; } .open-arrow svg { width:18px; height:18px; } .instrument-art { color:var(--instrument); padding:17px 5px 11px; } .instrument-art svg { width:100%; height:auto; display:block; } .instrument-copy { padding:7px 20px 24px; flex:1; } .instrument h2 { font-size:19px; font-weight:500; letter-spacing:-.04em; margin-bottom:12px; } .instrument-copy p { color:#a6a7ad; font-size:12px; line-height:1.75; min-height:63px; } .detail { display:block; color:#83858c; font-size:10px; margin-top:15px; } .instrument-bottom { display:flex; gap:10px; justify-content:space-between; align-items:center; border-top:1px solid #ffffff0c; padding:13px 17px; color:#b9b9bd; font-size:9px; } .instrument-bottom i { color:#66686f; font-style:normal; margin:0 6px; } .open-label { color:var(--instrument); white-space:nowrap; }
.about { margin-top:76px; border-top:1px solid var(--line); padding:43px 0; display:grid; grid-template-columns:1fr 1fr; gap:100px; } .about h2 { font-size:30px; letter-spacing:-.04em; font-weight:500; margin:15px 0; } .about > div > p:last-child { color:#9c9ea5; font-size:13px; max-width:430px; line-height:1.9; } .about-notes { display:grid; gap:24px; } .about-notes > div { display:flex; gap:19px; } .about-notes span { color:#6e7078; font:10px/1.7 'SFMono-Regular',Consolas,monospace; margin-top:2px; } .about-notes p { color:#92959d; font-size:12px; line-height:1.7; } .about-notes strong { display:block; color:#dedee2; font-size:13px; font-weight:500; margin-bottom:4px; }
.previous { padding:20px 0; border-top:1px solid var(--line); color:var(--muted); font-size:12px; } .previous summary { cursor:pointer; width:fit-content; } .previous > div { max-width:850px; padding-top:18px; } .previous nav { display:flex; flex-wrap:wrap; gap:12px 25px; margin-top:15px; color:#d2d3d8; } .previous a:hover { text-decoration:underline; } footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid var(--line); padding:28px 0 36px; font-size:10px; color:var(--muted); } .footer-name { display:flex; align-items:center; gap:10px; color:#cbccd0; letter-spacing:.12em; } .footer-name img { display:block; width:110px; height:auto; } .footer-name span { font-size:8px; } .not-found { max-width:850px; padding:15vh 30px; margin:auto; } .not-found h1 { font-size:50px; margin:20px 0; } .not-found a { display:inline-block; color:var(--accent); margin-top:30px; }
@media(min-width:1600px){.site{padding:0 50px}.intro{padding-top:83px;padding-bottom:80px}}
@media(max-width:1150px){.site{padding:0 36px}.instruments{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.instrument-art{padding:12px 22px}.instrument-copy p{min-height:auto}.instrument h2{font-size:24px}.instrument-bottom{font-size:11px}.about{gap:50px}.intro-copy{min-width:200px}.intro-copy p{font-size:12px}}
@media(max-width:650px){.site{padding:0 20px}.masthead{height:84px}.brand{gap:8px}.brand img{width:140px}.brand-studio{font-size:9px;padding-left:12px}.masthead nav{gap:18px}.masthead nav a:first-child,.masthead nav a:last-child{display:none}.intro{padding:41px 0 35px;display:block}.eyebrow{font-size:8px}.intro h1{font-size:43px;line-height:1.07;margin-top:18px}.intro-copy{margin-top:25px}.intro-copy p{font-size:12px}.intro-copy p br{display:none}.intro-copy a{margin-top:18px}.collection-bar{display:block;padding:13px 0;margin-bottom:18px}.filters{gap:2px}.filters button{font-size:10px;padding:7px 10px}.result-count{margin-top:12px;padding-left:11px;font-size:9px}.instruments{grid-template-columns:1fr;gap:16px}.instrument-art{padding:8px 25px 0}.instrument-copy{padding-top:0}.instrument h2{font-size:24px}.instrument-copy p{font-size:13px}.detail{font-size:11px}.instrument-top{font-size:10px}.about{margin-top:45px;padding-top:28px;grid-template-columns:1fr;gap:28px}.about h2{font-size:27px}.previous{font-size:11px}footer{font-size:9px}footer>span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.instrument{transition:none}}